Search code examples
firefoxweb-configcontent-security-policy

Content Security Policy - Determine source of blocked resource

In Firefox I am getting the following error:

Content Security Policy: The page’s settings blocked the loading of a resource at data: (“media-src”).

I am unsure why I would get this error as I host no video or audio tags.

<add name="Content-Security-Policy" value="default-src 'self'; connect-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; media-src 'self'; object-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"/>

How can you find the source of the blocked resource in Firefox?

Any ideas why this would occur when the site has no external resources?

SOLUTION

I needed to include the data: attribute.

media-src 'self' data:;

Solution

  • Basic ways to debug CSP:

    1. Violation reports (report-uri directive) can give full info.
    2. Chrome's console more informative than Firefoxes. Chrome shows blocked Url in console (Firefox - too in some cases).
    3. The SecurityPolicyViolationEvent provides the same info as violation reports (if you familiar with JavaScript).

    Detailed info how to debug CSP.