HTML to image using html2canvas and FileSaver.js not working when VF page loads in Lightning

Question

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.

Error:

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.

Answer 1

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.

References

• Introducing New Content Security Policy Options for Lightning Communities | Developer Force Blog

• Lightning Security - developer.force.com

• Salesforce Spring '17 Release Notes: Create CSP Trusted Sites to Access Third-Party APIs

• HTML5 Demos: a[download]