文章目錄

• 問題描述：
• 原因分析：
• • 什么是混合內(nèi)容？
  • 通過 HTTPS 連接加載的安全網(wǎng)站具有以下優(yōu)勢
• 解決方案：
• • 加載網(wǎng)頁時始終使用 HTTPS URL
  • 使用 Content-Security-Policy-Report-Only 標頭
  • 使用 Upgrade-Insecure-Requests CSP 指令
  • 通過Nginx 反向代理

問題描述：

Mixed Content: The page at 'https://' was loaded over HTTPS, but requested an insecure frame 'http://'. This request has been blocked; the content must be served over HTTPS.

原因分析：

什么是混合內(nèi)容？

根據(jù) Google 的說法，當網(wǎng)站上的 HTML 通過安全的 HTTPS 連接（由于最近安裝的 SSL 證書）加載時會出現(xiàn)混合內(nèi)容，但其他內(nèi)容（例如圖像、視頻內(nèi)容、樣式表和腳本）繼續(xù)通過不安全的 HTTP 加載聯(lián)系。這會導致某些 Web 內(nèi)容加載安全，而某些 Web 內(nèi)容加載不安全。

因此得名“混合內(nèi)容”。

混合或不安全內(nèi)容的問題在于，無論內(nèi)容本身是否安全，它們都通過安全的 HTTPS 連接加載。當這種情況發(fā)生時，現(xiàn)代瀏覽器（例如 Google Chrome）會向嘗試查看網(wǎng)站包含不安全內(nèi)容的 Web 內(nèi)容的用戶顯示警告。

通過 HTTPS 連接加載的安全網(wǎng)站具有以下優(yōu)勢

驗證。向您的網(wǎng)站訪問者保證，當他們登陸您的網(wǎng)站并與您的網(wǎng)站內(nèi)容互動時，他們是安全的，尤其是當您經(jīng)營一家共享財務信息的在線商店時。此外，驗證站點訪問者是否在他們想要訪問的網(wǎng)站上并且沒有被重定向到惡意站點。
數(shù)據(jù)的完整性。直觀地告訴網(wǎng)站訪問者，無論他們在您的網(wǎng)站上采取什么行動，他們的個人和財務信息都是安全的，不會受到黑客攻擊。此外，讓瀏覽器能夠檢測黑客是否更改了瀏覽器接收的任何數(shù)據(jù)。換句話說，幫助用戶相信黑客沒有將通過您的在線商店支付的錢重定向到另一個帳戶。
匿名。向網(wǎng)站訪問者保證他們在您網(wǎng)站上的行為不會被其他人攔截和惡意使用。
https://www.thesslstore.com/blog/how-to-find-and-fix-mixed-content-warnings-on-https-sites/

解決方案：

防止 HTTPS 站點上出現(xiàn)混合內(nèi)容警告的方法
盡管連接安全，但在您的網(wǎng)站上安裝 SSL 證書并繼續(xù)收到混合內(nèi)容警告可能會令人沮喪。這就是為什么有時需要采取一些額外措施來保護您的網(wǎng)站并保護您的網(wǎng)站訪問者的原因。

加載網(wǎng)頁時始終使用 HTTPS URL

盡可能將 HTTPS 連接 (https://) 應用于網(wǎng)站上的所有網(wǎng)頁，這一點很重要。如果您注意到您的網(wǎng)頁正在通過不安全的連接加載，盡管您的網(wǎng)站上有一個活動的 SSL 證書，您需要解決這個問題。這可能意味著與您的網(wǎng)絡(luò)托管服務提供商的支持團隊取得聯(lián)系，如果他們?yōu)槟峁?SSL 證書。

使用 Content-Security-Policy-Report-Only 標頭

如果您想自動收集網(wǎng)站上混合內(nèi)容的報告，您可以考慮將此代碼段添加到您網(wǎng)站的HTTP 響應標頭中：

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

盡管在混合內(nèi)容成為問題之前修復它并不是 100% 可靠，但它確實可以幫助那些擁有大型網(wǎng)站的人掌握不安全的內(nèi)容。

當站點訪問者登陸包含混合內(nèi)容的網(wǎng)頁時，會向 https://example.com/reportingEndpoint 發(fā)送報告，提醒您某些內(nèi)容違反了內(nèi)容安全策略。

報告將包括：

相關(guān)網(wǎng)頁的網(wǎng)址，以及違反策略的子資源。
通過配置報告端點以記錄這些報告，您可以跟蹤網(wǎng)站上的混合內(nèi)容，而無需親自訪問每個網(wǎng)頁。也就是說，此策略唯一有效的時間是網(wǎng)站訪問者登陸包含混合內(nèi)容的網(wǎng)頁。更不用說，您只會收到中等至高流量網(wǎng)頁的報告，這意味著混合內(nèi)容可能會在您意識到之前加載一段時間。

使用 Upgrade-Insecure-Requests CSP 指令

在 HTTPS 站點上自動檢測和修復混合內(nèi)容警告成為問題之前的另一種方法是使用upgrade-insecure-requests指令工具。此工具會告訴瀏覽器在發(fā)出任何用戶請求之前升級所有不安全的 URL。

換句話說，在為您網(wǎng)站前端的網(wǎng)站訪問者加載之前，將確保不安全的 URL 是安全的。

為此，請將此元標記代碼片段添加到文檔的 HTML 部分：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

請記住，如果通過 HTTPS 連接通過 HTTP 加載的資源在 HTTPS 上不可用，則此工具將不起作用。因此，資源不會升級為安全，也不會為站點訪問者加載。雖然這意味著網(wǎng)站訪問者會錯過您網(wǎng)站的某些內(nèi)容，但這也意味著他們在瀏覽您的網(wǎng)站時仍能保持安全。

通過Nginx 反向代理

server {....location /xxxx {proxy_pass http://xxxxxx;}.... }

總結(jié)

以上是生活随笔為你收集整理的【Web】HTTPS 引入http资源，混合内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。