title: "inline-style"-Error with Content Security Policy and Javascript
body: <p>I turned on Content Security Policy on my server with this command in my Apache2-configuration:</p>
  
  <pre><code>Header set Content-Security-Policy-Report-Only "default-src 'self'"
  </code></pre>
  
  <p>(I set it to <code>...-Report-Only</code> to only report errors, without really blocking something while developing.)</p>
  
  <p>This setting produces an error that I don't understand. But I can reproduce it:</p>
  
  <p>This is the simplified html-code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;script src="/js/test.js"&gt;&lt;/script&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you see, no inline-script and no inline-style (no style at all) and a completely empty body.</p>
  
  <p>And here is the Javascript-file test.js:</p>
  
  <pre><code>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 = '&lt;div id="original"&gt;&lt;/div&gt;&lt;div id="copy"&gt;&lt;/div&gt;';
      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;
  };
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <blockquote>
    <p>[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.<br>
    test.js:0</p>
  </blockquote>
  
  <p>(the reported line number "0" is obviously not correct)<br>
  This is what Opera and Chrome write to the console:</p>
  
  <blockquote>
    <p>[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.</p>
    
    <p>window.onload @ test.js:15</p>
  </blockquote>
  
  <p>(line 15 is the manipulation of innerHTML)</p>
  
  <p>This error appears only, when I set any style to a part of the document (<code>p1.style.color = "red";</code>) and then make a copy of a part that contains the styled part (<code>copy.innerHTML = original.innerHTML</code>).</p>
  
  <p>My questions:  </p>
  
  <ul>
  <li>Why does this error appear? (I want to understand why it reports "inline style" although there is no inline styling)   </li>
  <li>How can I avoid this error?</li>
  </ul>
  
  <p>I have no realistic chance to change the part where the original is manipulated. All I can change is this line:</p>
  
  <pre><code>document.getElementById('copy').innerHTML = document.getElementById('original').innerHTML;
  </code></pre>
  
  <hr>
  
  <h2>Addendum</h2>
  
  <p>Sorry, I wasn't clear enough about this:</p>
  
  <p>I do <strong>NOT</strong> want to change the CSP-Header. There is a good reason, why inline-style has to be forbidden. See <a href="https://stackoverflow.com/q/4546591/1302716">XSS attacks and style attributes</a> and similar Questions.</p>
  
  <p>I want:</p>
  
  <ol>
  <li>Understand why my JavaScript code produces an inline-style-error.  </li>
  <li>A script that doesn't produce such an error.</li>
  </ol>