Fix insecure content

If you’ve recently forced HTTPS on your site and are noticing some broken images or assets — or if they’re loading properly but you’re seeing “insecure content” warnings and not seeing the padlock in the browser bar – this is likely due to images and other assets being called into the page insecurely.

There are a few ways to tackle this issue, so read on!

Use relative links

When you’re forcing HTTPS, your browser tries to require all site assets to be served via the secure HTTPS protocol. But if you have hard-coded HTTP URLs or active plugins that are using HTTP explicitly, you’ll likely see a warning in the browser address bar instead of the famous padlock, meaning that while your site is loading over HTTPS, it’s calling insecure assets over plain HTTP.

There are a few ways to go about addressing this problem. The best way is to use your browser’s developer tools (and console, specifically) to determine what assets are being called via HTTP. Once you’re aware of those URLs, you can track them down in your site’s content, settings, template files or plugins, and switch them to HTTPS.

In most cases, you can also use relative links with WordPress. For example, if you have a link that looks like this:

http://www.mysite.com/wp-content/uploads/01/image.jpg

You can either replace “http” with “https” to force the image to load securely, or you can make it a relative link by removing the domain entirely, like so:

/wp-content/uploads/01/image.jpg

Relative links follow the lead of whatever protocol the page is already using, so if you’re forcing HTTPS, a relative link will always load over HTTPS automatically.

Update links in the database

Sometimes a site’s database can make reference to HTTP links. If you’re not familiar with the MySQL language, you can use a search-and-replace plugin like Better Search Replace to automate the process of updating HTTP links and URLs to HTTPS in your database. Just be aware that you should use the full protocol and domain together in both the “search” and “replace” fields, like so: searching for “http://example.com” and replacing with “https://example.com”.

Note the full protocol at the beginning and lack of a slash or other text at the end of those domains. Aside from the extra “s,” the two should be identical.

The above techniques should fix the issue, but it will depend somewhat on the site and theme. If your theme stores its settings and other data in unusual ways in the database, or if the theme files themselves contain references to the HTTP version of your domain, you’ll likely need to make a manual replacement. This will also be the case if you have background images stored as HTTP links in your site’s CSS.

Check your theme or page builder’s caching/performance options

Some themes and site builders have their own layer of cache or offer a feature which generates static CSS files. While these things can improve site performance, they can also prevent protocol (HTTP/HTTPS) changes from showing immediately. Linked below are some resources from some of the more popular site builders which explain how to update static CSS files and/or clear theme cache.

• Avada
• Astra
• Beaver Builder
• Elementor
• Divi

Try plugin-based solutions

If you’ve looked through your theme files and plugins but are still not getting the padlock icon, there are plugins available to try to help rewrite HTTP URLs to HTTPS on the fly. There are also plugins available that can help resolve this. Once activated, the plugin will attempt to switch any HTTP URLs to HTTPS so they can be served properly. Note, however, that plugins are not able to change hard-coded URLs in content or in theme or plugin files.

If a plugin doesn’t seem to be working right away, be sure to head to Settings > SSL Insecure Content from the WordPress admin menu and adjust as recommended. Depending on how your site is configured, “Simple” mode may work for you, or you may need to change it to a higher setting.

We also use Why No Padlock to help identify any remaining insecure assets. It’s a very simple website that you can enter your site’s web address into (don’t forget the HTTPS!). Enter your URL and click ‘Run’ to see the results. Any URLs that are being called insecurely will be listed for you to investigate.

If you’re still stuck after that, or if you have any other questions, contact us, and we’ll be happy to do what we can to help identify any other insecure asset issues and recommend fixes.

Need help?

If you have any questions our Happiness Engineers are here to help!