我嘗試為我的站點設定 CSP 標頭以從受信任的資源加載資料
CSP 阻止了我的本地 JS 檔案。這是我的 nuxt.config.js：
const self = 'localhost:*'
render: {
csp: {
reportOnly:false,
addMeta: true,
policies: {
'default-src': [self],
'script-src': [self, 'unsafe-inline','strict-dynamic'],
'style-src': [self,"'unsafe-inline'"],
'img-src':[self,'data:'],
'object-src':[self,'self']
}
}
},
被阻止的檔案：
http://localhost:3500/_nuxt/runtime.js
http://localhost:3500/_nuxt/layouts/default.js
http://localhost:3500/_nuxt/pages/index.js
http://localhost:3500/_nuxt/commons/app.js
http://localhost:3500/_nuxt/vendors/app.js
http://localhost:3500/_nuxt/app.js
錯誤：
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'sha256-6SIdoCBgtiLdpIihMzGUvd5OCiaDdcIHhB8Tzkn9l8M='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
它是在網路選項卡中顯示的標頭請求以獲取更多詳細資訊，這很奇怪，但一次它獲取相同的 js 檔案，一次它給出了錯誤......
uj5u.com熱心網友回復：
以下示例來自 mdn 檔案。猜猜你的問題可以通過其中之一來解決。請在此處參考更多示例
示例 1
網站管理員希望所有內容都來自網站自己的來源（這不包括子域。）
Content-Security-Policy: default-src 'self'
示例 2
網站管理員希望允許來自受信任域及其所有子域的內容（不必與設定 CSP 的域相同。）
Content-Security-Policy: default-src 'self' trusted.com *.trusted.com
示例 3
網站管理員希望允許 Web 應用程式的用戶在他們自己的內容中包含來自任何來源的影像，但將音頻或視頻媒體限制為受信任的提供者，并且所有腳本僅限于托管受信任代碼的特定服務器。
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
此處，默認情況下，僅允許來自檔案來源的內容，但以下情況除外：
影像可以從任何地方加載（注意“*”通配符）。媒體僅允許來自 media1.com 和 media2.com（而不是來自這些站點的子域）。可執行腳本僅允許來自 userscripts.example.com。
uj5u.com熱心網友回復：
我將 addMeta 更改為 false 并解決了問題！稍后我會解釋原因
const self = 'localhost:*'
render: {
csp: {
reportOnly:false,
addMeta: false,
policies: {
'default-src': [self],
'script-src': [self, 'unsafe-inline','strict-dynamic'],
'style-src': [self,"'unsafe-inline'"],
'img-src':[self,'data:'],
'object-src':[self,'self']
}
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/451594.html
標籤：javascript Vue.js 安全 nuxt.js
上一篇：動態組件在腳本設定中不起作用
下一篇：在陣列與物件陣列中宣告道具