1. پیشگیری از اسکریپت های سایت متقاطع (XSS)
XSS یک آسیب پذیری رایج است که در آن مهاجم اسکریپت های مخرب را به یک وب سایت قابل اعتماد تزریق می کند. هنگامی که کاربر از سایت بازدید می کند ، اسکریپت انجام می دهد ، به طور بالقوه داده های حساس ، کوکی های جلسه یا ارائه کاربر را سرقت می کند.
اصل OWASP: با تمام داده های ارائه شده توسط کاربر به عنوان غیرقابل اعتماد رفتار کنید. توانبخشی و رمزگذاری ورودی و خروجی برای جلوگیری از تزریق کد.
سناریوی مشکل: برنامه رسانه های اجتماعی به کاربران امکان ایجاد نشریات را می دهد. مهاجم نظری را منتشر می کند که حاوی فیلمنامه مخرب زیر است: اگر برنامه این اظهار نظر را همانطور که هست بیان می کند ، هر کاربری که تماشا می کند ، برای جلسه مهاجم در معرض بیسکویت خود قرار می گیرد.
پاسخ به تبدیل و مثال:
ویژگی امنیتی React برای پیشگیری از XSS اجتناب خودکار آن از محتوای ارائه شده در JSX است. پیش فرض React Dom از هر مقداری تعبیه شده در بریس های فرفری فرار می کند ({}) قبل از تغییر آنها. این یعنی برچسب ها و سایر کد های مخرب به رشته ها تبدیل می شوند و به عنوان یک متن به جای اینکه به عنوان یک کد اجرا شوند ، نشان داده می شوند.
// Unsafe and vulnerable way (DO NOT DO THIS)
function BadPost({ content }) {
// Using dangerouslySetInnerHTML bypasses React's escaping mechanism.
// This is a major security risk if 'content' is not sanitized.
return div dangerouslySetInnerHTML={{ __html: content }} />;
}
// Safe and recommended way
function SafePost({ content }) {
// React automatically escapes 'content' here.
// If 'content' is "I am a post with a script ",
// React renders it as a plain string, preventing the script from running.
return div>{content}div>;
}
توجه داشته باشید dangerouslySetInnerHTML: این ویژگی باید با احتیاط شدید مورد استفاده قرار گیرد و فقط در صورت داشتن دلیل محکمی برای ترسیم HTML خام. اگر نیاز به استفاده از آن دارید ، مطمئن شوید که اولین محتوایی که تزریق می کنید DOMPurifyحرف
2. از جعل درخواست یک درخواست متقابل (CSRF) جلوگیری کنید
CSRF کاربر را برای ارسال درخواست مخرب به سرور از طرف یک کاربر قابل اعتماد و بدون اطلاع آنها وارد می کند.
اصل OWASP: مؤثرترین محافظت CSRF Tokena است. سرور یک نشانگر منحصر به فرد و غیرقابل پیش بینی تولید می کند ، آن را در یک قسمت فرم پنهان شامل می کند و آن را با هر درخواست تغییر دولت (انتشار ، انتشار ، حذف) بررسی می کند.
سناریوی مشکل: وب سایت بانک دارای transfer نقطه پایان که گیرنده و یک مقدار را می گیرد. مهاجم این نقطه پایان را می داند و یک وب سایت جعلی را با فرم پنهان ایجاد می کند که هنگام مراجعه کاربر از صفحه ، به طور خودکار درخواست انتقال را به بانک ارسال می کند. اگر کاربر قبلاً وارد حساب بانکی خود شده باشد ، درخواست تأیید می شود و انتقال به پایان می رسد.
پاسخ به تبدیل و مثال:
در برنامه React مدرن ، این کار بر روی سرور و در تماس های API پردازش می شود ، نه در قسمت جلویی. نقش برنامه React اطمینان از توکین CSRF در درخواست ها است.
- در کنار سرور: سرور یک نشانگر CSRF تولید می کند و آن را به مشتری می فرستد ، معمولاً به عنوان کوکی یا بار اولیه در صفحه.
- کشور مشتری (واکنش): برنامه React این علامت را می خواند. برای هر یک
POST. ،PUTیاDELETEدرخواست ، برنامه شامل نشانگر در یک عنوان HTTP سفارشی است (به عنوان مثال ،X-CSRF-Token).
// Example using a CSRF token from a cookie with Axios
import axios from 'axios';
import Cookies from 'js-cookie';
const csrfToken = Cookies.get('csrf-token'); // Assuming the server sent a cookie
// Create an Axios instance to automatically include the CSRF token
const apiClient = axios.create({
headers: {
'X-CSRF-Token': csrfToken,
},
});
async function submitProtectedForm(data) {
try {
// This request will now include the CSRF token in the header
const response = await apiClient.post('/api/protected-action', data);
return response.data;
} catch (error) {
console.error('CSRF protection failed:', error);
throw error;
}
}
3. سیاست امنیت محتوا (CSP)
CSP یک لایه اضافی است که به کاهش XSS و سایر حملات تزریق داده کمک می کند. این مشخص می کند که کدام دامنه ها باید منابع معتبر را برای اسکریپت ها ، سبک ها و منابع دیگر در نظر بگیرند.
اصل OWASP: از یک CSP قوی و محدود کننده برای ایجاد “لیست مجوزها” در منابع معتبر استفاده کنید. این عنوان از سرور ارسال می شود.
سناریوی مشکل: مهاجم با موفقیت سناریوی مخرب را تزریق می کند S بدون مرورگر CSP این اسکریپت را بارگیری و اجرا می کند زیرا معتبر است یک نشانگر با مرورگر CSP درخواست را مسدود می کند evil.com دامنه
پاسخ به تبدیل و مثال:
این یک مشکل از طرف سرور است. واکنش انتهایی جلوی عناوین HTTP را کنترل نمی کند ، اما باید پیکربندی شود تا در قوانین CSP کار کند.
پیکربندی سرور (به عنوان مثال در express.js) ::
const express = require('express');
const app = express();
app.use((req, res, next) => {
// Set a Content Security Policy header
res.setHeader(
'Content-Security-Policy',
"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
);
next();
});
برنامه React باید اطمینان حاصل کند که تمام اسکریپت ها و منابع دیگر آن توسط یک دامنه با خطوط سفید ارائه می شود ('self' در این مورد) اگر از CDN شخص ثالث برای قلم یا کتابخانه استفاده می کنید ، باید دامنه آنها را به CSP اضافه کنید.
4. دلایل امنیتی HTML5
مرورگرهای مدرن و HTML5 ویژگی های جدیدی را ارائه می دهند که در صورت عدم استفاده دقیق ، می توانند آسیب پذیری ها را معرفی کنند.
اصل OWASP: به خاطر داشته باشید ویژگی های جدید HTML5 و اثرات امنیتی آنها.
پاسخ به تبدیل و مثال:
-
اصلاح API: از استفاده از API جدید HTML5 خودداری کنید
localStorageداده های حساس را ذخیره کنید (به عنوان مثال نشانه ها) زیرا در برابر حملات XSS آسیب پذیر هستند. آنها را درhttpOnlyدر عوض ، کوکی ها. -
جعبه ماسه
: هنگام استفادهعناصری برای جاسازی یک محتوای شخص ثالث ، همیشه استفاده کنیدsandboxیک ویژگی برای محدود کردن آنچه می تواند محتوای ساخته شده را ایجاد کند. -
جلوگیری از TabNabbing: هنگام باز کردن اتصالات خارجی با
target="_blank"استفاده کردنrel="noopener noreferrer"برای جلوگیری از دریافت بخش جدید از شیء پنجره برگه.
// React component showing safe practices
function SafeLink({ url, text }) {
// Prevents the new tab from accessing 'window.opener' and prevents referrer information
return a href={url} target="_blank" rel="noopener noreferrer">{text}a>;
}
// Sandbox an iframe
function SandboxedIframe({ src }) {
return (
iframe
src={src}
sandbox="allow-scripts allow-same-origin allow-popups"
title="sandboxed content"
>iframe>
);
}
دلایل امنیتی پیش فرض پشتیبانی شده توسط React
React خود چندین اقدامات امنیتی پیش فرض ، عمدتاً با تمرکز بر ارائه ایمن محتوای پویا ارائه می دهد.
-
به طور خودکار از داده ها خودداری کنید: همانطور که در بخش XSS ذکر شد ، واکنش به طور خودکار از تمام مقادیر پویا ارائه شده در JSX جلوگیری می کند. این مهمترین عملکرد امنیتی آن برای توسعه قسمت جلویی است. این شخصیت های بالقوه مضر را تغییر می دهد (
,>) در موضوعات HTML ایمن ، که آنها را بی ضرر می کند. -
هیچ دستکاری مستقیم از DOM وجود ندارد: DOM مجازی و معماری مؤلفه React دستکاری مستقیم DOM را که منبع مشترک آسیب پذیری های امنیتی است ، دلسرد می کند. توسعه دهندگان تشویق می شوند تا وضعیت مؤلفه را به روز کنند و با انتزاع یک لایه از خطرات امنیتی بالقوه ، به روزرسانی های DOM را به روز کنند.
-
عایق اجزای: مدل مؤلفه باعث جداسازی نگرانی ها و محاصره می شود. اگرچه این یک عملکرد امنیتی مستقیم نیست ، اما اجزای طراحی شده به خوبی می توانند از نقص نقص امنیتی از طریق برنامه جلوگیری کنند ، زیرا ممکن است در یک مؤلفه آسیب پذیری داشته باشد.
سریال های سریال تقلب OWASP
https://cheatsheetseries.owasp.org/
