firefox - Content Security Policy - Determine source of blocked resource

Question

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:;

question from:https://stackoverflow.com/questions/65941453/content-security-policy-determine-source-of-blocked-resource

Answer 1

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.