“内联样式”-内容安全策略和Javascript错误 [英] "inline-style"-Error with Content Security Policy and Javascript
问题描述
我在Apache2配置中使用以下命令打开了服务器上的内容安全策略：
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:
这是简化的html代码：
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.
这是Javascript文件test.js：
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;
};
此脚本在主体中添加两个div，并在其中一个div中插入带有文本的段落。然后，它将文本的颜色更改为红色。最后，它会复制此div的内容，并将此副本插入另一个div。
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.
我认为我做得很好，但是当我打开时在我的浏览器中找到此文档后，我在Safari的控制台中收到此错误消息：
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:
[仅报告]拒绝应用样式表，因为其哈希，随机数或不安全内联都不会出现在内容安全策略的style-src指令或default-src指令中。
test.js：0
[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
（报告的行号 0显然不正确）
这是Opera和Chrome写入控制台的内容：
(the reported line number "0" is obviously not correct)
This is what Opera and Chrome write to the console:
[仅报告]拒绝应用内联样式，因为它违反了以下内容安全策略指令： default-src'self'。要启用内联执行，要么使用 unsafe-inline关键字，要么使用哈希（ sha256-ZBTj5RHLnrF + IxdRZM2RuLfjTJQXNSi7fLQHr09onfY =），或者使用随机数（ nonce -...）。还要注意，没有显式设置'style-src'，因此将'default-src'用作后备。
[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
window.onload @ test.js:15
（第15行是对innerHTML的操作）
(line 15 is the manipulation of innerHTML)
仅出现此错误，当我为文档的一部分设置任何样式时（ p1.style.color = red; ），然后制作包含样式部分的零件的副本（ copy.innerHTML = original.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).
我的问题：
- 为什么会出现此错误？ （我想了解为什么它没有内联样式，但为什么会报告内联样式）
- 如何避免此错误？
我没有任何实际机会来更改操纵原稿的部分。我只能更改以下行：
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:
我不要更改CSP标头。有一个很好的理由，为什么必须禁止内联样式。请参阅 XSS攻击和样式属性以及类似的问题。
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想要：
- 了解为什么我的JavaScript代码会产生内联样式错误。
- 一个不会产生此类错误的脚本。
- Understand why my JavaScript code produces an inline-style-error.
- A script that doesn't produce such an error.
推荐答案
已更新：
因为您是从DOMElement转换为文本（通过innerHTML），所以任何具有修改样式的元素都将转换为嵌入式样式。我提供了一个示例来说明这一点。
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>
因此，何时您设置了副本的innerHTML，其中包括将元素修改为违反您的政策的内联样式的样式。
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.
从技术上讲，您可以制作DOM元素的副本，并将其直接插入DOM树。为此，请查看 MDN文档用于克隆节点。在DOM操作不可行的情况下，我的旧答案仍然有效。
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.
根据 MDN文档通过发送以下标头：
According to the MDN documentation on CSP you can solve it by sending the following header:
style-src 'unsafe-inline' 'self'; default-src 'self';
这是文档（用于默认src）。
Here is the documentation for default-src.
这篇关于“内联样式”-内容安全策略和Javascript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
