Skip to content

Conversation

@justin-tay
Copy link

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.

svg.setAttribute("style", "transform: translate(0,0)");
if (this.options.xmlDocument) {
svg.setAttribute("style", "transform: translate(0,0)");
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this even exist? translate(0,0) does nothing, or am I missing something?

@xi
Copy link

xi commented Aug 19, 2025

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 xi mentioned this pull request Aug 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JsBarcode with secure style-src directive

2 participants