Exceptions in the chrome console when "Content-Security-Policy" is used

Question

I use Content-Security-Policy:default-src 'self' header on my web page.

Chome throws error in the console when I load this page with enabled "Grammarly" chrome extension:

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIt0ABEAAAABQDwAAQABAAAAAAAAAAAAAAAAAAAAA…CwKGBmIIpVWLACJWGwAUVjI2KwAiNEswkKAwIrswsQAwIrsxEWAwIrWbIEKAZFUkSzCxAEAisA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I think it could happen with other plugins as well.

What strategy do you use?

It's a bad experience to see the page with the errors in the console. And users will not care is this the actual page problem or they "loved extension".

As I see, this header is not widely used.

Answer 1

Add font-src to use data:, e.g.:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">

And if you use CDNs, add as needed, e.g. for fonts.gstatic.com:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

More examples over at https://content-security-policy.com/

Answer 2

The strategy is to keep it as is. User's rarely if ever read the console or even open up devtools. You need to keep CSP enabled so that embeds and extensions can't leak user information from your site and have it claimed as something coming from your site.

You could proactively alert the user that there is a CSP violation by looking for requests via the window.performance.getEntriesByType("resource") and looking for resources that you know you didn't make (like CSP reporting)