Skip to content

Mixed Content

Quick summary

Your secure (HTTPS) page is trying to load an insecure (HTTP) resource, which the browser blocks for security reasons.

Why this happens

  • Hardcoded http:// URLs in the HTML or JavaScript

  • Third-party scripts or resources served only over HTTP

  • Protocol-relative URLs (//) that resolve to HTTP on an HTTP redirect

Minimal example

✗ Broken code
<script src="http://cdn.example.com/lib.js"></script>
✓ Fixed code
<script src="https://cdn.example.com/lib.js"></script>

An HTTPS page loading an HTTP script is mixed content — the browser blocks it. Use https:// so the resource loads over a secure connection.

How to diagnose

  • Check the browser console for mixed content warnings

  • Inspect blocked resources in the Network tab of DevTools

  • Search your codebase for http:// references that should be https://

How to fix

  • Change http:// to https:// in all resource URLs

  • Use protocol-relative URLs (//example.com/...) or relative paths

  • Ensure your CDN and third-party providers support HTTPS

How to prevent

  • Always use https:// for external resources

  • Use relative URLs for same-origin resources

Related Resources

Related Glossary

Related Lessons

  • HTTP

    Learn about HTTP and HTTPS

Related Practice

Related Tools

← Back to language