About mixed content block of Google Chrome and how to deal with it

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 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.

Google policy

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.

709fd207 ssl contents

For http URLs that do not support SSL, "i Unprotected communication" is displayed.

55a31379 non ssl contents

The mixed content site is only "i" here.

7a428a9b mixed contents

You can tell it like this, but let's look at a concrete example.
For example, the site of "Ministry of the Environment".

favicons?domain=www.env.go Welcome to the 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,

354ee556 developper tool1

Click "Other Tools"> "Developer Tools" in the displayed pull-down menu.

b00bc6d5 developper tool2

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.

40f187fe developper tool3

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.

cb7a27e1 developper tool4

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.
That's it.

In the example of the Ministry of the Environment site above,

Source code before modification
<img src="http://www.env.go.jp/common/img/measures/24.jpg" alt="写真:食品ロス削減の取組(すぐたべくん)" width="300" height="300">
Code language: HTML, XML (xml)

The place called

Modified source code
<img src="//www.env.go.jp/common/img/measures/24.jpg" alt="写真:食品ロス削減の取組(すぐたべくん)" width="300" height="300">
Code language: HTML, XML (xml)

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 :).

favicons?domain=google.github Google HTML / CSS Style Guide

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
<script async defer src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
Code language: HTML, XML (xml)

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.

d2350609 external site resources

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.

favicons?domain=www.screamingfrog.co Screaming Frog SEO Spider Website Crawler
The industry leading website crawler for Windows, macOS and Ubuntu, trusted by thousands of SEOs and intervention worldwide…

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

https%3A%2F%2Fwheelchair coder
favicons?domain=wheelchair coder [WordPress] Use "Search Replace DB" to replace DB | Wheelchair coder
When creating a site with WordPress, you may come across a situation where you need to replace URLs (domains) at once. For example, when migrating from a development server to a public server ... At that time, did you end up with direct replacement in SQL? Certainly, this ...

How to use Better Search Replace

favicons?domain=hazimaru How to replace characters in WordPress articles at once | HAZIMARU
When writing an article with WordPress, there are times when I want to fix the characters of articles I wrote in the past at once, but it is troublesome to go around all the articles and fix them one by one. I can't do that! Really hard! So this time at once ...


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.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"

When it comes to web marketing
Please feel free to contact us

cocorograph inc.
Miyamasuzaka Building 203, 2-19-15 Shibuya, Shibuya-ku, Tokyo
mail: [email protected]
tel: +81-50-1748-9550
url: https://cocorograph.co/

© 2021 cocorograph Inc.