bug: Inline style without nonce is blocked by Firefox

[kliehm]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.12.1

Current Behavior

If you bundle a web component, inline style tags are written. Firefox blocks the CSS because of the CSP and missing nonce attribute. Chrome still renders the CSS.

Expected Behavior

Inline style elements have a nonce attribute.

Steps to Reproduce

Open a component in Firefox.

Code Reproduction URL

n/a

Additional Information

There is an issue from 2019 requesting this a feature, but it should be classified as a bug with high severity. Stencil cannot be used in a productive environment.

[rwaskiewicz]

@kliehm I had asked about an example in #1392 (Edit: #2996 is what I meant) before seeing this issue (Sorry!). Can you please provide a minimal reproduction case for the team so that we may take a look?

[dellfort]

This issue was reported several times now. First time as it seems in 2018
#496
There was a detailled code example how to start a local express server with csp settings that reproduce that behaviour.
Serve any stencil component with styles from this server and you can see the browser errros in console.log and see that the styles are not applied due to security restrictions.

The only solution as of now is to fork stencil core extend every occurrence (6 in total) of 'const styleEl = this.doc.createElement('style');' with

const cspNonce = document.querySelector("meta[property='csp-nonce']");
    if (cspNonce instanceof HTMLMetaElement) {
      styleEl.setAttribute("nonce", cspNonce.content);
    }

additinally in vdoc/set-accessor.ts l. 115

if (memberName === 'innerHTML') {
                const cspNonce = document.querySelector("meta[property='csp-nonce']");
                if (cspNonce instanceof HTMLMetaElement) {
                  n = (n as String).replaceAll('<style>', '<style nonce="' + cspNonce.content + '">');
                }
              }

and in vdoc/vdo-render.ts l. 203

if (childNode instanceof HTMLStyleElement) {
          const cspNonce = document.querySelector("meta[property='csp-nonce']");
          if (cspNonce instanceof HTMLMetaElement) {
            childNode.setAttribute("nonce", cspNonce.content);
          }
        }

A solution would be to introdue a new property in stencil.config.ts like 'styleNonce' and make those additions to the code conditional to this property. Since there are only additions and no changes, there should be no problems.

[rwaskiewicz]

Hey @dellfort 👋

In #3203 (comment), I had asked for a minimal reproduction case with the latest version of Stencil for the team to pull down and take a look. If you'd be willing to provide one, that would certainly help move issues like these along!

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[dellfort]

Please see following example wich reproduces the behavior:
https://github.com/dellfort/stencil-component-starter

npm i
npm start

launches a express server with strict csp settings in addition to built in server.

open in chrome, firefox or safari:
http://localhost:3333/
index.html and web-components are served without strict csp
you see a 20px red border

now open in chrome, firefox or safari:
go to http://localhost:5000/
you see no red border, but you see the errors in the developer console:

​ Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-imoMl/F66ZbGZfn+J0jtlxdZvr/1ZBs+8ReasI4LBKQ='), or a nonce ('nonce-...') is required to enable inline execution.

[bjankord]

@rwaskiewicz Having the ability to set a nonce on the generated style elements would be ideal. We are currently relying on using unsafe-inline in our CSP style-src config, but from a security perspective, I would like to move away from needing to use the unsafe-line option.

I like the idea of setting a global value on the window for the nonce that Stencil could then use when it generated styles and or script tags dynamically. Another option could be a meta tag in the head that stencil could use. And then in the stencil config have the option to set what global value on the window to look for to get the nonce.

[rwaskiewicz]

Initial support for CSP Nonces have been added in today's release of Stencil 2.22.1, with our official guidance on nonce usage with Stencil published here. As a result, I'm going to close this issue. Should anyone run into any issues with the feature, please feel free to open a new issue. Thanks!