Troubleshooting a Page with Mixed Content

If the HTTPS version of a page shows an i surrounded by a circle in Chrome and Firefox (Safari will not display the green lock icon you might expect on a secure site), and if you click that you see "Your connection to this site is not fully secure" that means that some elements of the page are being served over HTTP. This can happen even when your SSL certificate is valid. The dialog looks like something like this:

Chrome browser dialog box showing "Your connection to this site is not fully secure"

To determine which element is being served insecurely, you have some tools at your disposal:

Chrome's JavaScript Console

In the case of the above website, the Chrome JavaScript Console will show you what elements went over HTTP. To get there, click the View menu, the Developer, then JavaScript Console. The pane you see will look something like this:

Chrome's JavaScript console showing what elements are causing mixed content warnings.

Other Tools

A command line alternative is mixed-content-scan, which will require installing PHP's Composer dependency manager as well. Once you get it installed, you can run the following command:

$ .composer/vendor/bin/mixed-content-scan https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html --no-crawl
[2017-12-08 14:51:30] MCS.NOTICE: Scanning https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html
[2017-12-08 14:51:30] MCS.ERROR: 00000 - https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html
[2017-12-08 14:51:30] MCS.WARNING: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html
[2017-12-08 14:51:30] MCS.WARNING: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/style.css
[2017-12-08 14:51:30] MCS.WARNING: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.js
[2017-12-08 14:51:30] MCS.NOTICE: Scanned 1 pages for Mixed Content

In this example, it showed us what elements were being served over HTTP. Note that even containing a form with an action that points to an HTTP endpoint can trigger mixed content warnings.

Fixing

To fix this, ensure that all of the elements (images, JavaScript scripts and libraries, form actions, etc.) are all pointing to HTTPS resources. You may need to edit your theme's code to do this and check to see the URLs that modules add to ensure they point to URLs that start with https://.

Contact supportStill need assistance? Contact Acquia Support