https中引入http資源資源所導致的問題

問題描述

因為公司要求所有生產環境為了安全性需求,全部都走https, 並且在nginx裡面加入了content-security-policy "upgrade-insecure-requests;connect-src *響應頭, 作用是讓瀏覽器自動公升級請求，防止訪問者訪問不安全的內容。

該指令用於讓瀏覽器自動公升級請求從http到https,用於大量包含http資源的http網頁直接公升級到https.

雖然這樣讓http公升級為https,但是導致出現的問題是,之前載入http資源的顯示不了,樣式,js載入不了, 寫在本地還行,但如果是公共的js檔案,往往就是存在cdn或者其他伺服器上, 這時候如果訪問不了,可能導致業務完全操作不了, 比如: jquery載入失效,所有操作,請求都將無效了

然而對於以前http鏈結來說，我們往往就存在乙個相容性問題，因為你不可能一下就全部切換過去，應該在很長一段時間內，https與http將共存。

https與http共存場景如:

/*

3. 對於流量推廣一類的業務，可能原有的http推廣位址已經傳送給第三方，而且即使你通知到第三方要求改為https，也不排除有http位址的訪問,或者第三方不願意改.
*/

http協議與https協議區別

解決這個問題之前首先要知道https和http是什麼, 區別在**.

它是乙個安全通訊通道，它基於http開發，用於在客戶計算機和伺服器之間交換資訊，它使用安全套接字層(ssl)進行資訊交換，簡單來說它是http的安全版。它是由netscape開發並內置於其瀏覽器中，用於對資料進行壓縮和解壓操作，並返回網路上傳送回的結果。https實際上應用了netscape的安全全套接字層（ssl）作為http應用層的子層。（https使用埠443，而不是象http那樣使用埠80來和tcp/ip進行通訊。）ssl使用40 位關鍵字作為rc4流加密演算法，這對於商業資訊的加密是合適的。https和ssl支援使用x.509數字認證，如果需要的話使用者可以確認傳送者是誰。總的來說，https協議是由ssl+http協議構建的可進行加密傳輸、身份認證的網路協議要比http協議安全。

在url前加https://字首表明是用ssl加密的，你的電腦與伺服器之間收發的資訊傳輸將更加安全。 web伺服器啟用ssl需要獲得乙個伺服器證書並將該證書與要使用ssl的伺服器繫結。

/*

1. https協議需要到ca申請證書，一般免費證書很少，需要交費。
2. http是超文字傳輸協議，資訊是明文傳輸，https 則是具有安全性的ssl加密傳輸協議。
3. http和https使用的是完全不同的連線方式用的埠也不一樣,前者是80,後者是443。
4. http的連線很簡單,是無狀態的。
5. https協議是由ssl+http協議構建的可進行加密傳輸、身份認證的網路協議 要比http協議安全。
*/

當使用者訪問使用https頁面時, 他們與web伺服器之間的連線是使用ssl加密的, 從而保護連線不受嗅探和中間人攻擊.

如果https頁面包括由普通明文http連線加密的內容, 那麼連線只是被部分加密; 非加密的內容可以被嗅探者入侵, 並且可以被中間人攻擊者修改,因此連線不再受保護. 當乙個頁面出現這種情況時, 他被稱為混合內容頁面.

在瀏覽器中訪問https頁面時，如果該htpps頁面中有一些http資源，我們可以把這些http資源，叫做混合內容（mixed content）。htpps頁面在顯示「混合內容」時候，會出現以下問題：

1、載入了混合內容，但會出現警告；

2、不載入混合內容，直接會顯示空白內容；

3、 在載入混合內容之前，會出現類似是否「顯示」，或存在不安全風險而被「阻止」的提示！

但https頁面載入混合內容導致的問題帶來的使用者體驗確實不太好，給使用者造成了一定的麻煩，為了解決https頁面載入http資源出現的問題，我們可以通過以下幾種方式加以改進！

改https初看起來，其實就是乙個網域名稱指向的問題，也許我們只要將http的請求，直接跳轉到https位址去，那麼也就完成了https的切換。實際並不是這麼簡單的。

因為https位址中，如果載入了http資源，瀏覽器將認為這是不安全的資源，將會預設阻止，這就會給你帶來資源不全的問題了，比如：顯示不了，樣式載入不了，js載入不了.

最笨辦法

直接複製原有**, 寫成兩套**,一套為https使用,一套為http使用,http和https各自指向各自服務

全站http換成https

這種方式比較適用於那些http資源不是太多，或容易更換成https的**.

可用辦法

用同一套**, 在後台請求標識好協議,將變數傳到html頁面, 進行協議替換, 如: 後台變數, ，$protocol = 'https://'; 前台接收變數 src='res.aa.com/jquery.js'.

. h5方法，使用js自己載入協議情況，如在body onload='aa()', 在aa() 方法中，將資源按照需求載入進來即可。

.omg

相對協議, 如果你的**同時準備了https資源和http資源, 那麼使用相對協議可以實現根據當前**的協議,瀏覽器自行通過https還是http傳送請求，使用資源協議自適配，比如，當前為https頁面，那麼就是https資源，如果是http頁面，那麼就是http資源。具體方法超簡單：將url的協議(http,https去掉)`

https 頁面中引入 http 資源的報錯

今天在做echart地圖頁面的時候，碰到乙個小問題，頁面報錯如下 原因是我在github page的頁面上，請求了乙個http協議的jq庫，但是我的github是基於https協議的，但script標籤是不受同源政策的限制的，這顯然只是個提醒，如何解決這個問題呢？什麼是相對協議呢？簡而言之，就是將u...

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

1.瀏覽器預設是不允許在 https 裡面引用 http 資源的，一般都會彈出提示框，而且如果在乙個 https 頁面裡動態的引入 http 資源，比如引入乙個 js 檔案，會被直接 block 掉的。chrome v21 之後，在 ssl 加密頁面 embed 非 ssl 的 flash 資源也會...

WPF中引入外部資源

第一步 在vs中建立乙個wpf視窗程式 1 新建resources資料夾，右鍵點選專案，選擇新增，選擇新建資料夾，重新命名為resources 2 將所需的資源如，放在resources資料夾下面，雙擊resources.resx，選擇影象 新增資源 3 新增資源選擇現有檔案，然後選擇你需要資源 4...