如何查看Content-Security-Policy被屏蔽的内容？

Question

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

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

但结果有些地方很奇怪。例如这个 <table>：

变成了这样：

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

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

此table的部分代码：

<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'。

但是如果你使用'unsafe-inline'，你还不如根本不用CSP；这是一个不安全的政策。

仅当 CSP header 明确包含 'unsafe-inline' 时才允许使用内联样式。

您的 CSP header 缺少 'unsafe-inline'，因此您的所有 style="width:66%" 等均未应用。

就返回更详细的信息以准确查明哪些样式已被阻止而言，没有办法。即使您使用 report-ui directive，您也只会返回与从浏览器返回的相同级别的详细信息——也就是说，只是一份报告说您有一个使用内联样式的文档，并且只有相同级别详细信息如下浏览器消息：

Refused to apply inline style because it violates the following Content Security Policy directive: "default-style 'self'"

如何查看Content-Security-Policy被屏蔽的内容？

How to check what is blocked through Content-Security-Policy?

html

http

header

w3c

content-security-policy