我需要幫助。https://apis.google.com/js/api.js在我的生產 React 應用程式上被 csp 阻止。我也添加了 webpack 配置。
new CspHtmlWebpackPlugin({
// 'base-uri': "'self'",
// 'object-src': "'none'",
'script-src': [
"'unsafe-inline'",
"'unsafe-eval'",
"https://apis.google.com/js/api.js",
"https://www.wiris.net/demo/plugins/app/configurationjs",
"https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js",
"https://cdn.mathjax.org/mathjax/latest/MathJax.js",
],
'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
})
我正在使用 csp-html-webpack-plugin
uj5u.com熱心網友回復：
檢查建議：
1.檢查是否有重定向
如果這在您的本地環境中被復制 - 嘗試查看是否有重定向（在 chrome 網路選項卡中）。出于隱私原因，在 301/302 重定向到一個單獨的域（不在允許串列中）時，CSP 報告將包含原始請求 url，這可能會非常混亂。
2. 嘗試允許完整域
即允許https://apis.google.com而不是https://apis.google.com/js/api.js看看它是否仍然存在。
3. 額外提示
不需要/使用'unsafe-eval'in style-src。你可以洗掉它。
uj5u.com熱心網友回復：
看起來您已經配置了csp-html-webpack-plugin - 您必須在 webpack 配置中同時包含HtmlWebpackPlugin和CspHtmlWebpackPlugin插件，因為最后一個基于第一個：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
module.exports = {
// rest of webpack config
plugins: [
new HtmlWebpackPlugin()
new CspHtmlWebpackPlugin({
// CSP config here:
enabled: true,
'script-src': [
"'unsafe-inline'",
"'unsafe-eval'",
"'self'",
"https://apis.google.com/js/api.js",
"https://www.wiris.net/demo/plugins/app/configurationjs",
"https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js",
"https://cdn.mathjax.org/mathjax/latest/MathJax.js",
],
'style-src': ["'unsafe-inline'", "'self'"],
processFn: defaultProcessFn,
})
]
}
還要檢查：
- 您確實在
<meta equiv="content-security-policy" content="...">標簽中獲得了哪個 CSP 。 - 您在開發工具中是否有任何 Content-Security-Policy HTTP 回應標頭，因為某些中間件（例如 Helmet）可以發布自己的默認 CSP。
并且請在問題中添加來自瀏覽器控制臺的 CSP 錯誤訊息。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341222.html
上一篇：動態鏈接html中的靜態css
下一篇：如何排除html-webpack-plugin生成的鏈接標簽（或者更具體地說是由mini-css-extract-plugin提取的.css檔案）？