روش‌های امنیتی
روش‌های امنیتی در انگولار به مجموعه‌ای از الگوها، ابزارها و بهترین شیوه‌ها اشاره دارد که برای محافظت از برنامه‌های تک‌صفحه‌ای (SPAs) در برابر تهدیدهای امنیتی مانند XSS (Cross-Site Scripting)، CSRF (Cross-Site Request Forgery)، تزریق داده و نشت اطلاعات استفاده می‌شود. با توجه به این‌که انگولار فریم‌ورکی مدرن و مبتنی بر کامپوننت است، رعایت اصول امنیتی در چرخه حیات هر کامپوننت و در جریان داده بین اجزا از اهمیت بالایی برخوردار است.
در توسعه‌ی برنامه‌های انگولار، روش‌های امنیتی باید از همان مراحل اولیه‌ی طراحی مدنظر قرار گیرند. این شامل استفاده‌ی صحیح از DomSanitizer برای جلوگیری از تزریق کد، استفاده از HttpInterceptor برای ایمن‌سازی درخواست‌های HTTP و کنترل صحیح state در سرتاسر برنامه است.
در این آموزش، یاد خواهید گرفت چگونه امنیت داده‌ها را از طریق data binding، lifecycle hooks و مدیریت state تضمین کنید. همچنین خواهید دید که چطور با استفاده از الگوهای انگولاری مانند dependency injection و component isolation، می‌توان از نفوذهای امنیتی جلوگیری کرد.
در نهایت، این درس به شما کمک می‌کند تا امنیت را به‌عنوان بخشی از معماری انگولار درک کرده و آن را در پروژه‌های واقعی پیاده‌سازی کنید تا اپلیکیشن‌هایی مقیاس‌پذیر، بهینه و ایمن بسازید.
مثال پایه
typescriptimport { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-secure-display',
template: ` <h2>نمایش امن محتوا در انگولار</h2> <div [innerHTML]="safeContent"></div>
`
})
export class SecureDisplayComponent {
rawHtml: string = '<img src=x onerror=alert("XSS Attack!")> این ورودی از کاربر آمده است.';
safeContent: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
// استفاده از DomSanitizer برای جلوگیری از اجرای اسکریپت‌های مخرب
this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.escapeHtml(this.rawHtml));
}
// تبدیل کاراکترهای خطرناک به فرم امن
escapeHtml(input: string): string {
return input.replace(/</g, "<").replace(/>/g, ">");
}
}در این مثال پایه، ما با مفهومی بسیار مهم در امنیت انگولار روبه‌رو هستیم: جلوگیری از تزریق اسکریپت‌ها (XSS). در انگولار، یکی از راهکارهای اصلی برای مقابله با این تهدید، استفاده از DomSanitizer است که به‌صورت پیش‌فرض از اجرای کدهای مشکوک جلوگیری می‌کند.
کلاس DomSanitizer این امکان را فراهم می‌کند که ورودی‌های HTML که از منابع غیرقابل اعتماد (مثل کاربران) دریافت می‌شوند، قبل از نمایش در DOM، پاک‌سازی (sanitize) شوند. در این مثال، از متد bypassSecurityTrustHtml() همراه با تابع escapeHtml() استفاده شده تا از هرگونه اسکریپت تزریق‌شده جلوگیری شود.
در معماری component-based انگولار، هر کامپوننت باید فقط داده‌ی خودش را کنترل کند و از تعامل مستقیم با DOM بپرهیزد. به این ترتیب، امنیت داده‌ها در هر سطح از برنامه حفظ می‌شود و احتمال بروز خطا یا نشت اطلاعات کاهش می‌یابد.
این پیاده‌سازی، همچنین اهمیت مدیریت state را نشان می‌دهد، زیرا اگر داده‌های ورودی بدون اعتبارسنجی بین کامپوننت‌ها منتقل شوند، ممکن است زمینه‌ی سوءاستفاده فراهم شود. در پروژه‌های واقعی، این الگو در صفحات دارای ورودی کاربر مانند فرم‌های ثبت‌نام یا نظرات کاربردی است.
مثال کاربردی
typescriptimport { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = sessionStorage.getItem('authToken');
// افزودن هدر احراز هویت برای جلوگیری از دسترسی غیرمجاز
const secureReq = req.clone({
setHeaders: {
Authorization: token ? `Bearer ${token}` : ''
}
});
return next.handle(secureReq);
}
}
// ماژول اصلی برنامه
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
bootstrap: [AppComponent]
})
export class AppModule { }در این مثال کاربردی، از HttpInterceptor استفاده شده تا امنیت درخواست‌های HTTP تقویت شود. این رویکرد به ما اجازه می‌دهد تمام درخواست‌ها را در یک نقطه مرکزی مدیریت و هدرهای امنیتی مانند Authorization را به هر درخواست اضافه کنیم.
در انگولار، Interceptor یکی از ابزارهای مهم برای ایمن‌سازی جریان داده بین کلاینت و سرور است. با پیاده‌سازی آن، دیگر نیازی به افزودن دستی هدرها در هر سرویس یا کامپوننت نیست و از اشتباهات تکراری جلوگیری می‌شود.
از نظر چرخه حیات (lifecycle)، این الگو قبل از ارسال درخواست به سرور اجرا می‌شود، به همین دلیل فرصت مناسبی برای اعتبارسنجی داده‌ها و جلوگیری از درخواست‌های غیرمجاز فراهم می‌کند.
همچنین، این روش باعث بهبود عملکرد و قابلیت نگهداری (maintainability) کد می‌شود زیرا منطق امنیتی از منطق نمایشی جدا می‌شود. این رویکرد با جلوگیری از prop drilling و مدیریت متمرکز state، امنیت و پایداری کلی سیستم را افزایش می‌دهد.
بهترین شیوه‌ها و خطاهای رایج در انگولار:
- بهترین شیوه‌ها:
* همیشه داده‌های کاربر را قبل از نمایش sanitize کنید.
* از HttpInterceptor برای افزودن هدرهای امنیتی و مدیریت centralized استفاده کنید.
* state را immutable نگه دارید تا از دستکاری غیرمجاز جلوگیری شود.
* از ChangeDetectionStrategy.OnPush برای جلوگیری از رندرهای غیرضروری استفاده کنید.
* از CSP (Content Security Policy) برای جلوگیری از بارگذاری اسکریپت‌های ناشناس بهره ببرید. - خطاهای رایج:
* استفاده مستقیم از innerHTML بدون sanitize.
* ذخیره توکن‌ها در localStorage به‌جای sessionStorage یا HttpOnly cookie.
* اشتراک state بین کامپوننت‌ها بدون سرویس مرکزی.
* دستکاری مستقیم DOM با document.querySelector. - راهنمای اشکال‌زدایی:
* لاگ‌گیری خطاهای HTTP در Interceptor.
* بررسی پیام‌های امنیتی در کنسول مرورگر. - بهینه‌سازی عملکرد:
* Lazy loading برای ماژول‌های غیرضروری.
* استفاده از trackBy در ngFor جهت کاهش رندر. - ملاحظات امنیتی:
* هیچ‌گاه از bypassSecurityTrust بدون دلیل استفاده نکنید.
* اعتبارسنجی سمت سرور را در کنار سمت کلاینت اجرا کنید.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| DomSanitizer | ابزار داخلی برای جلوگیری از XSS و تزریق کد | this.sanitizer.bypassSecurityTrustHtml(value) |
| HttpInterceptor | مدیریت و تغییر درخواست‌های HTTP برای افزایش امنیت | useClass: AuthInterceptor |
| Content Security Policy (CSP) | سیاست مرورگر برای محدودسازی منابع اسکریپت | meta http-equiv="Content-Security-Policy" |
| Immutable State | مدیریت state به‌صورت غیرقابل تغییر | Object.freeze(state) |
| ChangeDetectionStrategy.OnPush | جلوگیری از رندر اضافی کامپوننت‌ها | changeDetection: ChangeDetectionStrategy.OnPush |
| SafeHtml | نوع داده امن برای نمایش HTML در DOM | safeContent: SafeHtml |
جمع‌بندی و گام‌های بعدی در انگولار:
در این درس آموختید که روش‌های امنیتی در انگولار نه تنها برای جلوگیری از حملات XSS و CSRF بلکه برای ساختاردهی ایمن برنامه‌ها ضروری هستند. با شناخت ابزارهایی مانند DomSanitizer، HttpInterceptor و CSP می‌توانید کنترل امنیتی کاملی بر داده‌ها و جریان اطلاعات داشته باشید.
این مفاهیم بخشی از درک عمیق معماری component-based در انگولار هستند که امنیت، پرفورمنس و نگهداری آسان را همزمان تضمین می‌کنند.
برای گام‌های بعدی، توصیه می‌شود با مفاهیم Authentication و Authorization پیشرفته، مدیریت توکن با JWT و امنیت ماژول‌های lazy-loaded آشنا شوید. همچنین استفاده از تست‌های امنیتی خودکار و linting برای اطمینان از رعایت استانداردهای امنیتی بسیار مؤثر است.
منابع پیشنهادی:
Angular Security Guide, OWASP Angular Cheat Sheet, Angular HTTP Best Practices
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود