How to Fix Mixed Content Warnings

Resolving Mixed Content Issues on HTTPS Sites

Mixed content occurs when a page is loaded over HTTPS but some of its resources (images, scripts, stylesheets) are still loaded over HTTP. This triggers browser warnings and can prevent the padlock icon from appearing.

Types of Mixed Content

• Passive mixed content: Resources like images and videos loaded over HTTP. Browsers typically still display these but may show a warning.
• Active mixed content: Resources like scripts, stylesheets, and iframes loaded over HTTP. Browsers block these entirely as they pose a greater security risk.

Identifying Mixed Content

1. Visit your site in Google Chrome.
2. Open Developer Tools (press F12 or right-click > Inspect).
3. Click the Console tab.
4. Look for warnings that mention "Mixed Content" — these will show the exact URLs that are being loaded over HTTP.

You can also use online tools like Why No Padlock or JitBit SSL Checker to scan your site for mixed content.

Fixing Mixed Content in WordPress

1. Install Really Simple SSL: This plugin automatically detects and fixes most mixed content issues by rewriting HTTP URLs to HTTPS on the fly.
2. Update WordPress URLs: Ensure both the WordPress Address and Site Address in Settings > General use https://.
3. Search and Replace: Use the Better Search Replace plugin to find all instances of http://yourdomain.co.uk in your database and replace them with https://yourdomain.co.uk.

Fixing Mixed Content Manually

• Theme files: Check your theme's header, footer, and template files for hardcoded http:// URLs and change them to https:// or use protocol-relative URLs (//).
• Custom CSS and JavaScript: Search for any HTTP URLs in your custom code and update them.
• Embedded content: Update iframes, embedded videos, and external widget code to use HTTPS versions.
• CDN settings: If you use a CDN, ensure it is configured to serve assets over HTTPS.

Content Security Policy

As a last resort, you can add a Content Security Policy header to automatically upgrade insecure requests. Add this to your .htaccess file:

Header always set Content-Security-Policy "upgrade-insecure-requests"

This instructs browsers to automatically load HTTP resources over HTTPS instead.