ترميز كيانات HTML مقابل ترميز URL: الفروقات الأساسية
يحوّل ترميز كيانات HTML الأحرف مثل <، و>، و&، و" إلى كيانات HTML (<، و>، و&، و") لعرضها بأمان في صفحات الويب. أما ترميز URL فيحوّل الأحرف إلى صيغة %XX لنقلها بأمان داخل عناوين URL. ويحمي كل منهما من أنواع مختلفة من الهجمات ويُستخدم في سياقات مختلفة.
ما هو ترميز كيانات HTML؟
ترميز كيانات HTML (ويُسمى أيضًا الهروب في HTML) يحوّل الأحرف ذات المعنى الخاص في HTML إلى مراجع كيانات يعرضها المتصفح على شكل الحرف الحرفي نفسه بدلًا من تفسيرها كوسوم (markup). وأهم الأحرف التي ينبغي ترميزها هي <، و>، و&، و"، و'.
بدون ترميز HTML، فإن سلسلة نصية مثل <script>alert('XSS')</script> سيُنفّذها المتصفح كشيفرة JavaScript. أما مع الترميز، فتصبح <script>alert('XSS')</script> وتُعرض كنص غير ضار.
يمكن كتابة كيانات HTML بصيغتين: كيانات مُسمّاة مثل &، و<، و"، أو كيانات رقمية مثل &، و<، و". وتستخدم الكيانات الرقمية نقطة الترميز (code point) في Unicode للحرف، ويمكنها تمثيل أي حرف من أحرف Unicode.
<!-- قبل ترميز HTML -->
<p>The formula is: x < y & y > z</p>
<!-- المتصفح يفسّر < على أنه بداية وسم! -->
<!-- بعد ترميز HTML -->
<p>The formula is: x < y & y > z</p>
<!-- المتصفح يعرض: x < y & y > z -->
<!-- كيانات HTML الشائعة -->
& → & (علامة العطف)
< → < (أصغر من)
> → > (أكبر من)
" → " (علامة تنصيص مزدوجة)
' → ' (علامة تنصيص مفردة / فاصلة عليا)
→ (مسافة غير قابلة للكسر)
ما هو ترميز URL؟
ترميز URL (percent-encoding) يحوّل الأحرف غير الآمنة في عناوين URL إلى علامة نسبة مئوية متبوعة برقمين ست عشريين يمثلان قيمة البايت. وهو معرّف في RFC 3986 ويضمن ألا تحتوي عناوين URL إلا على أحرف ASCII صالحة يمكن نقلها بأمان عبر الإنترنت.
ترميز URL ضروري لأن عناوين URL لها بنية صارمة تعمل فيها بعض الأحرف كفواصل (/، و?، و&، و#، و=). وعندما تظهر هذه الأحرف داخل البيانات (مثل قيم مُعاملات الاستعلام)، يجب ترميزها لمنع تفسيرها كعناصر بنيوية.
// أمثلة على ترميز URL
space → %20
& → %26
= → %3D
? → %3F
# → %23
/ → %2F
+ → %2B
// عنوان URL كامل مع مُعامل استعلام مُرمّز
https://example.com/search?q=salt%20%26%20pepper
// قيمة q هي "salt & pepper"
جدول المقارنة
| الميزة | ترميز كيانات HTML | ترميز URL |
|---|---|---|
| الغرض | العرض الآمن في صفحات HTML | النقل الآمن في عناوين URL |
| المعيار | مواصفة HTML/WHATWG | RFC 3986 |
| الصيغة | &name; أو &#number; |
%XX (قيمة البايت الست عشرية) |
| المسافة تصبح | (غير قابلة للكسر) أو تُترك كما هي |
%20 أو + |
| & تصبح | & |
%26 |
| < تصبح | < |
%3C |
| تمنع | هجمات XSS، وتلف HTML | تلف عناوين URL، وهجمات الحقن |
| السياق | جسم مستند HTML وسماته | مسارات URL وسلاسل الاستعلام والأجزاء |
| دالة JS | لا توجد دالة مدمجة (استخدم مكتبة أو واجهات DOM) | encodeURIComponent() |
متى تحتاج إلى كليهما؟
هناك مواقف شائعة تحتاج فيها إلى ترميز HTML وترميز URL معًا. وأكثرها تكرارًا هو عندما تضع عنوان URL داخل سمة HTML، مثل سمة href أو src. فيجب أولًا ترميز عنوان URL ترميزًا صحيحًا، ثم ترميز أي أحرف HTML خاصة في الناتج ترميز HTML.
<!-- الخطوة 1: ترميز URL لقيمة مُعامل الاستعلام -->
<!-- القيمة: "Tom & Jerry" → بعد ترميز URL: "Tom%20%26%20Jerry" -->
<!-- الخطوة 2: بناء عنوان URL -->
<!-- URL: https://example.com/search?q=Tom%20%26%20Jerry -->
<!-- الخطوة 3: ترميز HTML لعنوان URL لاستخدامه في سمة href -->
<a href="https://example.com/search?q=Tom%20%26%20Jerry">
Search for Tom & Jerry
</a>
<!-- في هذه الحالة، لا تحتاج تسلسلات % إلى ترميز HTML -->
<!-- لأن % ليس حرفًا خاصًا في HTML -->
<!-- لكن إذا احتوى عنوان URL على & كفاصل، فيجب ترميزه بترميز HTML: -->
<a href="https://example.com/search?q=cats&sort=name">
Search cats sorted by name
</a>
<!-- بدون &، قد يفسّر المتصفح &sort على أنه كيان HTML -->
في أطر العمل الحديثة مثل React وVue وAngular، يُعالَج ترميز HTML تلقائيًا عند استخدام تعبيرات القوالب أو JSX. ومع ذلك، لا يزال يتعين إجراء ترميز URL صراحةً عند بناء عناوين URL من بيانات ديناميكية.
// React - ترميز HTML تلقائي، أما ترميز URL فليس كذلك
function SearchLink({ query }) {
// يجب أن يكون ترميز URL صريحًا
const url = '/search?q=' + encodeURIComponent(query);
// ترميز HTML تلقائي في JSX
return <a href={url}>Search for {query}</a>;
// يقوم React تلقائيًا بترميز HTML لكل من href والمحتوى النصي
}
الوقاية من XSS: أي ترميز تستخدم وأين
تتطلب الوقاية من البرمجة عبر المواقع (XSS) تطبيق الترميز الصحيح بناءً على السياق الذي يُوضع فيه إدخال المستخدم. فاستخدام النوع الخاطئ من الترميز في سياق معيّن لا يوفّر أي حماية.
- سياق جسم HTML: استخدم ترميز كيانات HTML. فهذا يمنع تفسير الوسوم المحقونة مثل
<script>كوسوم. - سياق سمات HTML: استخدم ترميز كيانات HTML واحرص دائمًا على وضع قيم السمات بين علامات تنصيص. فالسمات غير المحاطة بعلامات تنصيص يمكن الخروج منها حتى مع ترميز HTML.
- سياق URL (href، وsrc): استخدم ترميز URL للأجزاء الديناميكية، ثم رمّز عنوان URL بالكامل بترميز HTML إذا وضعته في HTML. وتحقّق من أن عنوان URL يبدأ بمخطط آمن (
https:) لمنع عناوينjavascript:. - سياق JavaScript: استخدم الهروب لسلاسل JavaScript النصية (JSON.stringify أو مكتبة مخصّصة). فلا ترميز HTML ولا ترميز URL يكفي في سياق JavaScript.
- سياق CSS: استخدم الهروب في CSS. فترميزا HTML وURL لا يحميان من الحقن في CSS.
المبدأ الأساسي هو: رمّز وفقًا لسياق الإخراج، لا وفقًا لمصدر الإدخال. فقد يحتاج جزء واحد من إدخال المستخدم إلى ترميز مختلف حسب مكان ظهوره في الاستجابة. لا تعتمد أبدًا على التحقق من الإدخال وحده للوقاية من XSS؛ بل طبّق دائمًا ترميز الإخراج.