如何检查通过内容安全策略阻止的内容？

Question

我尝试为我的网站设置以下Content-Security-Policy标头：

header('Content-Security-Policy: "default-src \'none\'; script-src \'self\'; connect-src \'self\'; img-src * data:; style-src \'self\';"');

但是结果在某些方面是奇怪的。 例如，这个<table> ：

变成这样的：

在样式工作时，我试图通过Google Chrome开发者工具找出哪些内容被阻止，但是我没有成功找到错误消息或类似内容。

我如何找出导致此样式更改的原因？

该表的部分代码：

<table id=threads cellspacing=1>
    <col />
    <col style="width:66%" />
    <col style="width:8%" />
    <col style="width:26%" />
    <tr>
        <th colspan=2>&Auml;hnliche Beitr&auml;ge</th>
        <th>Re:<br />&#8730;</th>
        <th>Letzter&nbsp;Beitrag</th>
    </tr>
    <tr onmouseover="this.className='even'" onmouseout="this.className=''">
    ...

Answer 1

如果要允许内联样式，请改用style-src 'self' 'unsafe-inline' 。

仅当CSP标头中显式包含'unsafe-inline' ，才允许使用内联样式。

您的CSP标头缺少'unsafe-inline' ，因此不会应用您的所有style="width:66%"等。

---

至于获得更详细的信息以准确确定哪些样式已被阻止，我认为没有办法解决。 即使您使用report-ui指令 ，我认为从浏览器中获取的详细信息级别也将相同，这只是您有一个使用内联样式的文档，浏览器将报告该样式带有这样的消息：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“ default-style'self'”