Fixing Mixed Content Errors After Installing SSL

You have successfully installed an SSL certificate on your SakuraHost account, and your site now loads over HTTPS. However, your browser still shows a warning icon instead of the reassuring green padlock. The culprit is almost certainly mixed content — a common issue that occurs when an HTTPS page loads some resources over insecure HTTP. This guide explains what mixed content is, how to identify it, and step-by-step methods to fix it across different platforms.

What Is Mixed Content?

Mixed content occurs when an HTML page loaded over a secure HTTPS connection includes resources — such as images, scripts, stylesheets, iframes, or fonts — that are loaded over an insecure HTTP connection. When this happens, the browser considers the page only partially encrypted, which undermines the security guarantees of SSL.

Types of Mixed Content

• Mixed Active Content (Blocked): Scripts, stylesheets, iframes, XMLHttpRequest, and fetch requests loaded over HTTP. Modern browsers block these entirely because they can modify the page's behaviour and steal data. This usually breaks website functionality.
• Mixed Passive Content (Warning): Images, audio, video, and other media loaded over HTTP. Browsers typically still load these but display a warning. While less dangerous, they still compromise the visual integrity of the secure padlock.

Identifying Mixed Content

Method 1: Browser Developer Tools

Method 2: Online Scanners

Use free online tools to scan your entire site for mixed content:

• Why No Padlock: Scans a specific URL and reports all insecure resources.
• Mozilla Observatory: Provides a comprehensive security scan including mixed content detection.
• JitBit SSL Checker: Crawls your site and finds all pages with mixed content.

Fixing Mixed Content in WordPress

Step 1: Update Site URLs

In your WordPress dashboard, go to Settings > General. Ensure both the "WordPress Address (URL)" and "Site Address (URL)" fields use https://.

Step 2: Search and Replace Database URLs

Many mixed content issues come from hardcoded HTTP URLs stored in your WordPress database (in posts, pages, widgets, and theme options). Use a plugin like "Better Search Replace" or "Velvet Blues Update URLs" to perform a database-wide search and replace:

Step 3: Install a Dedicated SSL Plugin

The "Really Simple SSL" plugin can automatically detect and fix most mixed content issues by dynamically rewriting HTTP URLs to HTTPS on page load. While this is an excellent quick fix, it is better to fix the root causes in your database and theme rather than relying on runtime fixes long-term.

Step 4: Check Theme and Plugin Files

Some themes and plugins hardcode HTTP URLs in their source files. Check your active theme's header.php, footer.php, and functions.php for any hardcoded http:// references. Also check custom CSS files and any embedded content in widgets.

Fixing Mixed Content in Custom HTML/PHP Sites

Protocol-Relative URLs

Replace absolute HTTP URLs with protocol-relative URLs where possible:

Using Content-Security-Policy Header

You can add a Content-Security-Policy header to automatically upgrade insecure requests. Add this to your .htaccess file:

This header instructs browsers to automatically upgrade all HTTP resource requests to HTTPS before making them. It is an excellent safety net while you work on fixing individual URLs.

Fixing Mixed Content in Joomla

Fixing External Resources

Mixed content can also come from external resources — third-party scripts, images hosted on other domains, embedded content, and CDN resources. For each external resource:

1. Check if the external service supports HTTPS (most do today).
2. Update the URL from http:// to https://.
3. If the external service does not support HTTPS, consider downloading the resource and hosting it locally on your SakuraHost account.
4. For embedded iframes (e.g., maps, videos), ensure the embed code uses HTTPS.

Prevention for the Future

To prevent mixed content from recurring, adopt these best practices: always use HTTPS URLs when adding images or links in your content; configure your CMS to use HTTPS by default; keep the upgrade-insecure-requests CSP header active as a safety net; and regularly scan your site for mixed content after installing new plugins, themes, or making content changes.