فرار و بازگردانی HTML

فرار HTML چیست؟

فرار HTML فرایندی است که در آن کاراکترهایی که در HTML معنای خاص دارند با مراجع موجودیت متناظرشان جایگزین می‌شوند. پنج کاراکتری که باید فرار داده شوند عبارتند از: علامت و (&)، کمتر از (<)، بیشتر از (>)، نقل‌قول دوگانه (") و نقل‌قول تکی ('). بدون فرار، مرورگر این کاراکترها را به‌جای متن قابل نمایش، به‌عنوان دستورالعمل نشانه‌گذاری تفسیر می‌کند که هم رندر صفحه را خراب می‌کند و هم در برابر حملات تزریق آسیب‌پذیری ایجاد می‌کند.

مشخصات HTML (که توسط WHATWG نگهداری می‌شود) دو شکل از مراجع کاراکتر تعریف می‌کند: موجودیت‌های نامی مانند &amp; و موجودیت‌های عددی مانند &#38; یا &#x26;. موجودیت‌های نامی در کد منبع راحت‌تر خوانده می‌شوند. موجودیت‌های عددی (اعشاری یا هگزادسیمال) می‌توانند هر نقطه کد Unicode را نمایش دهند و برای کاراکترهایی که نام مستعار ندارند مفید هستند. هر دو شکل در مرورگر خروجی یکسانی تولید می‌کنند.

بازگردانی (که به آن رمزگشایی نیز گفته می‌شود) عملیات معکوس است: تبدیل مراجع موجودیت به کاراکترهای واقعی. این عملیات هنگام استخراج متن از کد منبع HTML، مهاجرت محتوا بین سیستم‌ها، یا اشکال‌زدایی قالب‌هایی که موجودیت‌ها را دوبار رمزگذاری می‌کنند رایج است. این ابزار هر دو جهت را در مرورگر پردازش می‌کند، بنابراین می‌توانید منطق فرار خود را در چند ثانیه تأیید کنید یا متن ساده را از یک منبع HTML پر بازیابی کنید.

چرا از ابزار فرار HTML استفاده کنیم؟

جایگزینی دستی کروشه‌های زاویه‌ای و علامت‌های و در متون حجیم خسته‌کننده و مستعد خطاست. یک ابزار اختصاصی ورودی شما را در یک مرحله تبدیل می‌کند، بدون نیاز به نصب.

موارد استفاده از فرار HTML

جدول مرجع موجودیت‌های HTML

جدول زیر موجودیت‌های HTML پرکاربرد را فهرست می‌کند. پنج کاراکتر خاص (& < > " ') باید همیشه در محتوای HTML و مقادیر ویژگی فرار داده شوند. سایر موجودیت‌ها اختیاری هستند اما برای کاراکترهایی که تایپشان دشوار است یا در کد منبع ابهام دارند مفیدند.

فرار در مقابل بازگردانی: چه زمانی از کدام استفاده کنیم

این دو عملیات معکوس یکدیگرند. انتخاب جهت اشتباه منجر به خروجی دوبار رمزگذاری‌شده یا ناامن می‌شود.

نمونه‌های کد

در زیر نمونه‌های کاری از فرار و بازگردانی HTML در چهار زبان برنامه‌نویسی آمده است. هر قطعه هر دو جهت را پوشش می‌دهد و موارد لبه‌ای مانند نقل‌قول‌های تودرتو و موجودیت‌های عددی را مدیریت می‌کند.

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

سوالات متداول