近幾年，越來越多的網站開始支持https，我們可以看到國外的比如github、谷歌、facebook；國內的有百度、淘寶、博客園、coding.net、worktile等一系列的網站。
我再最近的開發中，涉及到了一部分。我再頁面中加入廣告的代碼，但是業務線的同事激動的告訴我他們要全站支持HTTPS，這對於我來說既興奮又緊張，我當然對新技術充滿好奇，但是我從來沒有這方面的經驗，為此我仔細的調查並找運維大神們問了一圈，我簡單整理了一下，說一下有關於前端這邊HTTPS的應對方案。
那么什么是HTTPS、它帶來了什么？
從名字來看，它比http多了一個“s”，這個“s”表示安全。目的在於提供更安全的HTTP通道，即HTTP下加入SSL層並且加密。太詳細的我就不再這里說了，再說我就要抄百度百科了。簡單來說，不同於HTTP使用80端口，HTTPS使用443端口，HTTPS還需要一個付費的CA證書來保證安全。從另一個角度講安全也帶來了開銷和通信效率的降低，這就要看產品的一個取舍了。
HTTP給前端頁面帶來哪些挑戰，不改行不行？
1、HTTPS下不能調用HTTP靜態資源：
瀏覽器默認是不允許在HTTPS里面引用HTTP資源的，一般都會彈出提示框，用戶確認后才會繼續加載，用戶體驗非常差。而且如果在一個HTTPS頁面里動態的引入HTTP資源，比如引入一個js文件，會被直接block掉的。Chrome 21之后，在SSL加密頁面embed非SSL的Flash會怎樣呢？會被默默的屏蔽掉，只留下一句console報告。瀏覽器為了安全，https下跨協議調用http的是不行的，控制台里會有警告。所以你只能去找https協議的 css、js資源了。也有文章說https頁面中可引用http的圖片，我試了一下，發現雖然不會報紅錯，但是會有黃色的提醒。最好的方法是使用https的資源。
2、HTTPS下不能調用HTTP的異步請求：
如果在https的頁面中使用http的ajax調用。會提示跨域的報錯，很明顯有違ip地址、端口、協議的跨域限制。有兩種方案：其一試調用https的ajax，既然頁面都升級到https了那么服務接口升級也是應該的。其二既然跨域了，我們可以考慮jsonp的方案，但是jsonp 發出的是js文件請求（再次強調jsonp和ajax是兩回事）。所以同上一個問題https中應用靜態資源也必須是https的。所以即使是jsonp的方式也要提供jsonp接口的服務器支持https。看來異步請求也要升級到https才行。
3、a標簽好不好用？
這個還是好用的，即使是https的頁面也可以跳轉到http的鏈接。
4、不改行不行：
通過上面兩個問題，不改肯定是不行的。頁面的靜態用不了，請求也報錯，這肯定是不行的。
前端應該如何應對？
1、靜態文件拉取：
首先要保證在https的頁面中拉取http的靜態資源。那么靜態資源就必須支持https。這方面就要去抱運維大神們的大腿了，申請證書，配置到需要使用的服務器上（我們應該事先提供會用到哪些靜態資源的域名）。確保可以獲取https的靜態資源后。我們可以考慮下一步。
2、服務升級：
同樣的拿到證書后，要保證ajax的jsonp的接口支持https。這樣服務端的工作就支持的差不多了。
3、頁面引用：
既然我們的靜態文件支持了http和https兩種協議。但是靜態文件並不知道頁面是什么協議。我們應該怎么適應呢？引用資源的url中我們應該使用相對協議，比如
src=“http://a.com/static/a.js”
應該改為如下：去掉http:
src=“//a.com/static/a.js”
以“//”開頭表示相對協議，頁面使用的是什么協議，文件請求也自動是什么協議。同樣的異步請求也應該這樣適應。
4、對於老數據應該如何應對：
好多的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 }
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>
6、相對協議，永遠都好用嗎？
相對協議在放進標簽、js異步請求是都好用。但是當url的參數中需要加入url時，就不是很好用了。我們的“//”並沒有成功，我們需要根據頁面的情況加入協議，拼裝成完整的url，我們怎么獲取協議呢？其實瀏覽器為我們提供了這種API window.location.protocol 如下圖：
我們拿到協議后可以根據需要來使用它。