How to check your website for mixed content over HTTPS?

Here’s a detailed guide on how to check your website for mixed content over HTTPS, including manual, browser-based, and automated methods:

---

What is Mixed Content?

• Mixed content occurs when an HTTPS page loads some resources (images, scripts, CSS, videos, fonts, etc.) over HTTP.
• Example: <img src="http://example.com/image.jpg">
• Problems caused by mixed content:
  • Browser security warnings (“Not Secure” or “Blocked”)
  • Broken functionality if the browser blocks scripts or CSS
  • SEO and trust issues

---

1. Browser Developer Tools (Manual Check)

Most modern browsers can detect mixed content easily.

Steps in Chrome / Edge / Firefox:

1. Open your website over HTTPS.
2. Right-click → Inspect → Console tab.
3. Look for messages labeled Mixed Content.
   • Example: Mixed Content: The page at 'https://yourdomain.com' was loaded over HTTPS, but requested an insecure image 'http://example.com/image.jpg'.
4. Optionally, check Network tab:
   • Reload the page (F5).
   • Filter by “All” requests and look for HTTP requests.

Pros:

• Immediate and visual
• Shows exact file causing the issue
• Built into your browser

Cons:

• Only detects issues on the pages you visit
• Not scalable for large sites

---

2. Online Mixed Content Scanners

These tools automatically scan your website for insecure resources:

Popular Tools

• Why No Padlock – Checks for HTTP resources and SSL configuration issues.
• Jitbit SSL Checker / SSL Mixed Content Scanner – Simple online scanner for pages.
• Geekflare Mixed Content Checker – Fast detection with detailed reporting.

Pros:

• Easy to use
• No technical knowledge required
• Detects multiple types of insecure content

Cons:

• Usually scans only one page at a time
• Free tools may limit scanning depth

---

3. Automated Crawlers

For larger websites with many pages:

a) Screaming Frog SEO Spider

• Free version: Up to 500 URLs per site
• Steps:
  1. Set the site URL with HTTPS.
  2. Crawl the site.
  3. Use Reports → Security → Mixed Content to list all HTTP resources.
• Pros: Detailed, works for large sites, exports reports
• Cons: Requires installation and configuration

b) Sitebulb

• Paid tool, comprehensive site auditing
• Detects all mixed content, insecure scripts, and redirects

c) Custom Scripts

• Use wget, curl, or Python scripts to scan your site pages for http:// references.
• Example (Linux): wget -q -O - https://yourdomain.com | grep 'http://'
• Pros: Fully automated, customizable
• Cons: Requires coding knowledge

---

4. WordPress-Specific Solutions

If your site uses WordPress:

• Plugins:
  • Really Simple SSL – Automatically detects and fixes mixed content
  • Better Search Replace – Fixes hardcoded HTTP URLs in the database
• Steps:
  1. Install plugin
  2. Scan for HTTP resources
  3. Replace HTTP URLs with HTTPS
• Pros: Fast, no coding required
• Cons: Plugins can affect site performance if misused

---

5. Manual HTML / Template Check

• Inspect your site templates, HTML, CSS, and JavaScript for hardcoded http:// references.
• Common places to check:
  • Images
  • Fonts (Google Fonts often has http:// references in old templates)
  • JavaScript libraries (jQuery, plugins)
  • CSS background images
  • External embeds (YouTube, Vimeo, analytics scripts)
• Replace http:// with:
  • https:// if the resource supports HTTPS
  • Relative URLs (//example.com/resource.js) for protocol-agnostic loading

---

6. Mixed Content Fix Checklist

1. Change all hardcoded http:// to https:// or protocol-relative URLs (//example.com).
2. Update CMS settings to use HTTPS URLs by default.
3. Replace external resources that don’t support HTTPS.
4. Use Content Security Policy (CSP) headers to block insecure content.
5. Test the site using browser console and online scanners.