因為它違反了以下內容安全政策指令

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 .