An article titled "No More Mixed Messages About HTTPS" was published on Google's blog on October 3, 2019.
To summarize the contents, "I'm going to block mixed content in stages"about it.
In this article, we'll show you how to proactively prevent mixed content from causing unexpected errors.
- The situation where HTTP resources are used in the SSL page is called mixed content.
- Blocking of mixed content will start from December 2019
- Let's fix mixed content early
What is written on this page
What to do as a response to mixed content
First of all, what to do as a response to mixed content is as follows.
- Check if HTTP content is mixed in the SSL-compatible page
- If it is mixed content, re-paste the link to the HTTPS URL.
Now, I will explain how to deal with mixed content.
What is mixed content?
What is mixed content?Content that contains the HTTP source in the source used for the SSL-enabled URLIn English, it is called "mixed content".
The reason why it is called mixed content is that both HTTP (non-SSL) and HTTPS (SSL-enabled) content is loaded to display the same page, and initially HTML is loaded with a secure HTTPS connection. , A situation where other resources (images, videos, CSS, scripts, etc.) are loaded over an insecure HTTP connection.
Modern browsers display warnings about mixed content to let users know that this page contains insecure resources.
The content of "No More Mixed Messages About HTTPS" announced by Google this time is that these mixed contents will be blocked by Google Chrome from December 2019.
In the plan, we will implement it in stages from December 2019 at the start,Chrome 81 and above, scheduled for release in February 2020, will block mixed content by defaultIt will be a specification.
So if your site has mixed content, in ChromeThe site may not display properlyabout it.
How to check mixed content
Now, let's explain how to find mixed content.
How to find a page
This mixed content is unexpectedly scattered on many sites, and there are many sites that are not fully SSL-enabled.
To introduce the confirmation method using an actual example, for example, in Google Chrome, an icon that can judge these is displayed on the left side of the address bar.
The icon on the right side of the URL is the lock mark on the fully SSL-enabled page.
For http URLs that do not support SSL, "i Unprotected communication" is displayed.
The mixed content site is only "i" here.
You can tell it like this, but let's look at a concrete example.
For example, the site of "Ministry of the Environment".
This site supports SSL, so the URL is "https: // ~".
However, as of October 2019, if you look at the left side of the address bar of Google Chrome, "i" is displayed.
Then, when I click this icon, it says "The connection to this site is not completely protected".
This is the mixed content page.
The Ministry of the Environment website was taken as an example, but as of October 2019, other websites related to the Government of Japan are also available.
- Japan Tourism Agency (https://www.mlit.go.jp/kankocho/index.html)
- Japan Coast Guard (https://www.mlit.go.jp/kankocho/index.html)
These sites are also in a mixed content state.
There is no problem with the Ministry of Land, Infrastructure, Transport and Tourism website (https://www.mlit.go.jp/) set up in the root domain, so I wonder if it was missed.
It's a bit off the beaten track, but here's an easy way to tell mixed content.
How to find the relevant part
Next, I will explain how to check where the mixed content is on the page for correction.
For Google Chrome, click on the three-point reader at the far right of the address bar column,
Click "Other Tools"> "Developer Tools" in the displayed pull-down menu.
Then, a screen like this will appear, which is a screen for developers called "Developer Tools".
If you open this screen on the mixed content page, "! I think there is a "!" Mark, so this "! "Click.
Then, at the bottom of the developer tools screen, you'll see a window called "Console" with a yellow error message starting with "Mixed Content".
This is mixed content connected over HTTP.
In the example of the screen of the Ministry of the Environment site,
Mixed Content: The page at'https://www.env.go.jp/'was loaded over HTTPS, but requested an insecure image' http://www.env.go.jp/common/img/measures/24 .jpg'. This content should also be served over HTTPS.
Since there is, you can see that the file "/common/img/measures/24.jpg" is mixed content.
These mixed contents may be different depending on the site or page.
- Images and scripts on the site
- Images and scripts from other sites (domains)
I think there is.
It is recommended to modify all to support SSL, but the support method will differ slightly depending on whether it is a resource in the site or a resource of another site.
How to handle mixed content
I will explain how to deal with each.
For resources in the domain
It's a simple story, but for images and scripts on the same site,Change the linked URL from "http: // ~" to "// ~"will do.
In the example of the Ministry of the Environment site above,
Source code before modification
Code language: HTML, XML (xml)
<img src="http://www.env.go.jp/common/img/measures/24.jpg" alt="写真：食品ロス削減の取組（すぐたべくん）" width="300" height="300">
The place called
Modified source code
Code language: HTML, XML (xml)
<img src="//www.env.go.jp/common/img/measures/24.jpg" alt="写真：食品ロス削減の取組（すぐたべくん）" width="300" height="300">
It is OK if you correct it like this.
You can change it to "https: // ~", but Google's coding guide recommends omitting the protocol notation (http :, https :).
For resources outside the domain
If you use the source of another site, it is linked to the file of the domain other than your own site as shown below.
Example of linking with external resources
Code language: HTML, XML (xml)
<script async defer src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
An example of using the source of other sites is jQuery, but in the case of scripts that are commonly used on many sites, the source code of the developer etc. for the convenience of effective use of browser cache etc. By using, I often use the source of the external site because the display speed is faster.
A detailed explanation of this area will be explained in another article.
As a mixed content correction work, like the resources in the site, the linked URL is changed from "http: // ~" to "// ~", but in the case of external resources, one point There is a note.
That is, "Does the external site of the resource source support HTTPS?"
If the domain where the external resource is installed does not support HTTPS, the link may not work properly and the display of the site may be affected.
First, try entering the URL of the external resource in the URL input field of your browser and check if it is displayed normally.
If the external resource is an image, the image should be displayed, and if it is a script or CSS, the source code should be displayed without error.
After confirming that the external resource is displayed normally, change the linked URL from "http: // ~" to "// ~".
By completing these actions on all pages, you don't have to worry about mixed content.
A tool for efficiently finding mixed content
By now, I hope you understand how to deal with mixed content, but I think it is a very difficult task to check mixed content on all pages.
Therefore, I will also introduce a tool to easily find mixed content.
Screaming Frog SEO Spider
"Screaming Frog SEO Spider" is an SEO tool that collectively acquires site information such as title, h1, Meta Description, and Meta Keywords of the specified site.
You can use it for free up to 500 URLs, and you can get it not only on your own site but also on other sites such as competing sites, so you can use it for competing investigations.
With this tool, you can get a list of URLs that exist on the target site.
From the obtained URLs, you can check the URLs such as images starting with "http: // ~" and know which page is linked from on the site.The time and effort to search for mixed content can be greatly reduced.is.
How to Efficiently Modify Mixed Content in WordPress
If you are using WordPress, you can replace the strings in the site at once.
For batch replacement
- Search Replace DB
If it is supported by a WordPress plugin
- Better Search Replace
I think it's convenient.
For detailed explanations, some people have already written solid explanation articles, so I would like to introduce them.
How to use Search Replace DB
How to use Better Search Replace
So far, I've summarized how to eliminate mixed content, but did you understand?
In February 2020, the world of the web where mixed content is not allowed will come, but this is also from Google that you should manage and manage the website firmly, not just encryption (SSL compatible). It feels like a message.
Take appropriate measures as soon as possible, and try to operate the site without rushing after it is applied.