Mixed Content Warnings कैसे Fix करें

2026-05-07

mixed-contenthttpssecuritycspdebugging

Mixed content तब होता है जब एक HTTPS page sub-resources (images, scripts, stylesheets, fonts) को plain HTTP पर load करता है। Browsers इसे block करते हैं या warning देते हैं क्योंकि secure page पर एक insecure resource पूरे page की security को weaken करता है।

Mixed Content के दो Types

Type	Example	Browser Behavior
Active (dangerous)	Scripts, iframes, XHR, CSS	सभी browsers द्वारा blocked
Passive (display)	Images, audio, video	Warning के साथ दिखाया / padlock degraded

Active mixed content page को modify कर सकती है (एक man-in-the-middle malicious JavaScript inject कर सकता है), इसलिए browsers इसे पूरी तरह block करते हैं। Passive mixed content कम dangerous है लेकिन फिर भी security indicator को degrade करती है।

Mixed Content कैसे Find करें

Browser DevTools

Chrome/Firefox में अपनी site खोलें
DevTools (F12) खोलें → Console tab

इस तरह की errors find करें:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure resource 'http://example.com/image.jpg'.

Command-line Scan

curl -s https://yourdomain.com | grep -oP 'http://[^"'"'"'> ]+' | sort -u

Common Causes और Solutions

HTML में Hardcoded `http://` URLs

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

<!-- Fix: use protocol-relative or HTTPS -->
<img src="https://example.com/logo.png">
<img src="//example.com/logo.png">
<img src="/logo.png">

Best practice: जहां भी possible हो relative paths (/images/logo.png) use करें।

Third-party Resources अभी भी HTTP पर

<!-- Problem -->
<script src="http://cdn.example.com/library.js"></script>

<!-- Fix -->
<script src="https://cdn.example.com/library.js"></script>

अगर third party HTTPS support नहीं करता, तो alternative provider find करें या resource को खुद host करें।

Hardcoded URLs वाला Database Content

WordPress और other CMS database में full URLs store करते हैं। HTTPS पर migrate करने के बाद:

-- WordPress: update URLs in posts
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

या Better Search Replace जैसे plugin use करें।

HTTP References वाली CSS

/* Problem */
background-image: url('http://example.com/bg.jpg');

/* Fix */
background-image: url('https://example.com/bg.jpg');
background-image: url('/images/bg.jpg');

Content Security Policy (CSP) — Future में Mixed Content Prevent करें

HTTP resources को block करने वाला CSP header add करें:

Nginx:

add_header Content-Security-Policy "upgrade-insecure-requests" always;

Apache:

Header always set Content-Security-Policy "upgrade-insecure-requests"

upgrade-insecure-requests browsers को http:// requests को automatically https:// में upgrade करने के लिए कहता है — जब तक आप source URLs fix करते हैं तब तक एक safety net।

Systematic Fix: Full-site Audit

पूरी तरह से cleanup के लिए, अपनी पूरी site का audit करें:

1. HTTP References के लिए Crawl करें

# Scan all HTML files for http:// URLs
find /var/www/html -name '*.html' -o -name '*.php' | xargs grep -l 'http://' 2>/dev/null

# Scan CSS files
find /var/www/html -name '*.css' | xargs grep -l 'http://' 2>/dev/null

# Scan JavaScript files
find /var/www/html -name '*.js' | xargs grep -l 'http://' 2>/dev/null

2. Category के According URLs Fix करें

Source	Fix Method
आपके अपने resources	Relative paths में change करें (`/images/logo.png`)
CDN resources	`https://cdn.example.com/...` में update करें
Third-party scripts	URL update करें या HTTPS alternative find करें
Inline CSS	`http://` → `https://` search-replace
Database content (WordPress)	`wp search-replace 'http://yourdomain.com' 'https://yourdomain.com'`
Template/theme files	Source files directly edit करें

3. Browser DevTools से Verify करें

Fix करने के बाद, हर page खोलें → DevTools (F12) → Console tab। एक clean page कोई mixed content warning नहीं दिखाता। Padlock icon solid (broken या warning triangle के बिना) होना चाहिए।

4. Future में Mixed Content Prevent करें

Permanent safety net के रूप में अपने HTML <head> में यह meta tag add करें:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

या इसे Nginx/Apache config (ऊपर दिखाया गया) के through server-wide set करें।

Content Types जो Usually Mixed Content Cause करते हैं

Content Type	कहां Check करें	Example
Images	`<img src="http://...">`	Uploaded images, avatars, logos
Scripts	`<script src="http://...">`	Analytics, chat widgets, ad scripts
Stylesheets	`<link href="http://...">`	External fonts, CSS frameworks
Fonts	`@font-face { src: url("http://...") }`	Google Fonts (usually fine), custom fonts
iframes	`<iframe src="http://...">`	Embedded videos, maps, widgets
XHR/Fetch	`fetch("http://...")`	JavaScript में API calls
Background images	`background-image: url("http://...")`	CSS backgrounds

FAQ

क्या mixed content मेरे SEO को affect करेगा?

Directly नहीं। Google page के URL protocol के basis पर crawl करता है, sub-resources के नहीं। हालांकि, अगर mixed content browser warning trigger करती है या visual content block करती है, तो user experience degrade होता है — जो high bounce rate के through indirectly ranking को hurt कर सकता है।

क्या मैं बस `upgrade-insecure-requests` use कर सकता हूं और URLs fix नहीं कर सकता?

यह temporary fix के रूप में काम करता है, लेकिन source URLs fix करना better है। CSP header browser support पर depend करता है (सभी modern browsers करते हैं, लेकिन कुछ older clients नहीं) और हर response में एक extra header add करता है।

मेरी site में सैकड़ों hardcoded HTTP URLs हैं। सबसे fast fix क्या है?

Immediately upgrade-insecure-requests CSP header add करें (server config की एक line)। फिर अपने codebase और database में global search-and-replace करें। Code में hardcoded URLs find करने के लिए grep -r 'http://' src/ use करें।