日韩av无码中文无码不卡电影,极品少妇xxxx精品少妇偷拍

如您所見(jiàn)，該頁(yè)面有問(wèn)題。例如，徽標(biāo)圖片無(wú)法加載。另一個(gè)問(wèn)題就是頁(yè)面樣式 (CSS)。

調(diào)試錯(cuò)誤

現(xiàn)在讓我們嘗試獲取有關(guān)問(wèn)題原因的更多詳細(xì)信息。右鍵單擊網(wǎng)頁(yè)并選擇瀏覽器檢查工具。在該工具內(nèi)，導(dǎo)航到控制臺(tái)選項(xiàng)卡。您應(yīng)該會(huì)找到類似以下的報(bào)告：

從上面的報(bào)告中，我們可以看到為什么我們的圖片沒(méi)有加載。我們還可以看到為什么我們的內(nèi)聯(lián) CSS 不起作用。這兩個(gè)錯(cuò)誤都是由于內(nèi)容安全策略指令造成的。

第一個(gè)錯(cuò)誤是：

Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://*"

該消息不言自明。在我們的 CSP 中，我們指定我們的網(wǎng)站應(yīng)僅通過(guò) HTTPS 加載圖像。修復(fù)此錯(cuò)誤的一種方法是允許來(lái)自同一來(lái)源的非 HTTPS 圖像。我們可以通過(guò)將“self”作為 img -src指令的來(lái)源來(lái)做到這一點(diǎn)。

下一個(gè)錯(cuò)誤輸出以下消息：

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'".

為了解決這個(gè)問(wèn)題，我們可能需要添加 unsafe-inline。但是，除非必要，否則您應(yīng)該避免在您的網(wǎng)站上允許內(nèi)聯(lián)腳本。

現(xiàn)在我們只剩下一個(gè)錯(cuò)誤；它輸出以下消息：

Refused to load the image 'data:image/svg+xml;base64,PHN2... QwLjl6IiAvPgogIDwvc3ZnPg==' because it violates the following Content Security Policy directive: "img-src https://* 'self'".

與第一個(gè)錯(cuò)誤一樣，此錯(cuò)誤會(huì)影響圖像加載。請(qǐng)注意，此圖像不是來(lái)自 HTTPS 源，也不在原始文件系統(tǒng)上。為了修復(fù)此問(wèn)題，我們將data:添加到img-src指令中。
修復(fù)所有錯(cuò)誤后，我們的頁(yè)面加載情況如下，所有圖像和樣式均正常：

請(qǐng)注意，控制臺(tái)選項(xiàng)卡中不再有令人討厭的紅色錯(cuò)誤消息。恭喜！

這是不會(huì)破壞我們的圖像或 CSS 的新內(nèi)容安全策略的完整代碼。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src https://* 'self' data:;">

結(jié)論

內(nèi)容安全策略是現(xiàn)代 Web 瀏覽器中的一項(xiàng)重要安全功能。使用 CSP 并遵循其他安全最佳實(shí)踐可以消除您網(wǎng)站上的大多數(shù)XSS 相關(guān)攻擊。在這篇文章中，我們向您展示了什么是 Angular 內(nèi)容安全策略。我們還向您展示了如何啟用它。此外，我們還能夠練習(xí)如何檢測(cè)和修復(fù) Angular 內(nèi)容安全策略錯(cuò)誤。?

調(diào)試 Angular 內(nèi)容安全策略錯(cuò)誤時(shí)，一個(gè)不錯(cuò)的起點(diǎn)是瀏覽器控制臺(tái)。大多數(shù)現(xiàn)代 Web 瀏覽器（如 Chrome 和 Firefox）都提供控制臺(tái)功能。

最后，確保僅通過(guò)將策略更改為有效且仍然安全的新值來(lái)修復(fù) Angular 內(nèi)容安全策略錯(cuò)誤。

文章來(lái)源：Angular Content Security Policy Guide: What It Is and How to Enable It