如何在HTTPS裏調用HTTP資源不出現提示框

什麼是HTTPS？

HTTPS（全稱：Hypertext Transfer Protocol over Secure Socket Layer），是以安全爲目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層，HTTPS的安全基礎是SSL，所以加密的詳細內容就須要SSL。 它是一個URI scheme（抽象標識符體系），句法類同http:體系。用於安全的HTTP數據傳輸。https:URL代表它使用了HTTP，但HTTPS存在不一樣於HTTP的默認端口及一個加密/身份驗證層（在HTTP與TCP之間）。這個系統的最初研發由網景公司進行，提供了身份驗證與加密通信方法，如今它被普遍用於萬維網上安全敏感的通信，例如交易支付方面。

問題描述

瀏覽器默認是不容許在HTTPS裏面引用HTTP資源的，通常都會彈出提示框，用戶確認後纔會繼續加載，用戶體驗很是差。並且若是在一個HTTPS頁面裏動態的引入HTTP資源，好比引入一個js文件，會被直接block掉的。Chrome 21以後，在SSL加密頁面embed非SSL的Flash會怎樣呢？會被默默的屏蔽掉，只留下一句console報告。

解決方案

可使用iframe的方式引入HTTP資源，好比在HTTPS裏面播放優酷的視頻，咱們能夠先在一個HTTP的頁面裏播放優酷視頻，而後將這個頁面嵌入到HTTPS頁面裏就能夠了，另一個典型的例子是在HTTPS頁面裏經過AJAX的方式請求HTTP資源，Chrome是不容許直接AJAX請求HTTP的。若是兩個頁面的內容均可以控制的話，當前窗口能夠iframe窗口進行通訊的。

如何避免在HTTPS裏面引用HTTP?

對於同時支持HTTPS和HTTP的資源，引用的時候要把引用資源的URL裏的協議頭去掉，例如：//www.example.com/scirpt.js，這樣至關於相對路徑，即瀏覽器會自動根據當前是HTTPS仍是HTTP來給資源URL補上協議頭的，能夠達到無縫切換。參考：使用相對Url無縫切換HTTP-HTTPS

總結

若是是站內資源，最好是HTTP和HTTPS各一份，而後再經過相對路徑的方式引用，這樣就能夠完美的解決掉這個問題了，好比Google首頁就是2種方式都提供了。對於站外的資源若是不支持HTTPS那就只能用iframe了

來自: BorisHuai前端修煉 > 如何在HTTPS裏調用HTTP資源不出現提示框