因为它违反了以下内容安全策略指令。

3

我在一个简单的 HTML 文件中。

我的应用程序中有三个 CDN 和一个静态服务器文件:

 <!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="/static/js/main.js"></script>

我遇到了以下错误:

  localhost/:35 Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' https://localhost:* 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

在苦思冥想并查阅 Stack Overflow 后,我终于解决了问题。
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://localhost:* 'unsafe-inline'; script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'" />

但是它也没有起作用。 对不起,如果我很愚蠢的话。 十年后,我开始接触前端开发。 问题出在哪里?

1
你的服务器返回了什么CSP? - Daniel A. White
这些是特定框架/网站的JavaScript文件。它们不是从我的服务器提供的,而是来自可信赖的CDN源,例如cdnjs。这是浏览器内容安全策略的问题。@DanielA.White - Saswat
CSP是一种防御机制,它告诉您的网站可以加载什么。 - Daniel A. White
@DanielA.White 您的意思是我在从服务器响应时应该添加某种形式的头吗?如果是这样,那会是什么呢?请提供详细的解释和代码答案来解决我的问题。 - Saswat
1个回答

0

首先,让我们分解这个问题: 您有7个错误。第一个是您的CSP的style-src违规,其余的是您的3个外部脚本违反了2个不同的script-src指令。因此,有两个或更多的CSP在起作用。您可以像您展示的那样在meta标签中定义它们,但也可以在响应头中定义。您需要定位所有CSP并修改它们以修复问题,因为内容需要通过每个提供的CSP。

您的策略允许从原始服务器和本地主机以及内联脚本和样式加载样式和脚本。您还需要允许外部来源的特定主机名,例如,您需要将https://code.jquery.com或只是code.jquery.com添加到script-src中,以允许从该主机加载脚本。


1
好的,但如果您详细说明这个术语并提供代码示例会更好。 - Saswat

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接