CSP Violation in html2canvas: Inline styles blocked despite valid style-src with nonce

[santhosh-js]

Current behavior

Hi team 👋,

I'm encountering a Content Security Policy (CSP) issue when using html2canvas in an Angular application. The browser is blocking inline styles applied during the rendering process, even though our CSP includes a strict style-src directive with a valid nonce.

Here’s the relevant part of our CSP header:

Content-Security-Policy: style-src 'self' 'nonce-XXXX';

When html2canvas is executed, the browser throws the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-XXXX'". Either the 'unsafe-inline' keyword, a hash ('sha256-83hARbNIO7YTlyqK0JRp0ycP4eu3Z7e4+6x9Q+jmMGU='), or a nonce ('nonce-...') is required to enable inline execution. at html2canvas.js:5272

It appears that html2canvas injects inline styles dynamically but does not apply the nonce, which results in the browser blocking those styles.

---

Expected behavior

html2canvas should ideally:

• Avoid the use of inline styles where possible, or
• Provide a mechanism to apply a CSP nonce to dynamically injected styles.

This would allow html2canvas to be used in Angular or other environments with strict CSP configurations without requiring 'unsafe-inline' or weakening the directive.

---

What I’ve tried

• Confirmed that the nonce is correctly applied to other inline styles in the Angular application
• Verified that we’re using the latest version of hrml2canvas
• Reviewed the documentation and available options, but couldn’t find a way to inject a nonce or avoid inline styles

---

Question

Is there a way to configure html2canvas (in Angular) to support CSP nonce usage for dynamically injecting styles?
Are there any workarounds or upcoming support planned for environments with strict CSP?

Thanks in advance!

---

---

---