HTTPS Mixed Content Locator Chrome Extension

In today’s age of digital privacy and security, the need and expectation of users to have secure connections to the websites they visit is on the rise. By serving your site’s content over HTTPS, you ensure the traffic between your server and clients are encrypted. In Google Chrome, these HTTPS connections are visually reflected with a green padlock . Google has been pushing for websites to use HTTPS by updating Google Search results to favor HTTPS content. When migrating your site from HTTP to HTTPS, you will need to ensure all of the content on your page is secured before your page is considered secure by chrome. The insecure HTTP content served on an HTTPS page is considered mixed content.

Google and Mozilla both have good write ups on what mixed content is, and it can be broken down into two categories: passive mixed Content and active mixed Content.

The HTTPS Mixed Content Locator Chrome Extension will help you identify the mixed content on your page so that you quickly complete migrating your site from HTTP to HTTPS. The extension supports locating the following mixed content:
Passive Mixed Content (have http:// urls in their src attribute)

• img
• audio
• video
• source

Active Mixed Content

• iframe (with http:// url in the src attribute)
• script (with http:// url in the src attribute)
• object (with http:// url in the data attribute)
• link (with rel=”stylesheet”)

We can visit Google’s example page for passive mixed content to see how the extension works. Once the page loads, the extension’s badge will update with the number of mixed content detected on the page . Click the extension icon to see what mixed content was detected:

The mixed content will be displayed in rows, containing the html tag information as well as the insecure element url. Two buttons are located next to the mixed content:
 Located Button: This button appears for passive mixed content and will highlight the element on the page when clicked. Only one element will be highlight at a time.
 Copy Button: This button copies the url of the mixed content into your clipboard.

If we click the locate button of the first audio mixed content, we can easily identify it on the page. This will make it easier for us to locate and fix the element src if using a gui editor like WordPress for our site.

To see an example of active mixed content, we can visit another one of Google’s example pages.

We can click on the copy button of the iframe to copy the url to our clipboard.The locate button is not available for active mixed content.

After clicking the copy button, the full url will be copied to our clipboard: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html. We can use the full url to quickly search through the source of our insecure web page and fix the mixed content by changing it from http:// to https://.

This has been an overview of Pericror’s HTTPS Mixed Content Locator chrome extension to help identify and resolve mixed content issues on your site. If you have any suggestions or improvements, feel free to leave them in the comments!