ما هو خطأ Mixed Content؟ مشكلة موارد HTTP في صفحة HTTPS وحلها

ما هو خطأ Mixed Content (المحتوى المختلط)؟

يظهر خطأ Mixed Content عندما توجد داخل صفحة ويب محمّلة بشكل آمن عبر HTTPS موارد تُحمَّل عبر بروتوكول HTTP (غير الآمن). هذا الوضع يُضعف أمان الصفحة، فتُظهر المتصفحات تحذيرًا أو تحجب تلك الموارد تمامًا.

حتى عام 2026 تطبّق Chrome وبقية المتصفحات الحديثة قواعد صارمة جدًا بشأن المحتوى المختلط. فـالمحتوى المختلط النشط (JavaScript و CSS و iframe) يُحجب تمامًا، أما المحتوى المختلط الخامل (الصور) فيُعرض مع تحذير أو يُرقّى تلقائيًا إلى HTTPS.

أنواع Mixed Content

1. المحتوى المختلط النشط (يُحجب)

موارد قادرة على تغيير محتوى الصفحة أو جمع بيانات حساسة:

• <script src="http://..."> — ملفات JavaScript
• <link rel="stylesheet" href="http://..."> — ملفات CSS
• <iframe src="http://..."> — تضمينات iframe
• طلبات HTTP عبر XMLHttpRequest / Fetch API
• موارد <object> و <embed>

المحتوى المختلط النشط يحجبه المتصفح تلقائيًا وقد يختل عرض الصفحة.

2. المحتوى المختلط الخامل (يُعرض تحذير)

موارد لا تستطيع تغيير محتوى الصفحة لكنها تشكّل خطرًا على الخصوصية:

• <img src="http://..."> — الصور
• <audio src="http://..."> — الملفات الصوتية
• <video src="http://..."> — ملفات الفيديو

ابتداءً من Chrome 86 وما بعده يُرقّى المحتوى المختلط الخامل أيضًا إلى HTTPS تلقائيًا (auto-upgrade). وإذا تعذّرت الترقية يُحجب.

كيف تكتشف Mixed Content؟

الطريقة 1: Chrome DevTools

1. افتح الصفحة في Chrome ← افتح DevTools بالضغط على F12
2. ابحث عن تحذيرات "Mixed Content" في تبويب Console
3. اطّلع على ملخص الحالة العامة في تبويب الأمان
4. طبّق الفلتر "mixed-content:all" في تبويب Network

الطريقة 2: أداة Why No Padlock

أدخل عنوان نطاقك في الموقع whynopadlock.com لعرض جميع مشكلات المحتوى المختلط.

الطريقة 3: فحص الموقع بالكامل

# باستخدام Screaming Frog أو أدوات SEO مشابهة
# افحص جميع الصفحات للعثور على مراجع HTTP

# البحث عن روابط HTTP في قاعدة البيانات (مثال WordPress)
SELECT * FROM wp_posts WHERE post_content LIKE '%http://%';

# بحث عام في MySQL
SELECT * FROM content_table WHERE content LIKE '%src="http://%' OR content LIKE '%href="http://%';

طرق حل Mixed Content

1. الترقية التلقائية عبر Content-Security-Policy

الحل الأسرع والأكثر فاعلية. تُرقّى موارد HTTP إلى HTTPS تلقائيًا:

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

# Apache (.htaccess)
Header always set Content-Security-Policy "upgrade-insecure-requests"

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

⚠️ تنبيه: تفترض هذه الطريقة أن مورد HTTP متاح عبر HTTPS أيضًا. وإذا لم يكن المورد متاحًا عبر HTTPS فلن يُحمَّل.

2. تصحيح الروابط يدويًا

حدّث جميع مراجع http:// لتصبح https://:

# تحديث جماعي في قاعدة البيانات (استخدمه بحذر!)
UPDATE posts SET content = REPLACE(content, 'http://www.example.com', 'https://www.example.com');
UPDATE posts SET content = REPLACE(content, 'http://cdn.example.com', 'https://cdn.example.com');

3. استخدام روابط غير مرتبطة بالبروتوكول

اكتب الروابط دون تحديد البروتوكول ليستخدم المتصفح البروتوكول الحالي:

<!-- Yerine: -->
<img src="http://cdn.example.com/image.jpg">

<!-- استخدم هذا: -->
<img src="//cdn.example.com/image.jpg">

4. شبكات CDN والموارد الخارجية

• تأكد من أن مزوّد CDN لديك يدعم HTTPS
• الموارد الشائعة مثل Google Fonts و jQuery CDN تدعم HTTPS أصلًا
• استضف محليًا الموارد الخارجية التي لا تدعم HTTPS

حل Mixed Content في WordPress

• الإصلاح التلقائي عبر إضافة Really Simple SSL
• تغيير الروابط دفعة واحدة في قاعدة البيانات عبر إضافة Better Search Replace
• أضف define('FORCE_SSL_ADMIN', true); في ملف wp-config.php
• تأكد في الإعدادات ← عام من أن روابط الموقع تبدأ بـ https://

الخلاصة

يؤثر خطأ Mixed Content مباشرة في الانطباع الأمني عن موقعك، وقد ينعكس سلبًا على أدائه في SEO. يمكنك تطبيق حل سريع عبر ترويسة Content-Security-Policy، ثم تحديث جميع مراجع HTTP إلى HTTPS بشكل دائم. وراجع تبويب Security في Chrome DevTools بانتظام لتفادي مشكلات المحتوى المختلط الجديدة.