最近 Google 的 Lighthouse 工具提醒我我沒有提供內容安全策略。然而，當我嘗試添加一個（或至少一個沒有“不安全”一詞的）時，我發現了一堆違規行為，似乎來自 Next.js 和 Styled-Components。
這兩個庫似乎都使用動態腳本/樣式標簽，這違反了任何理智的 CSP。但我發現解決它們的唯一方法是使用“nonce”。但是，這似乎需要運行實際的服務器：如果您使用 Next 生成靜態檔案（托管在像 AWS S3 這樣的靜態主機上），則不能提供 nonce。
我的問題很簡單：我錯過了什么嗎？是否有一些非基于亂數的方式，或基于靜態主機亂數的方式，使用 Next.js 和樣式組件在 S3 上托管站點？
或者是不可能將這些庫與嚴格的 CSP 一起使用（沒有服務器生成的亂數）？
uj5u.com熱心網友回復：
我希望你：
不要使用行內樣式
<tag style='display:none;'>或 .js 呼叫element.setAttribute('style', ...)。不要使用像
<tag onclick='...'>JS-navigation 這樣的內置行內事件處理程式<a href='javascript:void(0)'>
因為上述所有內容都'unsafe-inline'分別需要樣式/腳本，因為'unsafe-hashes'Safari 不支持令牌，Firefox 支持錯誤。
對于單頁應用程式（SPA）（沒有服務器端渲染），使用'nonce-value'是沒有用的，因為 SPA 不會重新加載頁面，而只是部分更新其內容，但您必須為每個頁面加載生成新的亂數。
對于無服務器應用程式（如靜態檔案托管）和 SPA 應用程式，您可以使用'hash-value'代替'nonce-value'來允許行內腳本和樣式。
如果您使用 Webpack，它有一些插件，例如，csp-html-webpack-plugin插件將為您的內容安全策略元標記生成內容，并將正確的資料輸入到您的 HTML 模板中，由html-webpack-plugin. 所有行內 JS 和 CSS 都將被散列，并插入到策略中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/318846.html
標籤：亚马逊-s3 下一个.js 样式组件 内容安全策略 随机数
上一篇：AWSSAM：如何使用SAM創建具有現有加密密鑰的S3存盤桶
下一篇：當我的Lambda可以訪問S3存盤桶時，為什么我的GetObjectRequest回傳403AccessDenied錯誤？