html - 如何修复内容安全策略错误?

我有一个 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 (因为规范要求)。

https://stackoverflow.com/questions/57304848/

相关文章:

javascript - 在 Angular 2+ 上重新渲染 FullCalendar

spring-boot - Spring Boot - Rest Controller 响应两个 J

reactjs - 无法在ubuntu上的reactotron中订阅react-redux状态

firebase - oobCodes 在 Firebase 中的生命周期

visual-studio - Visual Studio 多个启动项目 - 仅重启一个项目

flutter - flutter 的 video_playeur 包问题

asp.net-core-2.0 - 如何在 .net 核心 web api 中将 Razor Vi

python - IPython 笔记本 : using quotes (') and dollar

apache-spark - 合并多个 Rocksdb 数据库

asp.net-mvc - 具有 ASP.NET MVC 属性路由的 Controller 级参数