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

Question

我在一个普通的 html 文件中。

我的应用程序中有三个 cdn 和一个 static 服务器文件：

 <!-- 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.

在挠头并使用SO之后：

<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'" />

但它也没有奏效。

对不起，如果我是愚蠢的。 十年后我接触了前端开发。 有什么问题？

Answer 1

首先让我们分解问题：您有 7 个错误。 第一个是违反您的 CSP 的 style-src 和 rest 是您的 3 个外部脚本违反每个 2 个不同的 script-src 指令。 因此，有 2 个或更多 CSP 在起作用。 您可以在显示的元标记中定义它们，但也可以在响应 header 中定义。 您需要找到所有 CSP 并对其进行修改以解决您的问题，因为内容需要通过提供的每个 CSP。

您的策略允许 styles 和脚本从源服务器和本地主机加载，并作为内联脚本和样式。 You will need to allow the specific host names for your external sources as well, eg you'll need to add https://code.jquery.com or just code.jquery.com to script-src to allow loading scripts from that host .