"inline-style"-Error with Content Security Policy and Javascript

Question

I turned on Content Security Policy on my server with this command in my Apache2-configuration:

Header set Content-Security-Policy-Report-Only "default-src 'self'"

(I set it to ...-Report-Only to only report errors, without really blocking something while developing.)

This setting produces an error that I don't understand. But I can reproduce it:

This is the simplified html-code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <script src="/js/test.js"></script>
        <title>test</title>
    </head>
    <body></body>
</html>

As you see, no inline-script and no inline-style (no style at all) and a completely empty body.

And here is the Javascript-file test.js:

window.onload = function () {
    //create a paragraph with a red text to have some content
    //in my "real" problem, this part is very much code (more than 1000 lines) 
    document.body.innerHTML = '<div id="original"></div><div id="copy"></div>';
    var p1 = document.createElement('p');
    var t1 = document.createTextNode('some text');
    p1.appendChild(t1);
    document.getElementById('original').appendChild(p1);
    //set some style within this content
    p1.style.color = "red";

    //-----------------------------------

    //make a copy of this content
    document.getElementById('copy').innerHTML = document.getElementById('original').innerHTML;
};

This script adds two div's to the body, and inserts a paragraph with a text into one of the divs. Then it changes the color of the text to red. At the end it makes a copy of the content of this div and insert this copy into the other div.

I think I've done all right, but when I open this document in my browser, I get this error reported in the console of Safari:

[Report Only] Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy.
test.js:0

(the reported line number "0" is obviously not correct)
This is what Opera and Chrome write to the console:

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ZBTj5RHLnrF+IxdRZM2RuLfjTJQXNSi7fLQHr09onfY='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

window.onload @ test.js:15

(line 15 is the manipulation of innerHTML)

This error appears only, when I set any style to a part of the document (p1.style.color = "red";) and then make a copy of a part that contains the styled part (copy.innerHTML = original.innerHTML).

My questions:

Why does this error appear? (I want to understand why it reports "inline style" although there is no inline styling)
How can I avoid this error?

I have no realistic chance to change the part where the original is manipulated. All I can change is this line:

document.getElementById('copy').innerHTML = document.getElementById('original').innerHTML;

Addendum

Sorry, I wasn't clear enough about this:

I do NOT want to change the CSP-Header. There is a good reason, why inline-style has to be forbidden. See XSS attacks and style attributes and similar Questions.

I want:

Understand why my JavaScript code produces an inline-style-error.
A script that doesn't produce such an error.

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

Updated:

Because you are converting from a DOMElement to text(via innerHTML) any elements with modified styles get converted into inline styles. I've included an example to illustrate this.

var el = document.getElementById('sample'), 
output = document.getElementById('output'),
affect = document.getElementById('affected');

affect.style.backgroundColor = "#369";
affect.style.color = "#FFF";

output.innerText+=el.innerHTML;

#sample {
  margin:10px;
}

#output {
  margin: 10px;
}

<div id="sample">
  <div id="affected">
  Sample DIV
  </div>
</div>
<div id="output">
  Output: 
</div>

Therefore when you set the innerHTML of the copy, you are including the styles that had modified the element as inline styles which violates your policy.

You could technically make a duplicate copy of the DOM element instead, and insert it to the DOM tree directly. For that, take a look at the MDN Documentation for Cloning Nodes. My old answer is still valid in the case the DOM manipulation is not viable.

Old Answer:

According to the MDN documentation on CSP you can solve it by sending the following header:

style-src 'unsafe-inline' 'self'; default-src 'self';

Here is the documentation for default-src.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 22 '17 at 21:06

MiltoxBeyond

2,683
1
13
12

I don't want so allow unsafe-inline. There is a good reason why this should be forbidden. I don't want to change the header. I want two things: 1. understand why an unsafe inline styling is reported, when there is no inline styling anywhere. And 2. I want write a javascript, that doesn't produce this error. – Hubert Schölnast Feb 23 '17 at 14:28
The documentation says that the act of setting the javascript style values is equivalent to inline styling. That is why it shows up. To avoid that I supposse you can define the classes in a stylesheet and instead of changing styles dynamically you can add or remove css classes. – MiltoxBeyond Feb 23 '17 at 16:23
No. `p1.style.color = "red";` is setting a style value by javascript, but this does not cause any error. Without the line `copy.innerHTML = original.innerHTML` everything is fine. – Hubert Schölnast Feb 23 '17 at 17:37
1

Yes. In order to recreate the element once you set copy.innerHTML it has to copy the styles as an inline-style since it converts first to text then back from text. You could technically make a duplicate copy of the DOM element instead, and insert it to the DOM tree directly. – MiltoxBeyond Feb 23 '17 at 20:13
Thats it, this is what I wanted to know and what I asked for. Please delete your old answer and instead post your last comment as an answer. – Hubert Schölnast Feb 23 '17 at 21:03

"inline-style"-Error with Content Security Policy and Javascript

Addendum

1 Answers1

Updated:

Old Answer:

Linked