Detecting and Fixing Mixed Content: How to Fully Secure Your HTTPS Website

What Is Mixed Content and Why Is It a Problem?

Mixed content occurs when an HTTPS page embeds sub-resources via HTTP. The HTTPS protocol encrypts the connection between browser and server so that third parties cannot read or manipulate the traffic. However, when individual resources are loaded unencrypted, this security guarantee is lifted for those resources. An attacker could, for example, manipulate a JavaScript file loaded via HTTP and thereby compromise the entire page, even though the main page itself is served over HTTPS.

According to an analysis by HTTP Archive, approximately 84% of all websites that have switched to HTTPS have at least one mixed content warning (HTTP Archive Web Almanac). In most cases, these are forgotten image URLs in database content, hardcoded HTTP links in templates or third-party widgets still using HTTP. A security scan identifies these problems automatically.

Active vs. Passive Mixed Content

Active Mixed Content (Blocked)

Active mixed content includes resources that can interact with and modify the page: JavaScript files, CSS stylesheets, iframes, XMLHttpRequest calls, Fetch requests and WebSocket connections. These resources have access to the Document Object Model (DOM) and could, if manipulated, intercept passwords, alter forms or redirect users to phishing pages. Therefore, all modern browsers block active mixed content completely. The result: scripts are not executed, stylesheets are not loaded and iframes remain empty.

Passive Mixed Content (Warning or Auto-Upgrade)

Passive mixed content includes resources that do not interact directly with the page: images, audio and video files and favicons. The risk is lower since these resources cannot modify page content. However, an attacker could replace an image loaded via HTTP with a different one or use the URL to track browsing behaviour. Since version 86, Chrome attempts to automatically upgrade passive resources to HTTPS (auto-upgrade). If the HTTPS version is unavailable, the resource is blocked. This means that even passive mixed content issues today result in missing images on the website.

Identifying Mixed Content: Four Methods

Browser Developer Tools

The fastest method for individual pages: open the browser console (F12 in Chrome) and look for warnings like "Mixed Content: The page was loaded over HTTPS, but requested an insecure resource". The console shows the exact URL of the problematic resource. This approach is suitable for diagnosing individual pages but is not practical for a website with hundreds of pages.

Automated Security Scan

XICTRAQ crawls your website and systematically checks every page for mixed content. The security scan identifies HTTP resources on all pages, categorises them by type (active/passive) and provides the exact URLs along with their embedding locations. Unlike manual inspection, the automated scan covers all pages and also detects dynamically loaded resources that may only become visible in developer tools after interaction.

Content-Security-Policy in Report-Only Mode

A technically elegant approach is configuring a Content-Security-Policy with a report-only header. Set the header Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report. The browser sends a report for every HTTP resource to the specified URL without blocking it. This gives you a complete list of all mixed content sources in production, including resources loaded only during specific user interactions. Learn more about security headers here.

Command-Line Tools and Crawlers

For developers, CLI tools such as mixed-content-scanner (Node.js) or muffet (Go) are suitable for crawling a website and identifying all HTTP resources on HTTPS pages. These tools are useful for one-time audits but do not replace continuous monitoring: new mixed content problems can arise at any time through content updates, plugin installations or changed third-party scripts.

The Most Common Sources of Mixed Content

After analysing thousands of websites with mixed content problems, the main sources can be clearly identified:

• Database content with hardcoded HTTP URLs: The most common problem. Images, links and embedded media in blog posts, product descriptions and page content use absolute HTTP URLs that were not updated during the HTTPS migration.
• Template and theme files: Hardcoded HTTP URLs in header, footer, sidebar widgets or template partials. Particularly common in older WordPress themes created before HTTPS became widespread.
• Third-party widgets and embeds: YouTube embeds with HTTP URLs, social media widgets, map services, live chats or cookie consent tools using outdated embed codes.
• CDN configuration: A misconfigured CDN delivering assets over HTTP instead of HTTPS. This often affects older CDN setups configured before the HTTPS migration.
• CSS background images and @import rules: HTTP URLs in CSS files are often overlooked since they are not visible in the HTML source code. Particularly background-image: url(http://...) and @import url(http://...) are common sources.
• Webfonts from external servers: Google Fonts and other webfont services embedded via HTTP. Beyond the mixed content issue, there is also GDPR relevance here.

Fixing Mixed Content Systematically

Cleaning Up Database Content

Replace all HTTP URLs in the database with HTTPS variants. For WordPress, a search-and-replace tool like Better Search Replace is recommended. Replace http://yourdomain.com with https://yourdomain.com and repeat the process for all domains used. Important: create a backup before modifying the database. After replacing, verify that all resources are also reachable over HTTPS. A resource not available via HTTPS will produce a 404 error after replacement instead of mixed content.

Template and Theme Adjustments

Search all template files for hardcoded HTTP URLs. Replace absolute URLs with protocol-relative URLs (//example.com/image.jpg) or HTTPS URLs. Even better: use relative paths for your own resources (/images/image.jpg), which automatically use the main page's protocol. In CMS systems, use built-in URL functions instead of hardcoded paths.

Updating Third-Party Resources

Update all third-party embed codes to the current HTTPS version. Most providers have supported HTTPS for years. If a third-party provider does not offer an HTTPS version of their resources, you should reconsider using that provider. XICTRAQ also identifies risky third-party scripts as part of the security scan that may pose additional security risks beyond the mixed content issue.

Upgrade-Insecure-Requests as an Immediate Measure

The HTTP header Content-Security-Policy: upgrade-insecure-requests or the equivalent meta tag instructs the browser to automatically request all HTTP resources over HTTPS. This is an effective immediate measure that eliminates mixed content warnings as long as the resources are also reachable over HTTPS. Important: this header does not replace the actual cleanup, as it only works in the visitor's browser and is not interpreted by search engine crawlers. HTTP security headers like upgrade-insecure-requests should be part of a comprehensive header strategy.

Mixed Content and SEO Impact

Mixed content has direct and indirect effects on search engine optimisation. Google has confirmed HTTPS as a ranking signal and potentially rates pages with mixed content more negatively than fully secure pages. The specific SEO impacts include:

• Missing images in search results: When images are blocked due to mixed content, they are also absent from Google Image Search and Rich Snippets. This reduces the visual appeal of the search result and the click-through rate.
• No padlock icon in the address bar: Browsers do not show a closed padlock with mixed content. Google evaluates perceived security as an indirect ranking factor since users leave insecure-looking pages more quickly (higher bounce rate).
• Core Web Vitals impact: Blocked or auto-upgraded resources can negatively affect Core Web Vitals, particularly Largest Contentful Paint (LCP) when the largest visible element is loaded over HTTP.
• Crawling efficiency: When Googlebot encounters mixed content warnings, it may be unable to load certain resources, which impairs the page's rendering during indexing.

SEO monitoring helps detect these impacts and measure the effectiveness of your cleanup efforts. If rankings stagnate after an HTTPS migration, remaining mixed content problems are a common cause.

Special Case: Mixed Content on E-Commerce Websites

Online shops are particularly susceptible to mixed content because they typically use large volumes of product images, embedded videos and third-party integrations (payment providers, tracking, review widgets). A blocked product image on a product page directly reduces the conversion rate. A broken payment form due to blocked JavaScript resources prevents transactions entirely.

For e-commerce operators, a multi-stage strategy is recommended: first manually check and immediately fix the most critical pages (checkout, product pages, homepage). In parallel, activate upgrade-insecure-requests as a safety net. Then perform the complete database cleanup and set up automated monitoring that immediately detects new mixed content problems.

Preventing Mixed Content Continuously

A one-time cleanup is not sufficient. New mixed content problems can arise at any time through content updates, new plugins, changed third-party scripts or database imports. Continuous monitoring is the key to a lasting solution.

XICTRAQ automatically checks your website for mixed content and other security issues. The security scan detects new HTTP resources on HTTPS pages as soon as they appear. Combined with the screenshot changelog, you also see visual impacts such as missing images or broken layouts. The GDPR compliance check supplements the analysis with privacy-related aspects, such as when insecure trackers are embedded via HTTP. Start with a free demo and identify all mixed content problems on your website within minutes. Visit the pricing page to find the right package for your requirements.