أداة هروب / فك هروب HTML

هروب HTML يستبدل الأحرف ذات المعنى الخاص في HTML بكياناتها المقابلة. أهمها < و> و& و" و'. ومن دون هروب قد يكسر < أو & منفرد التخطيط أو يُفسَّر كوسم HTML.

أما فك هروب HTML فيعكس العملية ويحوّل الكيانات مرة أخرى إلى أحرفها الأصلية. فـ < تعود إلى < و& تعود إلى &. ويكون ذلك مفيدًا عند قراءة محتوى آتٍ من API أو RSS أو تصدير CMS.

أحيانًا يُكتب الأمر بصيغة HTML escape / unescape كعملية واحدة مجمعة. سواء سميته ترميز/فك ترميز الكيانات أو هروبًا وفك هروب، فهذه الأداة تغطي الاتجاهين.

يعمل هروب HTML حرفًا بحرف، وليس بايتًا ببايت كما في الترميزات الثنائية. كل حرف محجوز يتحول إلى كيان HTML محدد، مسمّى مثل & أو رقمي مثل &.

الكيانات المسمّاة أسهل قراءة. أما الرقمية فتعمل مع أي حرف حتى لو لم يكن له اسم معرف. كما أن الترتيب مهم: يجب تهريب & أولًا لتجنّب الترميز المزدوج.

إليك مثالًا حقيقيًا على السلسلة 5 < 10 & true. يتم استبدال كل حرف محجوز في مرور واحد من اليسار إلى اليمين، بينما يبقى بقية النص كما هو.

النتيجة:5 < 10 & true→5 < 10 & true

هل تحتاج إلى هروب HTML أونلاين بدون تثبيت أي شيء؟ سير العمل هنا بسيط: اختر الوضع، الصق الإدخال، حدد تنسيق الإخراج للهروب، ثم انسخ النتيجة. كل شيء يتم محليًا داخل المتصفح.

الناتج المُهرَّب يحافظ على نصك الأصلي ويضيف فقط الكيانات الآمنة اللازمة. وللعودة إلى النص العادي، الصق النص واضغط فك الهروب ثم انسخ الناتج. وإذا لم يتغير شيء، فغالبًا لم تكن هناك أحرف تحتاج إلى هروب.

كلمة واحدة لا تكفي لتوضيح كيف يعمل هروب HTML وفكّه مع محتوى حقيقي. يمرّ الجدول التالي على خمسة سيناريوهات شائعة، من جملة بسيطة إلى مقطع HTML كامل.

لاحظ أن مثال المقارنة يهرب < و& في المرور نفسه وبالترتيب الصحيح. فتهريب & أولًا يمنع < و> من التحول خطأً إلى < و>.

في أغلب سياقات HTML لا تحتاج إلا إلى هروب خمسة أحرف، لكن من المفيد معرفة بعض الإضافات. يعرض الجدول التالي المجموعة الشائعة وبعض الرموز الطباعية الإضافية.

الكيانات المسمّاة مثل © أسهل قراءة في الشيفرة المصدرية. أما الكيانات الرقمية مثل © فتعمل حتى عندما لا يملك الحرف اسمًا معرفًا.

هناك أيضًا الصيغة السداسية عشرية: & تمثل نفس علامة & التي تمثلها &. خيار الكيانات الرقمية في هذه الأداة ينتج الصيغة العشرية افتراضيًا، لكن فك الهروب يدعم المراجع السداسية أيضًا.

إلى جانب الأحرف الخمسة المحجوزة، يعرّف HTML كيانات مسمّاة لحروف ورموز أخرى مثل é وñ. يفيد ذلك عندما لا يمكنك ضمان UTF-8 في الطرف الآخر.

كما يصف المستخدمون هذه الأحرف بطرق مختلفة مثل هروب اقتباسات HTML أو فاصلة HTML العليا أو علامة & أو أصغر من أو أكبر من. القواعد نفسها لا تتغير.

لا يعمل هروب HTML إلا حيث يكون المتصفح بصدد تحليل محتوى نصي من HTML. وهناك موضعان شائعان يكسران هذه الفرضية: عناصر <script>/<style>، وسمات HTML التي تحتوي فعليًا على JavaScript أو CSS.

داخل وسوم <script> و<style> لا يحلل المتصفح الكيانات أصلًا, بل يتعامل مع المحتوى على أنه JavaScript أو CSS خام. لذلك فإن هروب & داخل كتلة <script> لا يحمي شيئًا، بل يطبع & حرفيًا داخل الشيفرة، وهذا يكون خاطئًا عادةً. القيم الديناميكية تحتاج إلى هروب صحيح لسلاسل JS أو CSS، لا إلى كيانات HTML.

وينطبق الأمر نفسه على سمات مثل onclick وstyle. فالعنصران <p onclick="NOT-HERE"> و<p style="NOT-HERE"> يحتويان على JavaScript وCSS على التوالي. وهروب HTML وحده لا يجعل المحتوى غير الموثوق آمنًا داخلهما. لذا طابق نوع الهروب مع السياق الحقيقي، لا لمجرد أنه "داخل وسم HTML".

كثير من المطورين لا يحتاجون فقط إلى تحويل لمرة واحدة، بل يحتاجون المنطق نفسه داخل التطبيق. الأمثلة التالية تغطي ثلاث لغات شائعة لهروب HTML وفكّه.

في JavaScript لا توجد دالة مدمجة واحدة مخصصة لهروب HTML، لذلك تبقى طريقة textContent هي الخيار الأكثر أمانًا في المتصفح. وعلى الخادم، استخدم مكتبة متخصصة في هروب HTML.

أما Python وPHP فالأمر فيهما أبسط، لأن كلتيهما توفران دالة مخصصة ضمن الأدوات القياسية. لا حاجة لتثبيت شيء إضافي.

// Escape (safe display)
const el = document.createElement("div");
el.textContent = "Tom & Jerry";
const escaped = el.innerHTML;
console.log(escaped); // Tom & Jerry

// Unescape
const parser = new DOMParser();
const decoded = parser.parseFromString(escaped, "text/html").body.textContent;
console.log(decoded); // Tom & Jerry

import html

escaped = html.escape("Tom & Jerry")
print(escaped)  # Tom & Jerry

decoded = html.unescape(escaped)
print(decoded)  # Tom & Jerry

<?php
$escaped = htmlspecialchars("Tom & Jerry");
echo $escaped; // Tom &amp; Jerry

$decoded = htmlspecialchars_decode($escaped);
echo $decoded; // Tom & Jerry

هروب HTML يقلل من خطر XSS، لكنه ليس حماية كاملة بحد ذاته. فالهروب يجعل نص المستخدم يُعرض كأحرف مرئية بدلًا من وسم HTML, وهذا مفيد فعلًا وضروري. أما الحماية الكاملة فتحتاج إلى هروب واعٍ بالسياق: فجسم HTML والسمات وJavaScript وعناوين URL لكل منها قواعده الخاصة.

من ناحية الخصوصية، تعمل هذه الأداة بالكامل من جهة العميل داخل متصفحك. النص وHTML اللذان تلصقهما لا يُرفعان أبدًا إلى أي خادم. أما السلاسل الحساسة, مثل مسودات التعليقات والقوالب الداخلية واستجابات API التي تقوم بتصحيحها, فتبقى على جهازك طوال الوقت.

تعامل مع هذه الأداة على أنها وسيلة صحيحة لهروب كيانات HTML أو فكها من أجل العرض، وليست وسيلة حماية مستقلة بحد ذاتها. نظّف أي HTML تسمح به عمدًا, مثل النص الغني أو مخرجات Markdown, باستخدام مكتبة تعقيم مخصصة. وتحقق من المدخلات غير الموثوقة أيضًا على جهة الخادم، لا عند العرض فقط. أما في سياق URL، فإن أداة ترميز/فك ترميز URL يتعامل مع percent-encoding لسلاسل الاستعلام والمسارات.

معظم أخطاء هروب HTML وفكّه تعود إلى عدة أنماط متكررة. التعرّف عليها يوفر كثيرًا من الوقت.

إذا بدا النص وكأنه ما زال مُهرَّبًا مرتين بعد تشغيل فك الهروب مرة واحدة، فجرّب تشغيله مرة ثانية. هذا يعني غالبًا أن الترميز حدث مرتين في مرحلة سابقة.

هروب HTML ليس الطريقة الوحيدة لجعل النص آمنًا. الاختيار الصحيح يعتمد على وجهة الإخراج. يوضح الجدول التالي الفرق بين هروب HTML وبين الترميزات التي يخلط الناس بينها غالبًا.

استخدام الترميز الخاطئ يترك المشكلة الأساسية قائمة. أحرف هروب HTML لن تحمي عنوان URL، كما أن percent-encoding لن يحمي نص جسم HTML أيضًا. بالنسبة إلى سلاسل الاستعلام، يتعامل أداة ترميز/فك ترميز URL مع percent-encoding بالشكل الصحيح. وبالنسبة إلى البيانات الثنائية مثل الملفات والصور، يغطي أداة ترميز/فك ترميز Base64 ترميز Base64 وفك ترميزه. أما السلاسل الحرفية داخل JavaScript، فإن أداة هروب سلاسل JavaScript تطبق تسلسلات الهروب الصحيحة.