在Google Chrome中调试CSP违规

Question

我在使用以下Content-Security-Policy HTTP标头时尝试使用TinyMCE:

X-WebKit-CSP: default-src 'self'; script-src 'self' 'unsafe-eval'; img-src *; media-src *; frame-src *; font-src *; style-src 'self' 'unsafe-inline'; report-uri /:reportcspviolation

我在工具 - JavaScript控制台中收到以下错误:

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 about:blank:1
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 test.xhtml:1
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 about:blank:1
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 test.xhtml:1

但是,它中没有可执行的JS代码,test.xhtml因为它只使用外部<script>来处理给定的CSP头.该参考about:blank也同样无效.

任何想法如何找出CSP违规的原因在哪里？

Chrome的内部JS调试器似乎无法确定源代码.

此外,出于某种原因,Chrome在工具 - 开发者工具 - 网络中将CSP违规报告显示为"待处理",但检查要发送的数据不会提供任何其他信息.例:

{"csp-report":{"document-uri":"about:blank","referrer":"url-of/test.xhtml","violated-directive":"script-src 'self' 'unsafe-eval'","original-policy":"default-src 'self'; script-src 'self' 'unsafe-eval'; img-src *; media-src *; frame-src *; font-src *; style-src 'self' 'unsafe-inline'; report-uri /:reportcspviolation"}}

我能够弄清楚错误消息是关于onclick在TinyMCE动态加载的某些HTML中使用eg 属性但是要查找哪个文件？另一个错误可能是TinyMCE HTML的一部分,其中一些href具有开始的价值,javascript:但如果没有Chrome的任何指示,也很难找到.整个设置适用于Firefox 13(使用相应的CSP标头).

有没有办法让Chrome为每个CSP违规抛出异常？

Answer 1

确保在您的网站上测试CSP时停用所有Chrome扩展程序 - 例如,AdBlock和PhotoZoom扩展程序都会将自己的内联样式添加到DOM中,从而触发违规行为(如果您启用了该功能,则会在后续命中报告中显示uri和其他扩展可能会做同样的事情.

Answer 2

这个特定问题的原因是 TinyMCE 为其编辑器的实现创建了一些隐藏的 iframe 元素。然后，TinyMCE 实现尝试使用onclick这些 iframe 元素之一中的内联属性来运行 JS，这显然由于 CSP 规则而失败。

一般来说，如果脚本生成一个新框架（例如about:blank），然后尝试在其中运行某些代码，则 Google Chrome 无法在控制台中或 CSP 报告 URL 中提供任何有意义的内容。你得到的只是about:blank:1.

这是因为 Google Chrome 不会保留有关内联属性来源的信息onclick。基本上，浏览器需要有关document.write()添加了行为不当onclick代码的代码的信息！我想对每个人都这样做document.write()对于运行时性能来说太昂贵了。我希望他们能够跟踪创建该特定 iframe 的代码位置，因为这可能有助于跟踪问题的根源。此外，当 TinyMCE 创建了多个不可见的 iframe 元素时，Google Chrome 无法将您指向正确的iframe，因为其中每个about:blank元素的 URL 都是在通过document.write().

现在，您可以添加'report-sample'内容Content-Security-Policy，这可能有助于追踪问题。有时，您可以从报告中获得的脚本示例中识别有问题的代码。