Tree control triggers errors with CSP

[erlmann]

I'm submitting a...

[X] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

When using the Tree control in an application that uses a CSP to prevent inline styles, the control is not rendered properly. Instead, an error is thrown by the browser.

I'm loading iX packages from jsdelivr.net but this should not matter here.

Used CSP: default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/ https://cdn.jsdelivr.net/npm/@siemens/ix-icons@1.0.1/

Result:

index-b22287de.js:1851 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/ https://cdn.jsdelivr.net/npm/@siemens/ix-icons@1.0.1/". Either the 'unsafe-inline' keyword, a hash ('sha256-GLukzbJb+343AxoPPmSUG9muH6KVcSXdsl2CYmNuf60='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
index-b22287de.js:281 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/ https://cdn.jsdelivr.net/npm/@siemens/ix-icons@1.0.1/". Either the 'unsafe-inline' keyword, a hash ('sha256-7KTFpKaPRr0pZYRiMZ7UmODdxF6/yNo6UzbJb7xKsW8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
index-b22287de.js:281 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/ https://cdn.jsdelivr.net/npm/@siemens/ix-icons@1.0.1/". Either the 'unsafe-inline' keyword, a hash ('sha256-ARw2ksOEHJc3LB5zw7fBmZuEilu+/CaS3Qrf42yhIyk='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
index-b22287de.js:281 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/ https://cdn.jsdelivr.net/npm/@siemens/ix-icons@1.0.1/". Either the 'unsafe-inline' keyword, a hash ('sha256-xyndwrFvdzkb8g9sql4DkkUU5udeqMiqXruuycpQGUw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

The behavior is not tied to my application of the Tree control. It could already be observed with the sample (https://ix.siemens.io/docs/controls/tree/) if the server would return a CSP.

Expected behavior

No errors should be generated.

Minimal reproduction of the problem with instructions

• configure a server to return a CSP as described above
• use the Tree control

EDIT

I have set up a repo holding a sample project: https://github.com/erlmann/repro-siemens-ix-171

git clone https://github.com/erlmann/repro-siemens-ix-171
cd repro-siemens-ix-171
python3 server.py

Then, browse to http://localhost:8080/index.html to see the issue.

What is the motivation / use case for changing the behavior?

Use of a CSP is a common security requirement.

[danielleroux]

@erlmann

You can take a look into this example file i configured a csp header with jsDelivr seems to work.
https://codesandbox.io/s/vigilant-tristan-qc3jmq?file=/index.html:16-211

Also checked your repo. Maybe you configured your csp header wrong? If i check the documentation here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources
only origins or direct file path allowed as source.

//EDIT

Looks like a kind of URL Schema is also allowed, but i'm not such an expert in CSP headers to be honest

[erlmann]

@danielleroux thanks for looking into this.

Your example only works because it contains the style-src 'unsafe-inline' directive which makes the whole CSP pointless: https://stackoverflow.com/q/30653698.

Once you remove it, you'll see the errors also there. Check my fork: https://codesandbox.io/s/suspicious-lamport-b3dvy4

The layout is broken there too

EDIT

https://content-security-policy.com/unsafe-inline/ provides more information about unsafe-inline. The referenced one use case where unsafe-inline might be okay (in combination with strict-dynamic) also does not help in this case.

[danielleroux]

@erlmann

I dont see point here.

If you trust an cdn provider you can never be "safe" nobody have control over this server. If someone replace the source files on the cdn you are in a trust enviroment and the scripts are also executed with the malicious code.

If you have problem with trust i recommand to host your 3rd party dependency on your own server

Possible nonce support: ionic-team/stencil#3823

Fix for your probleme could be use sha: ionic-team/stencil#496 (comment)

[erlmann]

If you trust an cdn provider you can never be "safe" nobody have control over this server. If someone replace the source files on the cdn you are in a trust enviroment and the scripts are also executed with the malicious code.

If you have problem with trust i recommand to host your 3rd party dependency on your own server

@danielleroux I'm sorry if I caused confusion with mentioning the CDN setup at all. And this is also not the problem here as the CDN is explicitly trusted (default-src 'self' https://cdn.jsdelivr.net/npm/@siemens/ix@1.1.0/).

The CSP shall (amongst others) protect against injection attacks. You tell the browser "I don't have any inline styles in my pages and only load them from these well-defined servers". If an attacker is able to inject inline styles (or inline JavaScript) to your application (or links to other styles/scripts), browsers can block this because we informed them that we don't have any inline styles at all.

The locations where the browser complains about are setting styles via JavaScript which is apparently considered an inline style because they work like:

• create a <style> element in JS
• populate it
• add it to the DOM

[erlmann]

ionic-team/stencil#3823

Yes, this might help. Browsing through the Stencil issues, I found ionic-team/stencil#3203 which also reads like my issue...

[danielleroux]

@erlmann Maybe i can try to create sha checksums for each inline style this can be used as trusted csp entry then. This will one approche until the pr ionic-team/stencil#3823 is merged and release.

[erlmann]

Maybe i can try to create sha checksums for each inline style this can be used as trusted csp entry then.

@danielleroux Yes, adding the checksums to the CSP shall serve as workaround. I'll go for this and add the four checksums reported by the browser to my CSP, knowing that this will break as soon as a single character in the styles is changed 😅.

[danielleroux]

@erlmann No don't do this manually 😊 I will try to integrate a script in our build process which will generate a sha map or something like that.
Or i can check the feature from pr and try to integrate it locally in our build process.

[danielleroux]

Looks like stencil have released some CSP support. We will check this during the development release.

StencilJS CSP nonce support

[danielleroux]

Feature is available only in stencil v3.0.0. Due to internal planning moved to next release (#327 )