Webpack 內(nèi)容安全策略

Webpack 能夠為其加載的所有腳本添加 ?nonce?。要啟用此功能，需要在引入的入口腳本中設(shè)置一個 ?__webpack_nonce__? 變量。應(yīng)該為每個唯一的頁面視圖生成和提供一個唯一的基于 hash 的 ?nonce?，這就是為什么 ?__webpack_nonce__? 要在入口文件中指定，而不是在配置中指定的原因。注意，?__webpack_nonce__? 應(yīng)該是一個 base64 編碼的字符串。

示例

在 entry 文件中：

// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...

啟用 CSP

注意，默認情況下不啟用 ?CSP?。需要與文檔(document)一起發(fā)送相應(yīng)的 CSP header 或 meta 標簽 ?<meta http-equiv="Content-Security-Policy" ...>?，以告知瀏覽器啟用 CSP。以下是一個包含 CDN 白名單 URL 的 CSP header 的示例：

Content-Security-Policy: default-src 'self'; script-src 'self'
https://trusted.cdn.com;

有關(guān) CSP 和 nonce 屬性的更多信息，請查看頁面底部的 延伸閱讀 部分。

Trusted Types

webpack 還能夠使用 Trusted Types 來加載動態(tài)構(gòu)建的腳本，遵守 CSP ?require-trusted-types-for? 指令的限制。可查看 ?output.trustedTypes? 配置項。

Further Reading

• 解釋 nonce 設(shè)計目的
• 白名單的不安全性和內(nèi)容安全政策的未來
• 使用 CSP, Hash, Nonce 和 Report URI 鎖定你的網(wǎng)站腳本
• MDN 的 CSP 文檔
• Trusted Types