HTTPS的頁面發送不了HTTP要求？——關於夾雜內容

我們都曉得HTTPS的頁面是發送不了HTTP要求的，那末是什麼緣由致使HTTPS頁面不能發送HTTP要求呢？如果有發送的需求，怎樣才發送？近來恰好遇到了這個題目，而且搜了半天沒搜到靠譜的答案，所以有了本文。

1. 故事劈頭

我在《Jquery ajax, Axios, Fetch區分之我見》中提到過，Fetch作為一種不同於XHR的要求體式格局，展現了它更多API，以及相符ES範例的優越遠景；更不必說它能夠支撐POST跨域。恰好工作上有效post要領上報結果數據的要求，我小手一揮，不必背景兄弟們麻煩了，我能夠搞定，把結果上報換成了Fetch，美滋滋。

過了一段時間，背景跑過來講，如今還有些其他HTTP站點的數據上報。我試了一下，挪動端根本就沒有發出這個要求，這……

2. 為何HTTPS頁面發送不了HTTP要求

有些人說是跨域題目，真的是如許嗎？

同源戰略：1. 協定雷同 2. 域名雷同 3.端口雷同

只管HTTPS接見HTTP確切不相符同源戰略中的協定雷同，然則在當代瀏覽器里，縱然是域名雷同的要求，也是會出現以下報錯，而不是跨域報錯。

這也很好明白，畢竟夾雜內容的平安戰略是在瀏覽器端剖斷的，而是不是能跨域要看服務器返回的Response頭，要求都被瀏覽器block掉了，也就不存在是不是跨域的題目。

那什麼是夾雜內容？

夾雜內容：初始 HTML 內容經由過程平安的 HTTPS 銜接加載，但其他資本（比方，圖象、視頻、樣式表、劇本）則經由過程不平安的 HTTP 銜接加載[1]。由於頁面經由過程 HTTPS 加載的初始要求是平安的，然則又加載了不平安的HTTP內容，因而稱之為夾雜內容。

由於HTTPS的S自身就是Secure的意義，當代瀏覽器最初會針對此範例的內容顯現正告，以向用戶表明此頁面包含不平安的資本。然則縱然顯現正告，頁面也已加載，用戶的平安依然受到了要挾。所以沒過多久，Chrome和Firefox就直接阻斷掉了這類的要求。

這就是HTTPS頁面為何發送不了HTTP的緣由。

2. 打破體式格局

只管如今主流瀏覽器都已block掉了HTTPS頁面上的HTTP要求，然則我們照樣能夠經由過程被動夾雜內容來發送get要求。

被動夾雜內容:指的是不與頁面其餘部分舉行交互的內容，包含圖象、視頻和音頻內容 ，以及沒法與頁面其餘部分舉行交互的其他資本。

主動夾雜內容: 指的是能與頁面交互的內容，包含瀏覽器可下載和實行的劇本、樣式表、iframe、flash 資本及其他代碼。[1]

由於進擊者能夠經由過程不平安的HTTP內容來進擊平安的HTTPS頁面，所以這類要求被嚴厲阻斷掉了————這也是為何我們的Fetch要求被幹掉了。所以我們能夠在必不得已的情況下，用img.src的體式格局來發送要求。固然，要求要領只能是get。

sendHttpRequest: () => {
const img = new Image();
img.src = 'http://xxx.com//你的要求'
}

這時候，瀏覽器只會在控制台報warning，而不會block我們的要求。

總結

出於HTTPS的平安戰略，瀏覽器會阻斷HTTPS上的非平安要求（HTTP）要求，然則我們能夠運用被動夾雜內容的體式格局來逾越這個平安戰略。

參考文章：

1. 《什麼是夾雜內容》