Skip to Content
HTTP Security HeadersIssue 60

Mixed content: HTTP assets on an HTTPS page

What Is This Issue

This issue checks whether your HTTPS pages load any resources (scripts, stylesheets, iframes, images, etc.) over insecure HTTP connections.

What this issue checks

  • All resource URLs on HTTPS pages use https:// scheme (not http://)
  • No active resources (scripts, stylesheets, iframes) load over HTTP
  • No passive resources (images, videos, audio) load over HTTP
  • Protocol-relative URLs (starting with //) are acceptable as they inherit the page’s scheme

What is considered a passing implementation

A passing implementation means:

  • All resource URLs on HTTPS pages use HTTPS
  • No mixed content warnings in browser console
  • All subresources are loaded securely

Real-world example

If your page is served over HTTPS at https://example.com, all resources should use HTTPS:

Good:

<script src="https://cdn.example.com/app.js"></script>
<img src="https://example.com/image.jpg" />

Bad (mixed content):

<script src="http://cdn.example.com/app.js"></script>
<img src="http://example.com/image.jpg" />

Browsers block active mixed content (scripts, stylesheets) entirely, causing functionality to break.

Why Is This Important

Mixed content is critical for security and SEO:

Crawlability

If browsers block scripts or stylesheets due to mixed content, your page may not render correctly for search engine crawlers, affecting indexing and ranking.

Indexability

Search engines may not be able to properly index pages with mixed content if critical resources are blocked by browsers.

Rankings

Google considers page security as a ranking factor. Sites with mixed content signals security negligence, potentially affecting rankings.

User Experience

Browsers block active mixed content (scripts, stylesheets, iframes) entirely, causing page functionality to break silently. Passive mixed content (images, videos) triggers security warnings and removes the HTTPS padlock icon. Users see “Not Secure” warnings, which damages trust.

AI Search / AEO

AI-powered search engines and assistants prioritize secure, properly configured sites. Mixed content indicates poor security practices.

SEO Health Score Impact

Resolving this issue improves your overall SEO health score by ensuring your HTTPS pages are fully secure and functional, protecting users from man-in-the-middle attacks.

How XeoPix Detects This

XeoPix checks whether your HTTPS pages load any resources (scripts, stylesheets, iframes, images, etc.) over insecure HTTP connections.

Detection process

XeoPix follows these logical steps to identify mixed content issues:

  1. Verify HTTPS page - XeoPix first checks if your page loads over HTTPS, since mixed content only applies to HTTPS pages.

  2. Parse HTML document - XeoPix parses the full HTML document of your HTTPS page to find all resource references.

  3. Collect resource URLs - XeoPix collects resource URLs from:

    • Active resources: <script>, <link rel="stylesheet">, <iframe>, <object>, <embed>
    • Passive resources: <img>, <video>, <audio>, <source>

  4. Detect insecure schemes - XeoPix filters for URLs with http:// scheme (not https://, not protocol-relative //).

  5. Classify mixed content - XeoPix classifies mixed content as:

    • Active: Scripts, stylesheets, iframes (browsers block these)
    • Passive: Images, videos, audio (browsers warn about these)

When the issue is flagged

The issue is flagged when any of these conditions are met:

  • Active mixed content is detected (CRITICAL - browsers block these resources, causing functionality to break)
  • Passive mixed content is detected (WARNING - browsers warn about these, and the HTTPS padlock is not shown)

When the issue passes

The issue passes when:

  • All resource URLs on HTTPS pages use https:// scheme
  • No mixed content warnings appear in browser console
  • All subresources are loaded securely
  • Protocol-relative URLs (starting with //) are present (these inherit the page’s scheme and are acceptable)

How To Fix

Follow these steps to fix mixed content issues:

Step 1: Identify all HTTP resource URLs

Identify all HTTP resource URLs in your HTML source code, including:

  • <script src="http://...">
  • <link rel="stylesheet" href="http://...">
  • <iframe src="http://...">
  • <img src="http://...">
  • <video src="http://..."> or <audio src="http://...">

Step 2: Replace http:// with https://

Replace http:// with https:// for all resource URLs:

  • Update HTML templates, CMS settings, theme files
  • Update database-stored content (blog posts, product descriptions)
  • Update third-party widget/plugin code

Step 3: Verify HTTPS availability

Verify that each https:// URL returns a valid response (HTTP 200).

Step 4: Handle third-party resources without HTTPS

For third-party resources that don’t support HTTPS:

  • Contact the vendor to request HTTPS support
  • Replace with an alternative service that supports HTTPS
  • Remove the resource if it’s not essential

Step 5: Use protocol-relative URLs (optional)

For resources that need to work on both HTTP and HTTPS, use protocol-relative URLs:

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

Note: On HTTPS pages, // automatically becomes https://.

Step 6: Add CSP upgrade-insecure-requests

Add CSP upgrade-insecure-requests as a safety net:

Content-Security-Policy: upgrade-insecure-requests

This tells browsers to automatically upgrade HTTP requests to HTTPS.

Step 7: Test thoroughly

Test thoroughly using browser developer tools to verify no mixed content warnings appear.

What We Store

Storage Level

Page Level — This issue is evaluated for each individual URL.

Database Table / Prisma Model

PageSecurityHeader

Stored Fields

FieldTypeDescription
httpAssetUrlsString[]Array of HTTP asset URLs found on the page

Detection Dependencies

  • The following data sources are required to evaluate this issue:
  • HTML Document — The crawler extracts all asset URLs (images, scripts, stylesheets, iframes) from the page
  • URL Analysis — The crawler checks if assets are loaded over HTTP (insecure) vs HTTPS

Examples

Example 1: Insecure Script Loading

Problem: A script is loaded over HTTP on an HTTPS page.

What fails:

<script src="http://cdn.example.com/jquery.js"></script>

What passes:

<script src="https://cdn.example.com/jquery.js"></script>

Example 2: Insecure Image References

Problem: Images are referenced over HTTP.

What fails:

<img src="http://example.com/logo.png" />

What passes:

<img src="https://example.com/logo.png" />

Example 3: Protocol-Relative URL (Acceptable)

Scenario: Using protocol-relative URLs that work on both HTTP and HTTPS.

What passes:

<script src="//cdn.example.com/app.js"></script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto" />

These URLs automatically use the same protocol as the page (HTTPS on HTTPS pages).

Unit Test

Test File

__tests__/seo-audit-checks/httpSecurityHeaders/issue-2-no-mixed-content.test.js

Purpose

This unit test validates that passive mixed content (HTTP resources loaded on HTTPS pages) is correctly detected, including images, and that the check is only performed on HTTPS pages.

Tested Function

runHttpSecurityHeaders() from toggleGroups/httpSecurityHeaders.js

Issue Information

  • Issue Number: 2
  • Issue Code: no_mixed_content
  • Toggle Group: httpSecurityHeaders

Test Scenarios

Positive Test Cases

Scenarios where the issue should be reported:

  • HTTPS page contains an <img> tag with an http:// source URL
  • HTTPS page contains multiple HTTP resources (images, scripts) — multiple mixed content URLs are reported

Negative Test Cases

Scenarios where the issue should not be reported:

  • All assets on the HTTPS page use https:// URLs
  • The page itself is loaded over HTTP (not HTTPS) — mixed content does not apply
  • Empty HTML document — no resources to check

Boundary Cases

  • Multiple mixed content URLs of the same type (e.g., two HTTP images) — all should be captured in httpAssetUrls

Edge Cases

  • Empty HTML string — handled gracefully without errors

Expected Outcome

Pass

The issue is reported when an HTTPS page contains at least one passive resource (e.g., <img>) with an http:// URL. The httpAssetUrls array in the issue details contains the detected URLs.

Fail

The issue is not reported when all resources use HTTPS, when the page is HTTP, or when the HTML is empty.

Validation

The unit test verifies:

  • Correct detection of passive mixed content (HTTP images on HTTPS pages)
  • No detection when all assets are secure
  • No detection on HTTP pages (mixed content rules do not apply)
  • Multiple mixed content URLs are captured
  • Empty HTML is handled without errors
  • The httpAssetUrls payload field is populated correctly
  • toggleGroups/httpSecurityHeaders.js — contains the runHttpSecurityHeaders() function and extract() logic
  • issueCodes.js — defines IssueCode.NO_MIXED_CONTENT
  • utils/mixedContent.js — provides detectMixedContent() used to find HTTP resources

Coverage Summary

  • Covers the full passive mixed content detection logic
  • Tests single and multiple HTTP resource scenarios
  • Verifies that HTTP pages are exempt from mixed content checks
  • Validates payload structure (httpAssetUrls)
  • Includes empty HTML edge case

References

Last updated on
Issue 59Issue 61