I am using html2canvas and FileSaver.js for creating and downloading snap of HTML element in a VF page.

First I am converting a targeted HTML element into canvas using html2canvas and then converting canvas to blob[Type=Image] and downloading blob as an image using FileSaver.js.

This works very fine when VF page loads in Salesforce Classic mode. But in Salesforce Lightning mode it gives following errors.


In Google Chrome (Version 65):

Refused to frame '' because it violates the following Content Security Policy directive: "frame-src https: mailto: *.ap5.visual.force.com".

Not allowed to load local resource: blob:https://dfoc-ys-dev-02-dev-ed--c.ap5.visual.force.com/5e52d766-9394-453e-8137-283f5fa951a8

In Mozilla Firefox (Version 53 to 59)

Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://dfoc-ys-dev-02-dev-ed--c.ap5.visual.force.com/3736dbbd-4dfe-4af7-ad0d-a3a62bb2070c (“frame-src”).

From the errors, It looks like CSP enforced by Salesforce in Lightning mode not allowing blob inside iframe.

Any suggestions or workaround will be appreciated.


Convert the image to a data:uri using the toDataURL API, since a data:uri can be loaded as per the Content Security Policy:

"img-src 'http:' 'https:' 'data:'        Images can only be loaded via http, https, or data URIs. The security review requires https.

Then reference it as the href value of an anchor tag with a download attribute to download it.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.