JsBarcode icon indicating copy to clipboard operation
JsBarcode copied to clipboard

Support style CSP nonce for SVG renderer

Open justin-tay opened this issue 5 months ago • 1 comments

Closes #450, closes #456

When used with a strict Content-Security-Policy, browsers will refuse to render the svg as inline styles are used.

The following error will be seen in console

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-nonce_placeholder'". Either the 'unsafe-inline' keyword, a hash ('sha256-eV8Xu0oi/phHwwFa2aajf5nivMeGhgQRxQsJ/TFjv+k='), or a nonce ('nonce-...') is required to enable inline execution

This pull request moves the styles to a dynamically generated style tag and allows the nonce attribute be set to the nonce option value or attempts to get the nonce value from <meta property="csp-nonce" nonce="nonce_placeholder" />

This was tested using example/cspNonce.html. In an actual implementation the Content-Security-Policy header will be set by the server and the server will rewrite the nonce_placeholder value in the html file and not be set using meta http-equiv.

justin-tay avatar Jul 05 '25 15:07 justin-tay

I think the much simpler option would be to use SVG attributes. fill, transform, font-family, font-size etc are all available as SVG attributes. So there is no need for inline styles in the first place.

The thing that could get complicated is that there is no font shorthand attribute, so the font settings need to be parsed into individual components.

xi avatar Aug 19 '25 14:08 xi