Fix Broken Pages with Blocked Mixed Content Warnings

How to fix a broken web page when migrating to HTTPS

Probably one of the most common questions we get these days, is “I got an SSL certificate, but my page is broken: how do I fix my web pages?” as there has such a big push to get sites using HTTPS in recent months.

A few months back, I wrote an article about how to upgrade your site to HTTPS in just a few minutes.  Buried deep down at the bottom of that article, I detailed what to do about fixing “Blocked Mixed-Content” warnings.

I thought it was worth re-visiting, as there have been a lot of website operators running into specifically the issue of the broken resources.

So here goes…!

I installed an SSL Certificate, But The Page is Broken

Depending upon the browser, you may get different types of warnings when viewing a web page that contains parts that are not secure.

Blocked Mixed Content Warnings in Different Web Browsers

The web page may not be styled correctly (if some of the blocked resources are stylesheets) or some of the functionality may be broken (if the blocked resources are javascript files).

How do I fix a page that has blocked resources?

You can watch this video, which pretty much explains it, or if you prefer text instructions, I’ve covered that as well.

These instructions were done using Chrome, using the “Developer Interface” (CTRL-SHIFT-I)

  1. Load up your website
  2. Look to the to the address bar — it should say “Secure” to the left of the address bar, and then if you have any mixed content errors, there will be a little “shield” with an X on it to the right of the address bar field.  If you don’t have the shield-with-x icon, then there is nothing further you need to do
  3. Press CTRL-SHIFT-I on your keyboard to bring up the developer interface.
  4. Select the “Network” tab
  5. Reload your page
  6. Detach the developer interface from the sidebar (if it’s docked) to view the loaded resource list better
  7. Scroll through the list to find resources that are highlighted in red, with a status of “Blocked Mixed-Content”
  8. Find those references within your web page’s HTML code and change the protocol to HTTPS
    • you may have had to update your global template DWT file in order to have some of the changes cascade across your entire site
    • you also may have to do a global find and replace, if the resources are within an “editable” region in your page, which would not get updated if you made the change in the master DWT file
  9. Repeat Step 7 & 8 until there are no more blocked resources.
  10. Save your pages
  11. Upload all of your changed web pages
  12. Return to step 1 above to confirm the shield-with-x icon no longer shows, otherwise you may need to investigate the page again with steps 7 & 8.
    • Sometimes there are external resources loaded via import statements in your stylesheets.  The stylesheet will appear secure, but the load of the externally loaded imported stylesheet reference will not.  This typically happens in stylesheets such as “fonts.css” which may include references to “Google Fonts”

Solving the “Broken Web Page After Installing SSL/TLS Certificate” Problem

More or less, you just need to hunt down the resources in your web pages that are loaded over HTTP.  Sometimes the resources will be hidden in @import() calls in embedded stylesheets as I mentioned in step #12 above.

Once you identify the resources that are causing the issue, changing the protocol used to https (from http), and then saving and uploading your pages, your pages will no longer show the blocked mixed-content warnings.