Google recently announced the Chrome browser will gradually block web pages with mixed content starting December 2019. Publishers are urged to check their websites to make sure there are no mixed content.
Today we’re announcing that Chrome will gradually start ensuring thathttps://pages can only load securehttps://subresources. In a series of steps outlined below, we’ll start blocking mixed content (insecurehttp://subresources onhttps://pages) by default. This change will improve user privacy and security on the web, and present a clearer browser security UX to users. - Chromium blog
What is mixed content?
A website can serve content over a secure connection (HTTPS) and insecure connection (HTTP). HTTPS helps prevent intruders from tampering with the communications between websites and the browser by encrypting it. A secure connection is important if you are sharing sensitive data with the website.
Many websites are moving to HTTPS. But when a secure website tries to load some static contents such as HTML, CSS or images from insecure (HTTP) sources, it results in mixed content.
Find mixed content
Manually finding mixed content can be time consuming, depending on the number of pages a website has.
Finding mixed content by visiting your site
When visiting a secure HTTPS page in Google Chrome, you get alerts about mixed content in the browser console.
You can open the console by right-clicking the page, selecting Inspect Element, and then selecting Console.
Preventing Mixed Content
Mixed content can be removed by replacing all HTTP connections with HTTPS. But this is not an easy task for larger websites. So you can use content security policy to instruct the browser to notify you about mixed content.
Large websites can useupgrade-insecure-requests Content Security Policy directive to instruct the browsers to force the connection over HTTPS.
You can enable this behavior either by sending a Content-Security-Policy header with this directive:
Content-Security-Policy: upgrade-insecure-requestsOr by embedding that same directive inline in the document's <head> section:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Note: This is not supported by all browsers.
WordPress users can use Really Simple SSL plugin to fix mixed content.
