[Bug]: Inline styles blocked by CSP style-src header

[TannerS]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

^1.5.0

React version

v17

Description

Background

IBM console / cloud has started to implement the CSP header ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ). Part of that is it blocks inline styles,

<style>
// css here
<style>

will be blocked unless it has a nonce value passed in by the consumer

where

<div style=....></div>

will be blocked no matter what

this is problematic since all of ibm cloud ios moving to CSP, some inline styles (second example) will be blocked by CSP and break the component to some limit.

Here is some that I personally searched for and found in the carbon repo (click to expand)

DatePicker

with csp

without

This one for some reason doesnt give me a warning but if you look here theres a style property that gets added (i changed it to height to show an example)

but csp can affect browsers differently so it should be something to look into

SkeletonText / Slider / ProgressBar

These also have inline styles that may be blocked by csp so worth a look

Other

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Reproduction/example

N/A

Steps to reproduce

I am testing on my local microservice for ibm cloud with csp to verify

DatePicker

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

#12580 (comment)

[tay1orjones]

Thanks for opening this with so much detail!

To summarize the situation (let me know if I miss anything):

• When using a Content Security Policy (CSP) header with style-src directive, inline styles are blocked
• Allowing inline styles by providing a nonce is not an option because this method can only be applied to <script> or <style>, not style=""

On our end, one potential way to fix this would be to reduce the usage of inline styles within the components. Unfortunately, the examples you list above are almost all coming from third party flatpickr library. The likelyhood that we're able to completely fix this is low until we revisit datepicker altogether, #11967.

In the meantime, it seems a decent workaround to this problem altogether is using a hash to allow inline style attributes. It's safer than doing unsafe-inline and supported in all modern browsers. IIUC there's nothing that Carbon needs to do for this, you'd just need to add the CSP unsafe-hashes keyword to your style-src directive.

[TannerS]

Thanks for opening this with so much detail!

To summarize the situation (let me know if I miss anything):

* When using a Content Security Policy (CSP) header with [`style-src` directive](https://content-security-policy.com/style-src/), inline styles are blocked

* Allowing inline styles by [providing a `nonce`](https://content-security-policy.com/nonce/) is not an option because this method can only be applied to `<script>` or `<style>`, not `style=""`

On our end, one potential way to fix this would be to reduce the usage of inline styles within the components. Unfortunately, the examples you list above are almost all coming from third party flatpickr library. The likelyhood that we're able to completely fix this is low until we revisit datepicker altogether, #11967.

In the meantime, it seems a decent workaround to this problem altogether is using a hash to allow inline style attributes. It's safer than doing unsafe-inline and supported in all modern browsers. IIUC there's nothing that Carbon needs to do for this, you'd just need to add the CSP unsafe-hashes keyword to your style-src directive.

Sup man, so

When using a Content Security Policy (CSP) header with style-src directive, inline styles are blocked

I think inline styles are blocked no matter what directives are defined, as long as csp is turned on

Allowing inline styles by providing a nonce is not an option because this method can only be applied to <script> or <style>, not style=""

correct, but nonce and hashing has some limits, (see below)

In the meantime, it seems a decent workaround to this problem altogether is using a hash to allow inline style attributes. It's safer than doing unsafe-inline and supported in all modern browsers. IIUC there's nothing that Carbon needs to do for this, you'd just need to add the CSP unsafe-hashes keyword to your style-src directive.

if i remember correctly, we cannot do any unsafe-* for cloud or else we will get pinged to fix it. To also add, if u were to go the hash route (which means any changes will break the hash) the consuming site also has to add it to there csp policy

for example, most of console is using nonce, the consumer has to be able to generate it per request and attach it to all there stuff and add it to the policy

for hashes, if i remember correctly, you guys generate it but we have to add it for every single page that needs it csp policy which for most is a code change and any changes (or if they are generated differently) will break it

i think that works for inline styles, i am a bit rusy on hashing but know some teams have tried it

[TannerS]

@tay1orjones @tw15egan besides the above, found a related issue #12386

[tay1orjones]

we cannot do any unsafe-*

In that case, the workaround you'll need to explore is how to apply the required (inline) styles yourself via a class instead.

I think the primary things that can be tackled here are:

• Reduce the usage of inline styles within Carbon components
• Explore a fix or workaround for the inline styles applied by third party libraries
  • Styling is broken when using the style-src Content Security Policy (CSP) directive flatpickr/flatpickr#2823

PRs to help out would be much appreciated

[TannerS]

Got ya, if I figure out more or a better way to help I will let y'all know!

[tay1orjones]

I've added a task list to the issue body containing the components using inline styling. It includes a task to determine if we can reduce/remove inline styling stemming from third party libraries like flatpickr (there may be others - downshift?)

[tay1orjones]

This would improve the situation greatly, but there's been no movement -w3c/webappsec-csp#174

[TannerS]

The issue with this is all teams who use anything with unsafe have to get pce exception and get it fixed by a date

[tay1orjones]

Another way we could set styles dynamically would be to use CSSOM, which should be compatible with CSP.

Instead of rendering an inline style like this

<div id="test" style="left: 300px;"/>

we could instead set it imperatively via

document.getElementById('test').style.left = '300px';

[TannerS]

That may still trigger csp I think (think being the word) but diff will need to be tested Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Taylor Jones ***@***.***> Sent: Thursday, December 1, 2022 9:04:21 AM To: carbon-design-system/carbon ***@***.***> Cc: Tanner Summers ***@***.***>; Author ***@***.***> Subject: Re: [carbon-design-system/carbon] [Bug]: Inline styles blocked by CSP `style-src` header (Issue #12580) Another way we could set styles dynamically would be to use CSSOM, which should be compatible with CSP. Instead of rendering an inline style like this <div id="test" style="left: 300px;"/> we could instead set it imperatively via document.getElementById('test').style.left = '300px'; — Reply to this email directly, view it on GitHub<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F12580%23issuecomment-1334077662&data=05%7C01%7C%7C815d8a07d90c4780c47008dad3be1786%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638055110632849967%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=5OVnRYaIFWBLAkx5e1uIPN920N0HXbsueV502By%2FMas%3D&reserved=0>, or unsubscribe<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUDYJDNZWASICOQDXQYTWLDLBLANCNFSM6AAAAAAR2W26BQ&data=05%7C01%7C%7C815d8a07d90c4780c47008dad3be1786%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638055110632849967%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Ssa2L%2FZTP2Evs89vyZjX%2BvDQO%2FT8GWY7%2Fvc%2FUaGCULA%3D&reserved=0>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[andy-blum]

Hey there! checking in from the carbon-for-ibmdotcom side of things and CSSOM totally works.

Per MDN:

Inline style attributes are also blocked:

<div style="display:none">Foo</div>

As well as styles that are applied in JavaScript by setting the style attribute directly, or by setting cssText:

document.querySelector('div').setAttribute('style', 'display:none;');
document.querySelector('div').style.cssText = 'display:none;';

However, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript:

document.querySelector('div').style.display = 'none';

As an example, here's a quick codepen

[dabrad26]

Hi. Was wondering if the groups on this ticket had any luck with SVGs and their inline stuff for their products. We are running into issues with the pictograms. So wondering if your products found a work around. Happy to connect via slack as well ((at)david)

[tay1orjones]

@andy-blum or @TannerS have either of you encountered and had to resolve issues with SVGs or the pictograms and CSP?

[andy-blum]

Which styles specifically are in an inline attribue? Could you move them to their own specific attributes?

For example, instead of

<path 
  id="path14"
  style="fill:#354a8e;fill-opacity:1;fill-rule:nonzero;stroke:none"
  d="L 4424.6,237.121"
>

You could do

<path
  id="path14"
  fill="#354a8e"
  fill-opacity="1"
  fill-rule="nonzero"
  stroke="none"
  d="L 4424.6,237.121"
>

source

[dabrad26]

It seems to be however the SVG are made (some seem good. Some have issues). I assume most came from designers and just converted to react components.

Updating all to be attributed instead of inline would be the solution. But a bit of a painful one for migrating all the SVGs. So was just wondering if any better options appeared.

[andy-blum]

Not particularly. Inline styles are only allowable under a CSP if you know the exact markup beforehand and can pass a hash in with the CSP directive headers

[andy-blum]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#hash-algorithm-base64-value