前端靜態文件如何應對HTTPS的到來

近幾年，愈來愈多的網站開始支持https，咱們能夠看到國外的好比github、谷歌、facebook；國內的有百度、淘寶、博客園、coding.net、worktile等一系列的網站。

我再最近的開發中，涉及到了一部分。我再頁面中加入廣告的代碼，可是業務線的同事激動的告訴我他們要全站支持HTTPS，這對於我來講既興奮又緊張，我固然對新技術充滿好奇，可是我歷來沒有這方面的經驗，爲此我仔細的調查並找運維大神們問了一圈，我簡單整理了一下，說一下有關於前端這邊HTTPS的應對方案。

那麼什麼是HTTPS、它帶來了什麼？

　　從名字來看，它比http多了一個「s」，這個「s」表示安全。目的在於提供更安全的HTTP通道，即HTTP下加入SSL層而且加密。太詳細的我就再也不這裏說了，再說我就要抄百度百科了。簡單來講，不一樣於HTTP使用80端口，HTTPS使用443端口，HTTPS還須要一個付費的CA證書來保證安全。從另外一個角度講安全也帶來了開銷和通訊效率的下降，這就要看產品的一個取捨了。

HTTP給前端頁面帶來哪些挑戰，不改行不行？

一、HTTPS下不能調用HTTP靜態資源：

　　瀏覽器默認是不容許在HTTPS裏面引用HTTP資源的，通常都會彈出提示框，用戶確認後纔會繼續加載，用戶體驗很是差。並且若是在一個HTTPS頁面裏動態的引入HTTP資源，好比引入一個js文件，會被直接block掉的。Chrome 21以後，在SSL加密頁面embed非SSL的Flash會怎樣呢？會被默默的屏蔽掉，只留下一句console報告。瀏覽器爲了安全，https下跨協議調用http的是不行的，控制檯裏會有警告。因此你只能去找https協議的 css、js資源了。也有文章說https頁面中可引用http的圖片，我試了一下，發現雖然不會報紅錯，可是會有黃色的提醒。最好的方法是使用https的資源。

二、HTTPS下不能調用HTTP的異步請求：

　　若是在https的頁面中使用http的ajax調用。會提示跨域的報錯，很明顯有違ip地址、端口、協議的跨域限制。有兩種方案：其一試調用https的ajax，既然頁面都升級到https了那麼服務接口升級也是應該的。其二既然跨域了，咱們能夠考慮jsonp的方案，可是jsonp 發出的是js文件請求（再次強調jsonp和ajax是兩回事）。因此同上一個問題https中應用靜態資源也必須是https的。因此即便是jsonp的方式也要提供jsonp接口的服務器支持https。看來異步請求也要升級到https才行。

三、a標籤好很差用？

　　這個仍是好用的，即便是https的頁面也能夠跳轉到http的連接。

四、不改行不行：

　　經過上面兩個問題，不改確定是不行的。頁面的靜態用不了，請求也報錯，這確定是不行的。

前端應該如何應對？

一、靜態文件拉取：

　　首先要保證在https的頁面中拉取http的靜態資源。那麼靜態資源就必須支持https。這方面就要去抱運維大神們的大腿了，申請證書，配置到須要使用的服務器上（咱們應該事先提供會用到哪些靜態資源的域名）。確保能夠獲取https的靜態資源後。咱們能夠考慮下一步。

二、服務升級：

　　一樣的拿到證書後，要保證ajax的jsonp的接口支持https。這樣服務端的工做就支持的差很少了。

三、頁面引用：

　　既然咱們的靜態文件支持了http和https兩種協議。可是靜態文件並不知道頁面是什麼協議。咱們應該怎麼適應呢？引用資源的url中咱們應該使用相對協議，好比

src=「http://a.com/static/a.js」

應該改成以下：去掉http:

src=「//a.com/static/a.js」

以「//」開頭表示相對協議，頁面使用的是什麼協議，文件請求也自動是什麼協議。一樣的異步請求也應該這樣適應。

四、對於老數據應該如何應對：

　　好多的url中直接就帶有http:// 那是過去留下來的歷史問題。這些url存在數據庫中，經過同步、異步的接口來到頁面上，因爲https的問題咱們不能直接使用，咱們就要經過js改造這些http：。簡單來講，就是一個正則替換

(「http://abc.com/index.html」).replace(/http:/g, "")

　　可是對於異步返回的json中，咱們不能遍歷每個屬性去替換，由於咱們事先不瞭解json的結構，嵌套層級數，一個一個遍歷也過低效了。我這裏提供一個比較方便的方法，就是現將json序列化成字符串，再全局替換後反序列化。

1 var relativeHttp = function(obj){
2         var strObj = JSON.stringify(obj);
3         var removeHttp = strObj.replace(/http:/g, "");
4         return JSON.parse(removeHttp);
5     }

 

五、a標籤跳轉

　　由於https的頁面中能夠跳轉到http的頁面。這裏有兩個選擇是寫絕對協議仍是相對協議，由於若是使用相對協議，跳轉的時候會帶上頁面的協議，咱們不能保證目標地址是否支持本頁面的協議，因此，建議你使用絕對協議寫到頁面中

<a href="http://abc.cn/product/1290.html" target="_blank"></a>

而不是：

<a href="//abc.cn/product/1290.html" target="_blank"></a>

六、相對協議，永遠都好用嗎？

　　相對協議在放進標籤、js異步請求是都好用。可是當url的參數中須要加入url時，就不是很好用了。咱們的「//」並無成功，咱們須要根據頁面的狀況加入協議，拼裝成完整的url，咱們怎麼獲取協議呢？其實瀏覽器爲咱們提供了這種API  window.location.protocol  以下圖：

　　咱們拿到協議後能夠根據須要來使用它。