آیا تا به حال فکر کرده اید که چه {title} در really does?
At first glance, it looks like just a way to inject JavaScript variables into JSX.
But there’s more to it.
It’s not just syntax.
It’s security.
JSX Escapes by Default 🛡️
React automatically escapes any content inside JSX curly braces before rendering it to the DOM.
That means special characters like <با >وت & با خیال راحت تبدیل می شوند و از تفسیر HTML یا جاوا اسکریپت جلوگیری می کنند.
const title = '';
// JSX escapes it automatically
return <h1>{title}h1>;
خروجی:
<script>alert("XSS")</script>
✅ هیچ اسکریپت اجرا نشده است. فقط متن ایمن و قابل مشاهده.
🔗 به طور پیش فرض ، React DOM قبل از ارائه آنها از هر مقداری تعبیه شده در JSX فرار می کند.
چرا این مهم است
تصور کنید که این مقدار از ورودی کاربر (به عنوان مثال ، فرم نظر یا یک پارامتر URL) آمده است.
اگر واکنش از آن فرار نکرد ، این خط:
<h1>{userInput}h1>
می تواند به یک درب باز برای حملات XSS (اسکریپت های متقابل) تبدیل شود. اما به لطف طراحی React ، به طور پیش فرض ایمن است.
چه dangerouslySetInnerHTML؟
اکنون ، این جایی است که شما باید مراقب باشید:
<div dangerouslySetInnerHTML={{ __html: userInput }} />
این مکانیزم فرار React React است.
اگر از این استفاده می کنید ، می گویید React:
“من می دانم چه کاری انجام می دهم. به من اعتماد کنید ، این HTML ایمن است.”
این بدان معناست که … شما باید خودتان آن را با استفاده از چیزی مانند Dompurify ضد عفونی کنید.
غذای آماده
{} در JSX چیزی بیش از راهی برای جاسازی متغیرها نیست.
این یک است مکانیسم ایمنی که برنامه شما را از تزریق اسکریپت محافظت می کند.
مگر اینکه صریحاً از آن دور شوید ، JSX به طور پیش فرض رندر شما را ایمن می کند.
بنابراین دفعه بعد که این را می نویسید:
<h1>{title}h1>
به یاد داشته باشید – React پشت خود را گرفت. 😉
