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

Question

I tried to set the following Content-Security-Policy header for my website:

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

But the result was in some parts strange. For example this <table> :

became this:

As styles work I tried to find out through Google Chrome Developer Tools which content was blocked, but I had no success to find error messages or similar.

How can I find out what caused this style change?

Partial code of this 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

If you want to allow inline styles, use style-src 'self' 'unsafe-inline' instead.

Inline styles are only allowed if the CSP header explicitly includes 'unsafe-inline' for them.

Your CSP header lacks 'unsafe-inline' , so all your style="width:66%" , etc., are not applied.

---

As far as getting more detailed information back to pinpoint exactly what styles have been block, I think there's not a way to get that. Even if you use the report-ui directive , I think from that you'll only get back the same level of detail you get back from your browser, which is just that you have a document which is using inline styles, which browsers will report with message something like this:

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