Is the style-src CSP directive disregarded by browsers when styling attributes are applied from React?

When setting the content security policy directive 

style-src 'self' 'nonce-{NONCE_GOES_HERE}
for my web app, I expected that inline styles added using the style attribute would not be applied. However, despite receiving error messages about CSP violations for each inline style, the styles are still being applied.

This same issue occurs when using the style-src-attr directive in recent versions of Chrome, Firefox, Edge, and Safari. Is this behavior expected? If so, is it documented anywhere (considering the CSP spec indicates otherwise)?

UPDATE: This problem is reproducible in React. The directives work as intended with plain HTML+CSS. Here are some examples:

To reproduce the issue:

  • Create a React app that contains a component with a style property.
  • The <head> of the webpage should include a <meta> tag with a CSP that does not allow inline styles (unsafe-inline). For example:
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-bm9uY2U='" />

<meta http-equiv="Content-Security-Policy" content="style-src-attr 'none'" />
htmlcssreactjscontent-security-policy

Answer №1

It appears that React can achieve this because it utilizes CSSOM (for example, setting styles like 

document.getElementById('id').style.background = 'red'
). Surprisingly, this method does not violate CSP directives that prohibit inline styles.

https://bugs.chromium.org/p/chromium/issues/detail?id=336413

https://github.com/mdn/content/issues/11697

According to https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

Nevertheless, properties set directly on the element's style property will remain unblocked, allowing users to manipulate styles safely through JavaScript

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing a variable outside of the function call in AngularJS is not possible

After starting to tackle AngularJS, I've encountered an issue that's been plaguing me. It seems like I'm unable to access the data returned by $http.get() outside of the method call. Here's a look at the code snippet: (function(){ ...

javascripthtmlangularjs

Looks like there's an issue with using the `map` function on the `data` variable. It seems to be an array,

Using Django rest to transmit data to react: [ { "id": 1, "username": "Dewalian", "question": [ { "id": 5, "title": "how to cook?" }, ...

jsonreactjsdjangodjango-rest-framework

Implement an input field using MUI 5 that accepts numerical values with precision up to two decimal

My requirements are as follows: The input field should only allow 0 to 9 and a decimal point. The input should not start or end with the decimal point; it must be in the middle. After the decimal point, there should only be two digits. I have created a r ...

reactjsmaterial-ui

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

When checking the network debugger in the PHP file, it displays {message: "Success", data: {Name: "admin"}}. However, there seems to be an issue with the AJAX callback. Can someone help me troubleshoot this problem that has been bothering me for a while? T ...

phphtmljsonajax

Modify a specific object property within an array in the state

Currently, I am in the process of updating my code, and you can find it here: https://repl.it/@colegonzales1/HeftyJoyfulAbilities I have been working on getting my handleToggle function to work correctly. At the moment, it is blank as I am experimenting w ...

arraysreactjsobjectnestedstate

HTML - Is there a way to hide the label showing the number of files selected when using input type=file?

I am seeking a way to either eliminate the label that indicates the number of selected files, or be able to control it so that when I upload a file, the label increases and decreases when I delete an uploaded file. How can I achieve this? Below is my HTML ...

jqueryhtmlasp.net-mvcfile-upload

Is there a way to make a string evaluate inline using JavaScript and React?

In my function, the following code works perfectly: console.log(theme.colors.blues[1]); To make the last part dynamic, I tried the following approach: const getColor = (theme, passedColorProp) => { console.log(theme.colors.[passedColorProp]); }; g ...

javascriptreactjs

Disabling hover effects in Chart.js: A step-by-step guide

Is there a way to disable hover effects, hover options, and hover links on a chart using chart.js? Here is the code I have for setting up a pie chart: HTML.. <div id="canvas-holder" style="width:90%;"> <canvas id="chart-area" /> </div ...

javascriptjqueryhtmlchart.js

Error: React map is failing to display correctly

I'm struggling to display my Google Maps on the screen. Even after referring to this question, I still can't solve my issue. Here is what I have: import React from 'react' import GoogleMap from 'google-map-react'; import wit ...

javascriptcssreactjsgoogle-maps-api-3

Implementing a JQuery script that triggers every time there is a change in the scroll

This script creates a shrinking effect on a box followed by a fade-in/out transition when the scroll position changes. However, the issue is that it triggers every time there is a scroll position change. For example, if the scroll position is at 100px and ...

jqueryhtmlcss

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Suppose I have an HTML structure like this and I need to create a button for scrolling using scrollTo. However, I've come across the information that scrollTo doesn't work well with height: 100vh and overflow: auto. What would be the best way to ...

javascripthtmlcssreactjs

Reveal Content once you give us a thumbs up on Facebook

Is there HTML/PHP code that can display specific content only after a user clicks the "Like" button on an external website, not an app? ...

phphtmlfacebookfacebook-like

Encountering an Npm error when trying to build a new project, with only moment.js included as an additional

Encountered a perplexing issue while updating my React application hosted by Nginx in a docker container. The error during npm install has me stumped, unable to pinpoint the root cause. The docker file I'm using is quite straightforward; FROM node:12 ...

node.jsreactjsdockernginxnpm

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

phphtmlimageblobecho

Introducing Block Insert feature in React Draft-js - a powerful

How the Process Works: Upon hitting the spacebar, the Draft-JS editor queries the text content for a specific word. Subsequently, all instances of that word are enveloped in tags. The HTML is then converted back and the state of the Draft-JS editor is upd ...

javascriptreactjsreact-nativefrontenddraftjs

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

javascriptjqueryhtmlcss

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

csstypescriptangularcomponentsrelative-path

A guide on revealing the Inspect tab in Figma

I accessed a figma layout. enter image description here However, the Inspect tab is missing on the right side of the Design and Prototype tabs. How can I make it visible? I am in need of assistance with the Figma interface. Additional content... ...

csswebinterfacefigma

Fetching data from local JSON file is being initiated twice

I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...

javascripthtmljson