[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

[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

[TannerS]

That may still trigger csp I think (think being the word) but diff will need to be tested

Get Outlook for Androidhttps://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 GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F12580%23issuecomment-1334077662&data=05|01||815d8a07d90c4780c47008dad3be1786|84df9e7fe9f640afb435aaaaaaaaaaaa|1|0|638055110632849967|Unknown|TWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D|3000|||&sdata=5OVnRYaIFWBLAkx5e1uIPN920N0HXbsueV502By%2FMas%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUDYJDNZWASICOQDXQYTWLDLBLANCNFSM6AAAAAAR2W26BQ&data=05|01||815d8a07d90c4780c47008dad3be1786|84df9e7fe9f640afb435aaaaaaaaaaaa|1|0|638055110632849967|Unknown|TWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D|3000|||&sdata=Ssa2L%2FZTP2Evs89vyZjX%2BvDQO%2FT8GWY7%2Fvc%2FUaGCULA%3D&reserved=0. You are receiving this because you authored the thread.Message ID: @.***>