javascript 在 Google Chrome 中调试 CSP 违规
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11360557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging CSP violation in Google Chrome
提问by Mikko Rantalainen
I'm trying to use TinyMCE while using following Content-Security-Policy HTTP header:
我在使用以下 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
I get following errors in Tools - JavaScript Console:
我在工具 - 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
However, there's no executable JS code in the test.xhtmlbecause it only uses external <script>to work with CSP header given. The reference to about:blankis also similarly invalid.
但是，其中没有可执行的 JS 代码，test.xhtml因为它仅使用外部<script>来处理给定的 CSP 标头。对 的引用about:blank也同样无效。
Any ideas how to figure out where the cause for the CSP violation is?
任何想法如何找出违反 CSP 的原因？
It seems that Chrome's internal JS debugger does not identify the source.
Chrome 的内部 JS 调试器似乎无法识别来源。
In addition, for some reason, Chrome shows CSP violation reports as "Pending" in Tools - Developer Tools - Network but inspecting the data-to-be-send does not give any additional info. Example:
此外，出于某种原因，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"}}
I'm able to figure out that the error messages are about using e.g. onclickattribute in some piece of HTML that TinyMCE loads on the fly but what file to look for? Another error is probably a piece of TinyMCE HTML where some hrefhas value that starts with javascript:but that too is really hard to find without any pointers from the Chrome. The whole setup works with Firefox 13 (using corresponding CSP header).
我能够弄清楚错误消息是关于onclick在 TinyMCE 动态加载的某些 HTML 片段中使用 eg属性，但要查找什么文件？另一个错误可能是一段 TinyMCE HTML，其中一些href具有以 开头的值，javascript:但如果没有来自 Chrome 的任何指针，也很难找到。整个设置适用于 Firefox 13（使用相应的 CSP 标头）。
Is there any way to make Chrome throw Exception for every CSP violation?
有什么方法可以让 Chrome 在每次违反 CSP 时抛出异常？
采纳答案by Mikko Rantalainen
If a script generates a new frame (e.g. about:blank) and then tries to run some code within it, Google Chrome cannot provide anything meaningful in Console nor to CSP resport URL. All you get is about:blank:1.
如果脚本生成一个新框架（例如about:blank），然后尝试在其中运行一些代码，则 Google Chrome 无法在控制台或 CSP 报告 URL 中提供任何有意义的内容。你得到的只是about:blank:1。
回答by GaryJ
Be sure to disable all Chrome Extensions when testing the CSP on your site - AdBlock and PhotoZoom extensions, for instance, both add their own inline styles to the DOM which trigger a violation (and subsequent hit to report-uri if you have that feature enabled, and others extensions likely do the same.
在您的站点上测试 CSP 时，请务必禁用所有 Chrome 扩展程序 - 例如，AdBlock 和 PhotoZoom 扩展程序都将它们自己的内联样式添加到触发违规的 DOM 中（如果您启用了该功能，则随后点击 report-uri , 和其他扩展可能会做同样的事情。
回答by ABrowne
Although this question is old, the answer is still the same. The default code written by TinyMCE is not non-csp compliant.
虽然这个问题很老了，但答案还是一样的。TinyMCE 编写的默认代码不是非 csp 兼容的。
Tinymce inserts inline css into the elements it adds the dom. It doesn't have to be this way, but it is the way they have written it. You can see it if you inspect the dom with with google or firefox dev tools, here is one example that can be found within the iframe it inserts:
Tinymce 将内联 css 插入到它添加 dom 的元素中。不一定非要这样，但他们就是这样写的。如果您使用 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>
The browser detects this and raises a violation report as your csp does not allow this. There are two ways to make this error disappear:
浏览器检测到这一点并引发违规报告，因为您的 csp 不允许这样做。有两种方法可以使此错误消失：
1) add 'inline' or 'unsafe-inline' to your csp script-src for that page
1) 将 'inline' 或 'unsafe-inline' 添加到该页面的 csp script-src
or
或者
2) recode the tinymce javascript files. This would require you to open all the javascript files are change the code it inserts to exclude the inline js parts. These scripts would then have to be placed into script files which are inserted into the dom to enable the code to still work.
2）重新编码tinymce javascript文件。这将要求您打开所有 javascript 文件并更改它插入的代码以排除内联 js 部分。然后必须将这些脚本放入插入到 dom 中的脚本文件中，以使代码仍然可以工作。
回答by Eraden
If TinyMCE iframe domain and the domain of your site differ not have access to the iframe through javascript and get an error message in the console. No header will not help you in this situation. Does the iframe and addresses are in the same domain?
如果 TinyMCE iframe 域和您站点的域不同，则无法通过 javascript 访问 iframe 并在控制台中收到错误消息。在这种情况下，没有标题对您没有帮助。iframe 和地址是否在同一个域中？
