Search code examples
htmlhttpheaderw3ccontent-security-policy

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

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>: enter image description here

became this: enter image description here

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=''">
    ...
Solution

  • If you want to allow inline styles, the only way is with style-src 'self' 'unsafe-inline'.

    But if you use 'unsafe-inline', you may as well not use CSP at all; it’s an unsafe policy.

    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 info back to pinpoint exactly what styles have been blocked, there’s not a way. Even if you use the report-ui directive, you’ll only get back the same level of detail you get back from your browser — that is, just a report saying you have a document that’s using inline styles, with only the same level of detail as this browser message:

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