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

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

https://github.com/carbon-design-system/carbon/issues/12580#tasklist-block-a9785d44-ab13-438b-8bb3-d2ba230a2a72

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17 (17 by maintainers)

Most upvoted comments

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

andy-blum on Dec 1, 2022