What is mixed content and why Chrome is blocking it
Security Website What

What is mixed content and why Chrome is blocking it

Mishel Shaji
Mishel Shaji

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 that https:// pages can only load secure https:// subresources. In a series of steps outlined below, we’ll start blocking mixed content (insecure http:// subresources on https:// 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-requests

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