Mixed content summary

This article introduces Mixed content, the main content is as follows:

1. Subject source
2. What is mixed content;
   2.1 Mixed content classification;
   2.2 Browser strategy;
3. How to self-check whether there is mixed content;
4. How to avoid mixed content when developing.

Subject source

I didn't know that the front end also had the term mixed content. When I was developing the project recently, there was no problem in the test environment. When I posted it online, I found that there was no problem with the page, but the console had warning messages. So I took some time to study, and then I found the word mixed content. The specific alarm information is as follows:

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'. This request was automatically upgraded to HTTPS, For more information see <URL>

Click the error arrow to see more detailed information:

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure element 'http://...' . This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

Then, after searching some materials based on the alarm information, the problem was found, and the cost article was output.

I have to sigh here. Chrome’s error prompts are well done. After reading the error message, you basically know what the problem is.

What is mixed content

When initial HTML page time is over https request additional resources if the requested page, such as images, scripts and other resources, through the http request, then the page is a mixed content pages.

Here, initial HTML page instead of the HTML page is that the HTML page can also be embedded in the page through an iframe. The html page embedded through the iframe does not belong to the initial HTML page .

Why is this word derived? It is because such pages are unsafe and need to be circumvented by developers. Therefore, such pages are named separately to attract developers' attention.

Mixed content category

Mixed content is divided into two categories: mixed passive content and mixed active content. I personally feel that these two categories should be distinguished according to the degree of influence of the attack. The influence of passive is smaller, and the influence of active is larger.

Mixed passive content mainly includes pictures, videos, audio resources, etc.; Mixed active content mainly includes scripts, style sheets, iframes, etc.

Browser strategy

1. For Mixed active content, the browser will not load;
2. For Mixed passive content, the browser may not load it; it may also automatically upgrade the resource protocol to https and then load it. If the https resource fails to load, the resource will not be displayed.

For mixed passive content, the ultimate goal of the browser is the same as for mixed active content, which is not loaded. Only there will be a transition period, so if there is mixed passive content on the page, it is better to upgrade as soon as possible. In case the browser does not support it someday, this part of the content on the page will not be displayed.

How to self-check whether there is mixed content

Take the chrome browser as an example. If there is mixed content on the page, chrome will log it in the console panel of the developer tools. Error message and in front of Subject Source in almost including error reason , error resources , treatment (or does not load automatically upgrade) and other helpful information .

How to avoid mixed content when developing

Here is a summary of ways to avoid mixed content, mainly from the perspective of resources:

1. Resource deployment http and https two versions;

2. When loading resources, distinguish between http and https environments:

   • In the script, you can judge the current environment through window.location.protocol, and then do different processing;
   • When loading resources through script, the src attribute can remove the protocol and directly start with'//'. For example, src="https://www.baidu.com/..." can be directly changed to src="//www.baidu.com/..." , so when the script is loaded on the http website, the loaded is "http://www.baidu.com/..." , and when the https website is loaded, the loaded is "https://www.baidu.com/..." .

to sum up

I hope you can gain something. If you make any mistakes, please leave a message for discussion.

Reference

1. No More Mixed Messages About HTTPS
2. What is mixed content?
3. MDN mixed content