How to fix a broken web page after migrating to HTTPS

Originally Posted at i3dthemes.com -- read the full article

One of the most common questions we get these days, is “I installed an SSL/TLS 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 this issue of the broken resources once they've installed an SSL/TLS certificate.

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.

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?

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

1. Repeat Step 7 & 8 until there are no more blocked resources.
2. Save your pages
3. Upload all of your changed web pages
4. 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”

Originally Posted at i3dthemes.com -- read the full article