Support for styling under strict Content-Security-Policy

[riovir]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• bug report
• feature request
• support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
A components currently rely on inline <style> tags. When Content-Security-Policy headers forbid unsafe-inline the styling breaks.

Expected behavior:
Any solution that allows strict CSP policies and well styled Stencil components to coexist.

One approach could be for Stencil to generate CSS files at compilation time to which <style> tags would refer.

Steps to reproduce:

1. Take any Stencil component with a styleUrl specifying some styles
2. Compile it and serve it with the following response header added: Content-Security-Policy = "style-src 'self' ;"
3. Notice that styles are broken due to the browser refusing to interpret them

Related code:

The following snippet spins up a proxy from port 5000 to 3333 banning inline style tags. (Assuming express and express-http-proxy are installed.)

const express = require('express');
const proxy = require('express-http-proxy');

const app = express();
app.use((req, res, next) => { res.set('Content-Security-Policy', "style-src 'self' ;"); next(); });
app.use('/', proxy('http://localhost:3333'));
app.listen(5000);

[peterpeterparker]

Couldn't that be solved by adding the sha value of the component in the CSP style-url list?

When I imported my component build with StencilJS in my Ionic project, I saw the CSP warning in the Chrome debugger, telling my to add unsafe-inline or to add the regarding 'sha256-xxxxx' value to the style-src of my CSP. I did added the sha value, restarted my project and the issue was solved.

[riovir]

Indeed adding the sha256 value provides a way to approach the problem. Unfortunately this angle is less than ideal in some scenarios:

• For each styled component on the page an individual hash needs to be added to the header
• These headers are often handled centrally by a proxy for multiple projects (as in our case) in order to enforce security across teams. This requires the careful management of multiple versions of each component in circulation.
• One needs to also take care that the amount of hashes stays in the sane realm. At around 50 items we start to near close to a rather large 4k header which can start causing problems on its own.

A special entry or two per Stencil component collection would be acceptable though as a workaround if CSS files are not an option.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!