昨天在面試的時(shí)候，最后面試官突然問了一個(gè)問題搁嗓，https的頁面中可以發(fā)起http的請求嗎?我的回答是不可以請求惧蛹，基于https的安全性是不可以發(fā)起請求的，最后面試官又問有沒有什么辦法可以發(fā)起請求鹃共，當(dāng)時(shí)沒答上來，面試完后趕緊找了下相關(guān)的資源驶拱，順便來記錄下霜浴。
引言
首先來設(shè)定一個(gè)場景，自己寫的web項(xiàng)目蓝纲，為什么在https的頁面中會(huì)出現(xiàn)http請求坷随，按正常的開發(fā)流程房铭，主站升級(jí)https后，相關(guān)的站點(diǎn)都會(huì)升級(jí)成https的温眉，這樣說確實(shí)沒錯(cuò)缸匪，但前提是站點(diǎn)里面的內(nèi)容都是自己管理的，但如果有時(shí)候引入其它平臺(tái)的API或者資源時(shí)沒有使用https了类溢，這種情況該怎么辦呢凌蔬？所以就出現(xiàn)了https的頁面中可以發(fā)起http的請求嗎？這樣的問題闯冷。
混合內(nèi)容
https的頁面頁中為什么不能發(fā)起http請求砂心，有人也行會(huì)覺得是同源策略的問題，同源策略的定義是這樣的：1. 協(xié)議相同 2. 域名相同 3.端口相同蛇耀，盡管https訪問http確實(shí)不符合同源策略中的協(xié)議相同辩诞，但反過來http頁面中可以使用https請求。為什么又可以了纺涤，其實(shí)這不是同源策略的問題译暂，而是跟混合內(nèi)容的問題。
以下內(nèi)容參考自MDN
什么是混合內(nèi)容
當(dāng)用戶訪問使用HTTPS的頁面時(shí)撩炊，他們與web服務(wù)器之間的連接是使用SSL加密的外永，是安全的，從而保護(hù)連接不會(huì)受到攻擊拧咳。如果HTTPS頁面包括由普通明文HTTP連接加密的內(nèi)容伯顶，那么連接只是被部分加密：非加密的內(nèi)容可以被入侵，并且可以被中間人攻擊者修改骆膝，因此連接不再受到保護(hù)祭衩。當(dāng)一個(gè)網(wǎng)頁出現(xiàn)這種情況時(shí)，它被稱為混合內(nèi)容頁面阅签。
混合內(nèi)容又分為主動(dòng)混合內(nèi)容和被動(dòng)混合內(nèi)容掐暮。
- 被動(dòng)混合內(nèi)容是指不與頁面其余部分進(jìn)行交互的內(nèi)容，包括圖像愉择、視頻和音頻內(nèi)容 劫乱，以及無法與頁面其余部分進(jìn)行交互的其他資源织中。
- 主動(dòng)混合內(nèi)容指的是能與頁面交互的內(nèi)容锥涕，包括瀏覽器可下載和執(zhí)行的腳本、樣式表狭吼、iframe层坠、flash 資源及其他代碼。
突破限制
但有時(shí)候就是想在https中發(fā)起http請求刁笙，碰到這情況會(huì)怎么辦了破花？其實(shí)可以借助被動(dòng)混合內(nèi)容的加載方便來突破這一層限制谦趣，使用加載圖片的方式來發(fā)起請求，如下所示：
const img = new Image();
img.src = 'http的請求地址'
