Advertisement
webdev • Mixed Content errors occur when a website served over HTTPS tries to load resources (images, scripts, or CSS) over HTTP. Browsers block these requests for security, which can break your site.

How to Fix Mixed Content HTTP/HTTPS Error (Beginner-Friendly Guide)

5 Min Read Verified Content

# Step 1 — Understand Mixed Content

  • HTTPS page → secure

  • HTTP resource → insecure

  • Browser blocks insecure requests → Mixed Content error

  • Example error in browser console:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure image 'http://example.com/image.jpg'. This request has been blocked.

  • Two types:

    • Passive content (images, videos, audio) → sometimes displayed but not secure

    • Active content (JS, CSS, iframes) → blocked by default


## Step 2 — Check Browser Console

  • Open developer tools (F12) → Console

  • Look for:

    • Mixed Content warnings/errors

    • HTTP URLs that need fixing


## Step 3 — Use HTTPS for All Resources

  • Change URLs from http:// to https:// in:

    • HTML <img> tags

    • CSS url() references

    • JavaScript imports

    • AJAX or fetch calls

Example:

<!-- Before -->
<script src="http://example.com/script.js"></script>

<!-- After -->
<script src="https://example.com/script.js"></script>


## Step 4 — Use Relative or Protocol-Relative URLs

  • Relative URL → browser uses the current protocol:

<img src="/images/logo.png" alt="Logo">

  • Protocol-relative URL (less common now, but works):

<script src="//example.com/script.js"></script>


## Step 5 — Redirect HTTP to HTTPS on Server

  • Ensure all HTTP requests are redirected to HTTPS

Nginx Example

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

Apache Example (.htaccess)

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


## Step 6 — Update CMS or External Libraries

  • WordPress, Joomla, etc. → update URLs in settings

  • Plugins and themes → ensure HTTPS URLs

  • Third-party scripts (like Google Fonts, Ads, or APIs) → use HTTPS versions


## Step 7 — Check AJAX and API Calls

  • Fetch requests must use HTTPS if the site is HTTPS:

// Before
fetch('http://api.example.com/data')

// After
fetch('https://api.example.com/data')

  • Otherwise, browser will block the request


## Step 8 — Test with Online Tools

SSL Labs

  • These identify mixed content sources you may have missed


## Step 9 — Clear Cache

  • Clear browser cache

  • Clear CDN or server cache if using caching

  • Reload site → confirm errors are gone


## Step 10 — Beginner-Friendly Checklist

ProblemDiagnosisFix
Images blockedBrowser consoleChange HTTP → HTTPS or use relative URLs
JS/CSS blockedConsole errorChange resource URLs to HTTPS
AJAX/API blockedNetwork tabUse HTTPS endpoint
CMS contentLinks still HTTPUpdate settings or database references
Server not redirectingTest HTTP URLAdd 301 redirect to HTTPS
Third-party scriptsConsole warningsUse HTTPS version of scripts


## Conclusion

Mixed Content errors are common when migrating to HTTPS or integrating external resources. Beginners can fix them by:

  • Using HTTPS URLs for all resources

  • Using relative URLs where possible

  • Redirecting HTTP to HTTPS on the server

  • Updating CMS and third-party resources

  • Testing with browser console and online tools

Fixing mixed content improves website security, user trust, and avoids broken resources.

Advertisement
Back to Webdev