作者：李成文；

前言

最近在周報(bào)系統(tǒng)和格子機(jī)項(xiàng)目中都出現(xiàn)了在測(cè)試服能夠正常運(yùn)行，部署到正式服之后就出現(xiàn)問(wèn)題，這些問(wèn)題的原因就是：一般測(cè)試服都沒(méi)有安全性的需求，所以都是使用http協(xié)議。但是正式服現(xiàn)在一般都是使用更加安全的https協(xié)議。

問(wèn)題

問(wèn)題的關(guān)鍵就是在于這個(gè)協(xié)議的問(wèn)題，瀏覽器默認(rèn)是不允許在https里面調(diào)用http資源的。在這里根據(jù)我所遇到的情況大概是這樣子的：

1. 在IE瀏覽器瀏覽器中使用鏈接加載資源時(shí)會(huì)彈出一個(gè)對(duì)話框：

avatar

2. 在微信的瀏覽器中引入圖片資源時(shí)會(huì)報(bào)一個(gè)警告(但是圖片會(huì)正常加載)：

avatar

3. 在https頁(yè)面中向http地址發(fā)起ajax請(qǐng)求時(shí)，瀏覽器會(huì)阻止掉這個(gè)請(qǐng)求，然后報(bào)一個(gè)Mixed Content的錯(cuò)誤。
4. 在https頁(yè)面中使用webSocket時(shí)需要注意，必須使用wss協(xié)議才能夠發(fā)起連接，不然也會(huì)報(bào)錯(cuò)：

avatar

問(wèn)題分析

https協(xié)議與https協(xié)議的區(qū)別

在解決這個(gè)問(wèn)題之前首先需要知道https是什么，與http的區(qū)別在什么地方。

https安全超文本傳輸協(xié)議：

它是一個(gè)安全通信通道，它基于HTTP開(kāi)發(fā)，用于在客戶計(jì)算機(jī)和服務(wù)器之間交換信息，它使用安全套接字層(SSL)進(jìn)行信息交換，簡(jiǎn)單來(lái)說(shuō)它是HTTP的安全版。它是由Netscape開(kāi)發(fā)并內(nèi)置于其瀏覽器中，用于對(duì)數(shù)據(jù)進(jìn)行壓縮和解壓操作，并返回網(wǎng)絡(luò)上傳送回的結(jié)果。HTTPS實(shí)際上應(yīng)用了Netscape的安全全套接字層（SSL）作為HTTP應(yīng)用層的子層。（HTTPS使用端口443，而不是象HTTP那樣使用端口80來(lái)和TCP/IP進(jìn)行通信。）SSL使用40 位關(guān)鍵字作為RC4流加密算法，這對(duì)于商業(yè)信息的加密是合適的。HTTPS和SSL支持使用X.509數(shù)字認(rèn)證，如果需要的話用戶可以確認(rèn)發(fā)送者是誰(shuí)?？偟膩?lái)說(shuō)，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議要比http協(xié)議安全。

在URL前加https://前綴表明是用SSL加密的，你的電腦與服務(wù)器之間收發(fā)的信息傳輸將更加安全。 Web服務(wù)器啟用SSL需要獲得一個(gè)服務(wù)器證書(shū)并將該證書(shū)與要使用SSL的服務(wù)器綁定。

https與http的區(qū)別：

• https協(xié)議需要到ca申請(qǐng)證書(shū)，一般免費(fèi)證書(shū)很少，需要交費(fèi)。
• http是超文本傳輸協(xié)議，信息是明文傳輸，https 則是具有安全性的ssl加密傳輸協(xié)議。
• http和https使用的是完全不同的連接方式用的端口也不一樣,前者是80,后者是443。
• http的連接很簡(jiǎn)單,是無(wú)狀態(tài)的。
• HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議 要比http協(xié)議安全。

什么是混合內(nèi)容（Mixed Content）

很明顯上面報(bào)的錯(cuò)都是與Mixed Content是有關(guān)系的，Mixed Content就是：

當(dāng)用戶訪問(wèn)使用HTTPS的頁(yè)面時(shí)，他們與web服務(wù)器之間的連接是使用SSL加密的，從而保護(hù)連接不受嗅探器和中間人攻擊。

如果HTTPS頁(yè)面包括由普通明文HTTP連接加密的內(nèi)容，那么連接只是被部分加密：非加密的內(nèi)容可以被嗅探者入侵，并且可以被中間人攻擊者修改，因此連接不再受到保護(hù)。當(dāng)一個(gè)網(wǎng)頁(yè)出現(xiàn)這種情況時(shí)，它被稱(chēng)為混合內(nèi)容頁(yè)面。

詳情可見(jiàn)：https://developer.mozilla.org/zh-CN/docs/Security/MixedContent

解決方案

相對(duì)協(xié)議

如果你的網(wǎng)站同時(shí)準(zhǔn)備了https資源和http資源，那么使用相對(duì)協(xié)議可以實(shí)現(xiàn)根據(jù)當(dāng)前網(wǎng)站的協(xié)議，瀏覽器自行選擇通過(guò)https還是http發(fā)起請(qǐng)求，而相對(duì)協(xié)議也是非常簡(jiǎn)單的就是講URL的協(xié)議(http、https)去掉。<img src="http://domain.com/img/logo.png">

這里一定要注意必須是網(wǎng)站同時(shí)有https和http的資源才會(huì)有效，否則請(qǐng)求會(huì)失敗，另外一般在正式服上線時(shí)都會(huì)劉改HOST地址，所以一般的ajax請(qǐng)求并不會(huì)出現(xiàn)問(wèn)題，主要要注意的是一些單獨(dú)的請(qǐng)求地址會(huì)出現(xiàn)這樣的問(wèn)題，如七牛云上傳所使用的地址是單獨(dú)的，所以有可能在正式服上線時(shí)沒(méi)有注意到，另外就是使用websocket時(shí)檢查一下正式服的socket地址是否是wss協(xié)議。

總結(jié)

這次第一個(gè)出現(xiàn)的問(wèn)題是在周報(bào)系統(tǒng)七牛上傳文件部分出現(xiàn)的，由于之前周報(bào)系統(tǒng)正式服可以通過(guò)http訪問(wèn)到，所以沒(méi)有出現(xiàn)問(wèn)題，但是最近正式服換成了https，就導(dǎo)致文件無(wú)妨上傳，當(dāng)時(shí)在碰到問(wèn)題時(shí)感覺(jué)比較奇怪，明明測(cè)試服是正常的，為什么正式服會(huì)不正常，由于沒(méi)有正式服的賬號(hào)，所以調(diào)試的時(shí)候是在別人的電腦上面，當(dāng)時(shí)控制臺(tái)好像并沒(méi)有打印報(bào)錯(cuò)信息（有可能是自己沒(méi)有注意到），只是發(fā)現(xiàn)了在上傳文件時(shí)的第二個(gè)請(qǐng)求無(wú)法發(fā)送出去，當(dāng)時(shí)也并沒(méi)有狀態(tài)碼（這里其實(shí)是請(qǐng)求根本就沒(méi)有發(fā)送出去，被瀏覽器給block掉了）。所以在解決問(wèn)題的時(shí)候并沒(méi)有一個(gè)方向，最后是在老大的幫助下才了解到問(wèn)題的所在的。

而在這一次問(wèn)題中暴露出了一些問(wèn)題，比如：

1. 在確定測(cè)試服正常的情況下自我感覺(jué)正式服應(yīng)該不會(huì)有錯(cuò)，帶著這樣的心理去找問(wèn)題就會(huì)忽視掉很多的細(xì)節(jié)問(wèn)題。
2. 當(dāng)時(shí)只是發(fā)現(xiàn)請(qǐng)求沒(méi)發(fā)送出去，卻沒(méi)有去找請(qǐng)求發(fā)送失敗的原因。
3. 沒(méi)有去尋找控制臺(tái)的報(bào)錯(cuò)信息（當(dāng)時(shí)沒(méi)有發(fā)現(xiàn)有錯(cuò)誤信息，不知道是用戶瀏覽器的問(wèn)題還是自己疏忽了，這個(gè)是本次沒(méi)有找到問(wèn)題根源的關(guān)鍵所在），只是去關(guān)注了Network面板請(qǐng)求發(fā)送情況。

第二次是格子機(jī)的socket連接失敗，這個(gè)問(wèn)題主要是自己在拿到后端給的正式服socket地址時(shí)沒(méi)有檢查，沒(méi)有發(fā)現(xiàn)地址的協(xié)議是ws的導(dǎo)致在測(cè)試時(shí)才發(fā)現(xiàn)這個(gè)問(wèn)題，在以后拿到后端給的地址時(shí)還是需要檢查一下再去使用。

參考資料

• 相對(duì)協(xié)議URL