內容安全策略塊 Vue.js

Question

我正在使用 express.public() function 在我的 node.js 服務器中提供 HTML 頁面。

我將此添加到我的 html 頁面中：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Chrome 給了我一個 Content-Security-Policy 給我。

我在我的節點 index.js 中使用了這個中間件

app.use(morgan('tiny'));
app.use(helmet());
app.use(cors());
app.use(express.json());
app.use(express.static("./public"));

我的應用程序標題：

Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

如何在沒有任何 SecurityPolicy 的情況下添加此腳本

解決了

我從我的項目中刪除了“頭盔”。 Helmet 阻止了除絕對域之外的所有 cdn 和腳本。

Answer 1

內容安全策略在 html 文件中設置，或者由服務於 html 的軟件（例如 Nginx，Apache）設置。

目前你有：default-src 'self'，這意味着你告訴瀏覽器它只能向自己的域發出請求。

您需要將https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js添加到它可以訪問的域列表中。

那將是這樣的：

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

所以 default-src: self 將默認設置為將請求限制在您自己的域中。

script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js覆蓋了這一點，並專門針對腳本將請求限制在您的域和 url 中。

這有很多細節和例子： https://content-security-policy.com

Answer 2

除了silent-tiger說的，我覺得你應該先搞清楚是哪個中間件負責添加這個內容策略。 為此，請禁用所有中間件（除了 express static），然后逐個添加其他中間件，直到您再次看到內容安全策略標頭。

如果您找到了哪個中間件負責，那么您就知道應該配置哪個中間件。