我有一个 CSP 元标记，如下所示:
<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:*">
我在 body 标签中有一个本地 JavaScript 文件引用:
<script src="js/video.min.js"></script>
以及 header 标记中的本地样式表文件引用:
<link href="css/video-js.css" rel="stylesheet" />
但是，我在拒绝从 CSS 文件加载脚本或字体的浏览器中遇到以下错误。
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 *".
据我所知，第一个脚本没有违反内容安全策略，而且在我能找到的任何地方都没有任何描述“script-src-elem”的文档(这可能是一个线索)。
就 CSS 中的字体而言，浏览器中似乎存在一个错误，因为没有看起来像“font-src *”的 CSP 指令 - 因此，浏览器以某种方式覆盖了这个 CSP(或者它只是一个错误)。 无论如何，一直在尝试各种组合(例如，我不能在脚本 src 中放置“ self ”，否则会出现更多错误)。这没有任何意义!
这是完整的 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>
最佳答案
The first script doesn't violate the Content Security Policy
政策说:
script-src 'unsafe-eval' 'unsafe-inline' data:;
你加载脚本:
<script src="js/video.min.js"></script>
那么，让我们依次检查一下:
- 是
unsafe-eval吗？不，您没有使用eval()或任何类似的加载脚本。这是一个src属性。 - 是
unsafe-inline吗？不，它不是内联的；这是一个src属性。 - 是
data:吗？不，它是一个相对 URL，您不能相对于 data: scheme URL。您可能正在使用http:.
所以它肯定确实违反了 CSP。
您可能想添加 'self'到允许的来源。
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).
对此最可能的解释是您通过 HTTP header 和提供 CSP <meta>并优先考虑 HTTP header (因为规范要求)。
关于html - 如何修复内容安全策略错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57304848/