Experiencing "mixed content" warnings after enabling SSL

Experiencing “mixed content” warnings after enabling SSL is a common issue, and it occurs when your web pages are loading both secure (HTTPS) and non-secure (HTTP) content. This can compromise the security of your website. Here’s a detailed guide on how to fix mixed content warnings:

Step-by-Step Guide to Fix Mixed Content Warnings

Step 1: Identify Mixed Content

1. Browser Developer Tools: Open your website in a browser, right-click on the page, and select “Inspect” or “Inspect Element.” Go to the “Console” tab to see mixed content warnings listed.
2. Online Tools: Use online tools like Why No Padlock? or SSL Checker to scan your website for mixed content.

Step 2: Update HTTP Links to HTTPS

1. Manually Update Links: Edit your HTML, CSS, and JavaScript files to change all instances of * to * for all resources such as images, scripts, stylesheets, and iframes.

   Example: <link rel="stylesheet" type="text/css" href="http://example.com/style.css" />

   Change to: <link rel="stylesheet" type="text/css" href="https://example.com/style.css">

2. Relative Links: Where possible, use relative URLs instead of absolute URLs. This way, the protocol will automatically match the page’s protocol.

   Example:""

Step 3: Update Content in CMS (e.g., WordPress)

1. Update Settings: In WordPress, go to Settings > General and ensure the WordPress Address (URL) and Site Address (URL) start with https://.
2. Update Database: Use a plugin like “Better Search Replace” or “Velvet Blues Update URLs” to search your database for http:// and replace it with https://.
3. Check Theme and Plugins: Ensure that your theme and all plugins are using HTTPS for their resources.

Step 4: Use a Content Delivery Network (CDN)

1. Ensure CDN Uses HTTPS: If you are using a CDN, make sure it supports HTTPS and that you are using HTTPS URLs for the CDN resources.

Step 5: Force HTTPS

1. .htaccess File: Add a rule to your .htaccessfile to redirect all HTTP traffic to HTTPS.

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

2. Web Server Configuration: If you’re not using Apache, update your web server configuration to force HTTPS. For Nginx, it looks like this:

nginx
server {
listen 80;
server_name example.com www.example.com;
return 301 https://$server_name$request_uri;
}

Step 6: Verify the Fixes

1. Clear Cache: Clear your browser cache and test your website again to ensure that the mixed content warnings are resolved.
2. Re-run Tests: Use browser developer tools and online tools mentioned earlier to verify that there are no more mixed content warnings.

Additional Tips

• Automated Tools: Consider using automated tools and plugins that can help fix mixed content issues by automatically rewriting URLs to HTTPS.
• Content Security Policy (CSP): Implement a Content Security Policy to block mixed content on your site. Add the following header to your web server configuration:apache Content-Security-Policy: upgrade-insecure-requests;

By following these steps, you should be able to resolve mixed content warnings and ensure your website is fully secure.