Seoxpert.io
highSecurity

HTTPS Pages Reference HTTP Resources (Mixed Content)

HTTPS pages that load resources (like images, scripts, or stylesheets) over HTTP create mixed content. This undermines security, can break page functionality, a

By Seoxpert Editorial · Published · Updated

Why it matters

Mixed content weakens the security guarantees of HTTPS. Browsers may block scripts, styles, or even images loaded over HTTP, resulting in broken layouts, missing functionality, and visible security warnings. This erodes user trust and can negatively impact SEO rankings.

Impact

Pages with mixed content can have broken features, missing images, or non-functional scripts. Users may see security warnings, which can deter them from staying on or interacting with your site. Search engines may also penalize sites with persistent security issues, harming visibility.

How it's detected

Mixed content issues are typically detected using browser developer tools (Console tab), automated SEO or security crawlers, or by observing browser warnings when loading pages. Tools like Lighthouse, Chrome DevTools, or security scanners can highlight these problems.

Common causes

  • Legacy CMS content with hardcoded http:// image URLs
  • Third-party embeds referencing HTTP endpoints
  • Database content not updated after HTTPS migration
  • External scripts or stylesheets not supporting HTTPS
  • Manual code or templates with absolute http:// URLs
  • CDN or asset providers not configured for HTTPS

How to fix it

Update all resource URLs to use https:// or protocol-relative URLs (//). Audit your codebase, templates, and database for hardcoded http:// links. For third-party resources, ensure they support HTTPS or find alternatives. Implement the Content-Security-Policy header with the upgrade-insecure-requests directive to automatically upgrade HTTP requests to HTTPS where possible.

Code examples

Problem: HTTP image on HTTPS page

<img src="http://example.com/image.jpg" alt="Example">

Fix: Use HTTPS image URL

<img src="https://example.com/image.jpg" alt="Example">

Fix: Use protocol-relative URL

<img src="//example.com/image.jpg" alt="Example">

Fix: Content-Security-Policy header to upgrade insecure requ

Content-Security-Policy: upgrade-insecure-requests;

FAQ

What is mixed content and why does it matter for HTTPS sites?

Mixed content occurs when an HTTPS page loads resources (like images, scripts, or stylesheets) over HTTP. This undermines the security of the page, can break functionality, and causes browsers to display warnings or block resources.

How can I find mixed content on my site?

You can use browser developer tools (Console tab) to see mixed content warnings. Automated tools like Lighthouse, Chrome DevTools audits, or online mixed content scanners can also identify these issues across your site.

What happens if I ignore mixed content warnings?

Ignoring mixed content can result in broken functionality (e.g., scripts or styles not loading), missing images, and visible security warnings to users. This damages user trust and can negatively impact your SEO.

Can I use protocol-relative URLs to fix mixed content?

Yes, protocol-relative URLs (starting with //) will load resources over the same protocol as the page. However, it's generally safer to use explicit https:// URLs to avoid ambiguity and ensure secure loading.

What if a third-party resource is only available over HTTP?

If a third-party resource does not support HTTPS, you should look for an alternative provider that does, or host the resource yourself over HTTPS if the license allows. Loading HTTP resources on HTTPS pages is not recommended.

How does the Content-Security-Policy upgrade-insecure-requests directive help?

The upgrade-insecure-requests directive tells browsers to automatically upgrade HTTP resource requests to HTTPS. This can help fix mixed content issues without changing every URL, but only works if the resource is available over HTTPS.

Found this issue on your site?

Run a scan to see if HTTPS Pages Reference HTTP Resources (Mixed Content) affects your pages.

Scan my website →