We all know that HTTPS pages can’t send HTTP requests, so what’s the reason why HTTPS pages can’t send HTTP requests? If there is a need to send, how can we send it? I recently encountered this problem and searched for half a day without searching for reliable answers.With this article.
1. The origin of the story
As I mentioned in Jquery ajax, Axios, and Fetch’s Differences, Fetch, as a different way of requesting from XHR, shows more APIs and promising prospects for meeting ES specifications; let alone supporting POST cross-domain.Just on the job to use the post method to report the results of the data request, I waved a little hand, without the backstage brothers trouble, I can do, the effect of the report into Fetch, delicious.
After a while, the backstage ran, and now there are other HTTP sites that report data. I tried, and the mobile terminal didn’t issue the request at all.
2. Why can’t HTTPS pages send HTTP requests?
Some people talk about cross domain issues. Is that true?
Homologous strategy: 1. protocol same 2. domain name same 3. port same
Although HTTPS access to HTTP does not conform to the same protocol as in the homology strategy, in modern browsers, even if the domain name is the same request, the following error will occur, not cross-domain error.
This is also understandable, after all, the security policy for mixed content is determined on the browser side, but whether it can cross the domain depends on the response header returned by the server, requests are blocked by the browser, there is no cross-domain problem.
So what is mixed content?
Mixed content: Initial HTML content is loaded over secure HTTPS connections, but other resources (such as images, videos, stylesheets, scripts) are loaded over insecure HTTP connections [1]. Because the initial request that the page loads through HTTPS is secure.But it also loads unsafe HTTP content, so it’s called mixed content.
Because HTTP S S S itself means Secure, modern browsers initially display warnings for this type of content to indicate to users that the page contains unsafe resources. But even if a warning is displayed, the page is loaded, and the user’s security is still threatened. So not long ago, CHrome and Firefox directly block such requests.
That’s why HTTPS pages can’t send HTTP.
2. Breakthroughs
Although most browsers now block out HTTP requests on HTTPS pages, we can still send get requests by passively mixing content.
Passive Mixed Content: Content that does not interact with the rest of the page, including images, video, and audio content ，And other resources that can not interact with the rest of the page.
Active Mixed Content: Content that interacts with the page, including scripts, stylesheets, iframes, flash resources, and other code that browsers can download and execute.[1]
Because an attacker can attack secure HTTPS pages with unsafe HTTP content, such requests are severely blocked — and that’s why our Fetch request is blocked. So weYou can send requests by img.src in case of compelling circumstances. Of course, the request method can only be get.
sendHttpRequest: () => {
const img = new Image();
img.src = 'http://xxx.com//Your request '}At this time, browsers will only report warning on the console instead of block.
summary
For HTTPS security policy, browsers block non-secure request (HTTP) requests on HTTPS, but we can cross this security policy by passively mixing content.