调试Google Chrome中的CSP违规

mctunoxg 于 2023-02-27 发布在 Go

关注(0)|答案(4)|浏览(335)

我正在尝试使用TinyMCE，同时使用以下内容安全策略HTTP标头：

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

但是，test.xhtml中没有可执行的JS代码，因为它只使用外部<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属性在一些HTML的TinyMCE加载的飞行，但什么文件要找？另一个错误可能是一个TinyMCE HTML的一些href有值开始javascript:，但这也是真的很难找到没有任何来自Chrome的指针.整个设置适用于Firefox 13（使用相应的CSP头）。

有没有办法让Chrome在每次违反CSP时抛出Exception？

google-chrome

来源：https://stackoverflow.com/questions/11360557/debugging-csp-violation-in-google-chrome

4条答案

按热度按时间

amrnrhlw1#

在您的网站上测试CSP时，请务必禁用所有Chrome扩展-例如，AdBlock和PhotoZoom扩展都会向DOM添加自己的内联样式，这会触发违规（如果您启用了该功能，则会触发report-uri，其他扩展可能也会这样做）。

赞(0）回复(0）举报 2023-02-27

b91juud32#

虽然这个问题已经很老了，但答案还是一样的，TinyMCE编写的默认代码并不是非csp兼容的。
Tinymce在添加dom的元素中插入内嵌css。它不一定要这样做，但这是他们编写的方式。如果你用google或firefox开发工具检查dom，你会发现这一点，这里有一个例子，可以在它插入的iframe中找到：

<body spellcheck="false" id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('story_story').fire('load');" contenteditable="true"><p><br></p></body>

浏览器会检测到这个错误，并在您的csp不允许的情况下生成一个违规报告。有两种方法可以消除这个错误：
1)添加'inline'或'unsafe-inline'到你的csp脚本源代码为该页
或
2)重新编码tinymce javascript文件。这需要你打开所有的javascript文件，修改它插入的代码以排除内联的js部分。然后这些脚本必须被放入脚本文件中，这些脚本文件被插入到dom中以使代码仍然工作。

赞(0）回复(0）举报 2023-02-27

crcmnpdw3#

这个问题的原因是TinyMCE为它的编辑器实现创建了一些隐藏的iframe元素。然后TinyMCE实现尝试在这些iframe元素中使用例如inline onclick属性来运行JS，由于CSP规则，这显然失败了。
一般来说，如果一个脚本生成了一个新的框架（例如about:blank），然后试图运行其中的一些代码，Google Chrome浏览器无法在Console中提供任何有意义的内容，也无法向CSP报告URL。
这是因为Google Chrome浏览器并不保留内嵌onclick属性的源代码信息。基本上浏览器需要关于document.write()添加了错误onclick代码的信息！我猜对每个document.write()都这样做对运行时性能来说太昂贵了。我希望他们能够跟踪创建特定iframe的代码位置，因为这可能有助于跟踪问题的根源。当TinyMCE创建了多个不可见的iframe元素时，Google Chrome无法将您指向 * 正确的 * iframe，因为在通过document.write()添加额外内容之前，其中每个元素的URL都是about:blank。
现在你可以把'report-sample'添加到Content-Security-Policy中，这可能会帮助你追踪问题。有时候你可以从报告中的脚本样本中识别出有问题的代码。