个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在我的 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 的控制台中报告了这个错误:
[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 写入控制台的内容:
[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
(第15行是对innerHTML的操作)
只有当我为文档的一部分设置任何样式 (p1.style.color = "red";) 然后复制包含样式的部分时，才会出现此错误部分(copy.innerHTML = original.innerHTML)。
我的问题:
我没有现实的机会来改变原件被操纵的部分。我所能改变的就是这一行:
document.getElementById('copy').innerHTML = document.getElementById('original').innerHTML;
抱歉，我对此还不够清楚:
我不想更改 CSP-Header。有一个很好的理由，为什么必须禁止内联样式。参见 XSS attacks and style attributes和类似的问题。
我要:
最佳答案
因为您正在从 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 Documentation用于克隆节点。在 DOM 操作不可行的情况下，我的旧答案仍然有效。
根据MDN documentation在 CSP 上，您可以通过发送以下 header 来解决它:
style-src 'unsafe-inline' 'self'; default-src 'self';
这是 documentation对于默认源。
关于javascript - "inline-style"- 内容安全策略和 Javascript 出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42401952/
25
4
0
这两个文件之间的主要区别是什么:styles.xml (res\values\styles.xml) 和 styles.xml (res\values-v21\styles.xml ？ 针对旧的and
我正在尝试将按钮样式设置为看起来像我在 Android Full Width ICS style Minimalist Bottom ButtonsViews 中询问的那些按钮. 我已经成功了，有兴趣
只是想检查一下: 如果我有 Style.css 和 Style.min.css(在同一目录中)并且我的 html 页面引用了 Style.css，浏览器/服务器是否会下载 Style.min.css？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
从上面的问题，我认为这会相对容易，但我找不到任何关于如何向“样式”下拉菜单添加样式的文档。谁能把我推向正确的方向？ 最佳答案 样式下拉列表会根据主题的typography.css 文件中的类自动填充。
我有两种风格 还有这个 如果我尝试在这样的对象上使用第二个 编译器抛出这个错误: 错误 16 Style 对象不能影响它所应用的对象的 St
我想知道是否有关于在 Lisp 中使用标签的标准做法。我一直在弄乱这里第一个答案中描述的算法的 Lisp 实现 Generating permutations lazily我当前的版本使用标签来分解部
我想以编程方式获取样式为“ButtonBar”的 LinearLayout 的背景颜色。 我试过用LinearLayout的getBackgroundColor，没找到方法。 有人有想法吗？问候 最
我在扩展 javax.swing.text.DefaultStyledDocument 的类中遇到间歇性问题。该文档正在发送到打印机。大多数情况下，文档的格式看起来是正确的，但有时却并非如此。看起来格
我想将所有元素设为边框。我想这样做: * { box-sizing: border-box; } 如何使用 React 的内联样式做到这一点？我不想在每个组件中都写这个规则... 最佳答案 这是不
当我创建一个 Android 应用程序项目时，我在 (android:theme="@style/AppTheme") 上的 AndroidManifest.xml 中出现错误 找不到与给定名称匹配的
一种风格ol.layer.Vector可以设置为 ol.style.Style ，样式函数或 ol.style.Style 的数组.数组的用途和作用——与仅传递 ol.style.Style 相比目的
我的意思是内部风格 #div {color:red;} document.getElementsByTagName('style').innerHTML 不工作... document.style
http://synergine.net/rain.php 你好。我试图清除 .ripple div 中所有元素的样式属性，但没有成功: function contact(level){ focus_
我使用 vue 和 v-for 循环来创建跨度。以下是使用 bootstrap4 的背景颜色的一种样式的成功: {{ group }} export default {
有没有办法只存储元素的当前样式状态，这样我就可以搞砸样式然后再重置它？ 类似于(虽然这不起作用):http://jsfiddle.net/843Pj/ var el=document.getEleme
我正在尝试将 tinymce 配置为不允许在 style 属性中使用 css 样式。 我只想允许一种样式，即文本装饰。这是一个类似的问题 http://tinymce.moxiecode.com/pu
我对style.css做了一些修改，上传到网上。但是它没有显示我需要的结果。即它仍然采用旧的 style.css 代码。 我可以离线查看更改，但是当我给它完整的 href 链接时，它没有显示必要的结果
我添加到 web 文件夹下的样式文件夹似乎没有被我的 JSP 上的调度程序 servlet 映射。我明白了 WARN : org.springframework.web.servlet.PageNot
是否有任何用于 JQuery 数据表的 Metro Style CSS 样式插件？ 最佳答案 看看here 或者您可以自己创建一个。 Metro 风格很容易用 Segoe 字体复制 关于jquery
我是一名优秀的程序员,十分优秀！