CSP Policy required for CSS in JS / Styled components - Please document & create guideline

sebastian-long-chasm · November 8, 2022, 7:26am

With the update to A12 2022-06 & the migration to styled components several projects where faced with the following issue when deploying on secured environments:

If a ContentSecurityPolicy is used, the shift to Styled components requires the CSP to allow inline styles. Otherwise the BAP Client won’t run in the dedicated environments and break with an error.

github.com/styled-components/styled-components

Add webpacknonce to style tags

opened 09:16AM - 08 Jun 17 UTC

closed 05:41PM - 23 Jul 17 UTC

johannesnagl

enhancement ✨ help wanted 🆘

I already had a brief talk with @mxstbr about this a couple of weeks ago: https:…//twitter.com/mxstbr/status/824626370760364032 When trying to enforce strict rules about which content is allowed on a specific page, a Content Security Policy (CSP) is the way to go. Styled-Components currently put all of their Styles as an inline style to the DOM. Therefore, a CSP would need to contain: style-src `unsafe-inline`. As the name already puts: This is unsafe and not the recommended way of securing your app. Luckily, there is the concept of `nonce` attributes. Style/Script tags with a whitelisted `nonce` can be specified in the CSP. If Styled-Components would set this `nonce`, we could get rid of the `unsafe-inline` setting. Luckily, WebPack is already supporting the concept of a global `__webpack_nonce__` variable. Once set, all dynamically injected code created by WebPack will have a nonce attribute with the correct value. What needs Styled-Components to do? If the __webpack_nonce__ variable is set, pass the value to every generated style tag inside the `nonce` attribute of the `style` tag. Unluckily, the `__webpack_nonce__` is not well documented and kind of a `myth`. See Google https://www.google.at/search?q=webpack_nonce__&oq=webpack_nonce__&aqs=chrome..69i57.4663j0j7&sourceid=chrome&ie=UTF-8#q=__webpack_nonce__ and GitHub: https://github.com/webpack/webpack/search?utf8=%E2%9C%93&q=__webpack_nonce__&type= Further readings: - https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP - https://developers.google.com/web/fundamentals/security/csp/ - https://csp.withgoogle.com/docs/index.html

The current “shortcut” used by the projects I mentioned was to set the CSP directive ‘style-src’ to 'unsafe-inline` which is only a quick workaround - We need a general solution (using nonce) that should be added to the A12 documentation in order to prepare and give guidance to upcoming projects.

Currently the requirement for the CSP cannot be found in the A12 documentation / migration notes

markus-agile-fog · November 8, 2022, 9:00am

Hi @ mgm_sadam,

thanks for pointing on that issue. Please keep in mind that a12 discourse is meant as platform for problem specific exchange. If you think you have found an issue or a gap in a12 please create an a12 ticket for that.

For CSP problem i already created the ticket body in A12-13965. I will continue to file the details but please feel free to extend the ticket with anything in interest for you or your project.

thanks in advance

markus-agile-fog · December 15, 2022, 8:07am

A short update on this topic for the community.

Research is still in progress.

Company internal research concluded that it should be enough to whitelist the hash of the empty style tag created by styled components.

Empty style tag:

<style data-styled="active" data-styled-version="5.3.6"></style>

Has sha265 hash of:
47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=

CSP whitelist:
Content-Security-Policy: style-src 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='

The hash calculation and CSP validation is only done when loading the page. Dynamically changed CSS does not change the hash and therefore does not interfere with the CSP. The styled-components CSS is only affecting the CSS Object Model (CSSOM).

From security point of view, having the hash of an empty style tag whitelisted in the CSP is not an issue.

It was verified that it is working on Chrome, Edge, Firefox on Windows, Chrome on Android, and Safari on macOS.

Many thanks to @foued-soft-queue and @mschoene for sharing these information

nghia-fierce-willow · February 6, 2023, 3:56pm

The solution by whitelisting the Empty styled tag is not sufficient for us. It works properly on Safari 16 and on Chrome, Firefox. But we still face the issue on Safari mobile - iOS 14.4 and Safari version 15 on MacOS (Catalina) (I don’t have a chance to test older versions)

After investigating on the issue, we can whitelist a style tag with content inside but not the empty tag.

Style tag with content - WORK

<html>
<head>
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self';style-src 'self' 'sha256-jDo+QD06Tnwt1H2gPAcbhCq4oDei2gi5Q51YLOG19QA='; media-src 'self'; img-src 'self' data: blob:; connect-src 'self' blob:; object-src 'self' blob: ; form-action 'self' ; font-src data: 'self'">
</head>
<style>
    .red { color:red; }
</style>
<body>
<div id="root"></div>
</body>
</html>

The empty style tag - DOESN’T WORK

<html>
<head>
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self';style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='; media-src 'self'; img-src 'self' data: blob:; connect-src 'self' blob:; object-src 'self' blob: ; form-action 'self' ; font-src data: 'self'">
</head>
<style></style>
<body>
<div id="root"></div>
</body>
</html>

markus-agile-fog · March 27, 2023, 1:28pm

hi @nghia-fierce-willow,

I recently read that article Can you get pwned with CSS? and wonder based on its information if it will be enough for your project to set the style-src to unsafe-inline.
Since the issues with older versions of safari regarding the hashing of empty tags will not be resolved (at least in near future) i guess this could be a valid idea.