'How do I fix Content Security Policy bugs?

I have a CSP meta tag that looks like so:

<meta http-equiv="Content-Security-Policy"
content="font-src 'self' 'unsafe-inline' data:;
 img-src 'self' data:;
 style-src 'self' 'unsafe-inline' data:;
 script-src 'unsafe-eval' 'unsafe-inline' data:;
 default-src 'self' localhost:*">

And I have a local JavaScript file reference inside the body tags:

   <script src="js/video.min.js"></script>

And a local stylesheet file reference in the header tag:

<link href="css/video-js.css" rel="stylesheet" />

However, I'm getting the following errors in my browser refusing to load the script or a font from the CSS file.

Refused to load the script 'https://localhost:44356/js/video.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' data:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

2testvideo.html:1 Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0...2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==' because it violates the following Content Security Policy directive: "font-src *".

The first script doesn't violate the Content Security Policy as far as I can tell and there isn't any documentation describing 'script-src-elem' anywhere I can find (this may be a clue).

As far as the font in the CSS, there's appears to be a bug in the browsers as there was no CSP directive that looks like "font-src *" - so, somehow the browser is overriding this CSP (or it's just a bug). Regardless, been hair pulling trying all sorts of combinations (I can't put 'self' in the script-src, for example or more errors show up). It doesn't make any sense!

Here's the complete HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
 <meta http-equiv="Content-Security-Policy" content="font-src 'self' 'unsafe-inline' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline' data:; script-src 'unsafe-eval' 'unsafe-inline' data:; default-src 'self' localhost:*">
    <title></title>
    <link href="css/video-js.css" rel="stylesheet" />
</head>
<body>
    <video id='my-video' class='video-js' controls preload='auto' width='640' height='360'
           poster='/videos/Factory_Clearance30_03_16.jpg' data-setup='{}'>
        <source src="/videos/Factory_Clearance30_03_16.webm" type="video/webm">
        <source src="/videos/Factory_Clearance30_03_16.ogv" type="video/ogg">
        <source src="/videos/Factory_Clearance30_03_16.mp4" type="video/mp4">
    </video>
    <script src="js/video.min.js"></script>
</body>
</html>
htmlcontent-security-policy


Solution 1:[1]

The first script doesn't violate the Content Security Policy

The policy says:

script-src 'unsafe-eval' 'unsafe-inline' data:;

You load the script with:

<script src="js/video.min.js"></script>

So, let's check each in turn:

  • Is it unsafe-eval? No, you aren't using eval() or anything similar to load the script. It is a src attribute.
  • Is it unsafe-inline? No, it isn't inline; it's a src attribute.
  • Is it data:? No. It's a relative URL and you can't be relative to a data: scheme URL. You're probably using http:.

So it definitely does violate the CSP.

Likely you want to add 'self' to the allowed origins.

As far as the font in the CSS, there's appears to be a bug in the browsers as there was no CSP directive that looks like "font-src *" - so, somehow the browser is overriding this CSP (or it's just a bug).

The most likely explanation for this is that you are providing a CSP via HTTP headers and <meta> and the HTTP headers are given priority (because the specification requires that).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peter Mortensen

Related Questions