文章目錄

• 問題描述：
• 原因分析：
• • 什么是混合內容？
  • 通過 HTTPS 連接加載的安全網站具有以下優勢
• 解決方案：
• • 加載網頁時始終使用 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.

原因分析：

什么是混合內容？

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

因此得名“混合內容”。

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

通過 HTTPS 連接加載的安全網站具有以下優勢

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

解決方案：

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

加載網頁時始終使用 HTTPS URL

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

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

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

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

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

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

報告將包括：

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

使用 Upgrade-Insecure-Requests CSP 指令

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

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

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

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

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

通過Nginx 反向代理

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。