1. 程式人生 > >讓瀏覽器不再顯示 https 頁面中的 http 請求警報,所有靜態資源強制轉https

讓瀏覽器不再顯示 https 頁面中的 http 請求警報,所有靜態資源強制轉https

HTTPS 是 HTTP over Secure Socket Layer,以安全為目標的 HTTP 通道,所以在 HTTPS 承載的頁面上不允許出現 http 請求,一旦出現就是提示或報錯:

Mixed Content: The page at ‘https://www.tqcto.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.

HTTPS改造之後,我們可以在很多頁面中看到如下警報:

img

很多運營對 https 沒有技術概念,在填入的資料中不免出現 http 的資源,體系龐大,出現疏忽和漏洞也是不可避免的。

Nginx設定upgrade-insecure-requests

好在 W3C 工作組考慮到了我們升級 HTTPS 的艱難,在 2015 年 4 月份就出了一個 Upgrade Insecure Requests 的草案,他的作用就是讓瀏覽器自動升級請求。

在我們nginx伺服器的響應頭中加入:

add_header Content-Security-Policy upgrade-insecure-requests;

CSP設定upgrade-insecure-requests

header("Content-Security-Policy: upgrade-insecure-requests");

參考程式設計技術
我們的頁面是 https 的,而這個頁面中包含了大量的 http 資源(圖片、iframe等),頁面一旦發現存在上述響應頭,會在載入 http 資源時自動替換成 https 請求。可以檢視 google 提供的一個 demo

img

不過讓人不解的是,這個資源發出了兩次請求,猜測是瀏覽器實現的 bug:
img

當然,如果我們不方便在伺服器/Nginx 上操作,也可以在頁面中加入 meta 頭:

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

目前支援這個設定的還只有 chrome 43.0,不過我相信,CSP 將成為未來 web 前端安全大力關注和使用的內容。而 upgrade-insecure-requests 草案也會很快進入 RFC 模式。
參考程式設計技術

從 W3C 工作組給出的 example,可以看出,這個設定不會對外域的 a 連結做處理,所以可以放心使用。

技術交流學習或者有任何問題歡迎加群

程式設計技術交流群 : 154514123 愛上程式設計

Java技術交流群 : 6128790  Java

相關推薦

瀏覽器不再顯示 https 頁面http 請求警報所有靜態資源強制https

HTTPS 是 HTTP over Secure Socket Layer,以安全為目標的 HTTP 通道,所以在 HTTPS 承載的頁面上不允許出現 http 請求,一旦出現就是提示或報錯: Mixed Content: The page at ‘htt

瀏覽器不再顯示 https 頁面http 請求警報

本文為歸檔內容,原始地址在 部落格園. HTTPS 是 HTTP over Secure Socket Layer,以安全為目標的 HTTP 通道,所以在 HTTPS 承載的頁面上不允許出現 http 請求,一旦出現就是提示或報錯: Mixed Content: The page at “https

https頁面http請求的問題 彙總

(1)強制升級http 靜態資源地址為https地址https頁面中不能使用http請求,http頁面中可以使用https請求。關於在https 頁面有一些http的請求,可以在<head></head>中設定<meta http-equiv="

https 頁面引入 http 資源的解決方式

相對協議 應用場景 瀏覽器預設是不允許在 https 裡面引用 http 資源的,一般都會彈出提示框。 使用者確認後才會繼續載入,使用者體驗非常差。 而且如果在一個 https 頁面裡動態的引入 http 資源,比如引入一個 js 檔案,會被直接 block 掉的

TP框架裏面當訪問不存在的操作方法時其不顯示錯誤頁面

操作 pub 不顯示 public 錯誤 ech function 用戶 額外 當訪問空操作方法或者不存在的錯誤的操作方法的時候: 在該控制器頁面裏面寫一個   public function _empty(){     echo "您訪問的頁面有誤";   } 的

web頁面http返回的狀態碼解釋

重新 不能 情況 返回 範圍請求 常見 無法 末尾 有效期 狀態碼類別: ??1xx: 信息類,表示客戶發送的請求服務端正在處理 ??2xx:成功類,服務器 成功接收請求 ??3xx:重定向類,服務器中找到了多個請求內容,則需要用戶再次操作選擇 ??4xx:客戶端

拿到input file上傳文件名字 顯示頁面

spl file html div his clas javascrip brush .html $(".aFileBtn").on("change","input[type=‘file‘]",function(){ var filePath=$(this).

Linux下安裝配置 http 修改本機http伺服器主頁自定義顯示內容。

HTTP(Hyper Text Transfer Protocol) 超文字傳輸協議,位於osi模型中的應用層。               安裝:可以使用yum等多種方式安裝,最方便的自然是yum安裝(Redhat需

使用idea搭建SpringBoot+Spring jpa專案(實現獲取資料庫資料顯示頁面

搭建SpringBoot準備 javaweb基礎 idea使用基礎 maven使用基礎 開始搭建SpringBoot專案 建立springboot 設定Group、Artifact、Packaging 選擇web及SpringBoot版本 配置app

java程式碼http請求https請求

可以參照試用RestTemplate與OKHttp3實現該功能 。 1.Java程式碼中的http請求的服務端與和客戶端 a: GET請求(返回字串) **服務端程式碼:** @RequestMapping(value = "/getDriverOn

jq、js獲取一個頁面的ajax資料傳到另一個頁面顯示(通過url傳參方式)

做專案遇到了頁面之間傳輸資料的問題,特別是第一個頁面的資料是使用ajax顯示的,當點選ajax中append的li的時候,開啟另一個頁面,將第一個頁面的資料顯示在另一個頁面上,具體情況如下: 一、這是第一個頁面中的js程式碼: //顯示所有該使用者的歌單 function showMusicMe

vue上傳頭像顯示頁面base64

body部分 <img src="" style="height: 60px; width: 60px;" id="portrait"> <div class="logo"> 點選上傳頭像 <inp

JAVA讀取本地檔案並顯示頁面

javaweb圖片的顯示 @RequestMapping(value="showImg") @ResponseBody public void ShowImg(HttpServletRequest request,HttpServletResponse response)

如何一個div顯示頁面最頂層

網站有個欄目的上拉選單被擋住了,設定下拉選單顯示在網站最頂層解決辦法 <div style="z-index:999"></div>數值越大,顯示級越高,當然一般也不用999, 2,3就夠了  <div id="police_computer_

.net mvc3.0帶html標籤的值顯示頁面不被轉義的方法

比如 ViewBag.html = "<div></div>";    如果在cshtml中寫 @ViewBag.html將輸出 &lt;div&gt;&lt;/div&gt; 如果在cshtml中寫 @{     

建立選單(存入資料庫顯示頁面同步資料)

定義index方法,先呼叫getCurrentMp方法,判斷mp是否為空public function index(){ $mp = getCurrentMp(); if (empty($mp)) { $this->error(

HTTPS頁面使用CNZZ統計程式碼Chrome顯示警告怎麼辦?

很多站長會遇到一個問題,網站加入CNZZ的JS統計程式碼後,Chrome瀏覽器出現警告:阻止跨站解析器阻斷指令碼通過document.write呼叫(A parser-blocking, cross site script,XXXX.js is invoked via document.write.)。該警告

confirm顯示數組的內容時總是帶一個逗號分隔的解決方法

script new arr sub blog item type onf val 問題的關鍵 就是在給confirm顯示之前,將數組轉換成字符串,並以每個數組的元素為一個字符串,加上一個換行回車符即可: 代碼中的背景色 為關鍵的點 <script type="te

Golanghttp請求設定cookie和header(包括GET和POST請求)

//http請求 func httpHandle(method, urlVal,data string) { client := &http.Client{} var req *http.Request if data == "" { urlArr := strings.Sp

jmeterhttp請求出現415解決方案

jmeter中http請求出現415解決方案   做介面測試發現postman請求介面返回正常,但是jmeter出現415請求不通:The server refused this request because the request entity is in a format n