In website due to CSP configuration inline style and script as well as external scripts are not loading

Question

We have the following CSP Header in our site:

default-src 'self' https: blob: data: 'unsafe-inline' 'unsafe-eval' script-src: https://ajax.googleapis.com https://analytics.kaltura.com https://api.peer5.com https://bat.bing.com https://cdnapisec.kaltura.com https://cookie-cdn.cookiepro.com https://maps.googleapis.com https://players.brightcove.net https://s7.addthis.com https://secure.perk0mean.com https://static.cloud.coveo.com https://tag.demandbase.com https://www.google.com https://www.googleadservices.com https://www.googletagmanager.com https://www.gstatic.com object-src: https://fonts.gstatic.com connect-src: *.google-analytics.com *.analytics.google.com img-src: *.google-analytics.com *.analytics.google.com;

Due to a security problem, we are trying to remove policy values like unsafe-inline and unsafe-eval from our CSP header.

In our project structure, we have a lot of external scripts, inline scripts and inline styles. In a few places, we are not able to avoid inline styles and scripts.

Inline style example:

<div class="some-class" style= "background-color: red;">
</div>

We are using formats like this in more places. How do we remove the unsafe-inline and unsafe-eval without heavy code changes? It means I am asking for any other alternatives for CSP policies or any other alternative solutions.

Answer 1

I would move inlined script/style into an external file linked with the integrity attribute.

If you cannot move the content into an external file, read the content into a string and then inject the string’s checksum into the required CSP directive.