Hub*_*ast 4 javascript content-security-policy
我在我的 Apache2 配置中使用以下命令打开了服务器上的内容安全策略：
Header set Content-Security-Policy-Report-Only "default-src 'self'"
（我将其设置...-Report-Only为仅报告错误，而不会在开发过程中真正阻止某些内容。）
此设置产生一个我不明白的错误。但我可以重现它：
这是简化的 html 代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="/js/test.js"></script>
<title>test</title>
</head>
<body></body>
</html>
如您所见，没有内联脚本和内联样式（根本没有样式）和一个完全空的主体。
这是 Javascript 文件 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 中。
我想我已经做得很好了，但是当我在浏览器中打开这个文档时，我在 Safari 的控制台中报告了这个错误：
[仅报告] 拒绝应用样式表，因为它的散列、随机数或“不安全内联”既没有出现在内容安全策略的 style-src 指令中，也没有出现在 default-src 指令中。
测试.js:0
（报告的行号“0”显然不正确）
这是 Opera 和 Chrome 写入控制台的内容：
[仅报告] 拒绝应用内联样式，因为它违反了以下内容安全策略指令：“default-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-ZBTj5RHLnrF+IxdRZM2RuLfjTJQXNSi7fLQHr09onfY='）或随机数（“nonce-...”）。还要注意 'style-src' 没有明确设置，所以 'default-src' 用作后备。
window.onload @ test.js:15
（第15行是对innerHTML的操作）
仅当我将任何样式设置为文档的一部分 ( p1.style.color = "red";) 然后复制包含样式部分 ( copy.innerHTML = original.innerHTML)的部分时，才会出现此错误。
我的问题：
我没有现实的机会来改变原作被操纵的部分。我所能改变的就是这一行：
document.getElementById('copy').innerHTML = document.getElementById('original').innerHTML;
抱歉，我对此不够清楚：
我不希望改变CSP-头。有一个很好的理由，为什么必须禁止内联样式。请参阅XSS 攻击和样式属性以及类似问题。
我想要：
因为您正在从 DOMElement 转换为文本（通过 innerHTML），所以任何具有修改样式的元素都会转换为内联样式。我已经包含了一个例子来说明这一点。
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 时，您将修改元素的样式包含为违反您的策略的内联样式。
从技术上讲，您可以制作 DOM 元素的副本，然后直接将其插入到 DOM 树中。为此，请查看克隆节点的MDN 文档。在 DOM 操作不可行的情况下，我的旧答案仍然有效。
根据CSP上的MDN 文档，您可以通过发送以下标头来解决它：
style-src 'unsafe-inline' 'self'; default-src 'self';
这是default-src的文档。
| 归档时间： |
|
| 查看次数： |
19012 次 |
| 最近记录： |