امنیت (Security)

اینجا «امنیت انگولار» را ساده یاد می گیریم. «XSS (تزریق اسکریپت)» یعنی اجرای کد بد در صفحه. «Sanitization (پاک سازی)» یعنی تمیزکردن مقادیر خطرناک قبل از ورود به DOM. با اتصال ویژگی ها، انگولار خودش پاک سازی می کند.

مبانی امنیت در انگولار

انگولار برای بیشتر اتصال ها، XSS را مسدود می کند. «DOM» همان درخت عناصر صفحه است. همیشه از اتصال ویژگی مثل [innerHTML]، [href] و [src] استفاده کن.

• XSS: اجرای کد بد از ورودی کاربر.
• Sanitization: حذف یا تبدیل مقادیر خطرناک.
• اتصال ویژگی ها باعث اجرای پاک ساز می شود.
• DomSanitizer فقط در موارد نادر و بررسی شده.

// Angular sanitizes [innerHTML], [href], [src]
import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `<div [innerHTML]=\"html\"></div>`
})
export class DemoComponent {
  html: string = '<b>Hello</b> <script>alert(1)<\/script>';
}

مشاهده در ادیتور

نکته: برای آشنایی با قالب ها به قالب ها در انگولار برو. این هم لینک خود صفحه برای مرجع: امنیت انگولار.

Sanitization چگونه فعال می شود؟

وقتی مقدار را به ویژگی وصل می کنی، پاک ساز اجرا می شود. در مدرسه هم قبل از استفاده از قیچی، مراقب هستی. اینجا هم انگولار مراقب است.

// Property binding runs the sanitizer
// Unsafe values are cleaned before hitting the DOM
<img [src]=\"photoUrl\" alt=\"...\">
<a [href]=\"profileUrl\">Profile</a>

مشاهده در ادیتور

نمونه کامل پاک سازی

این نمونه نشان می دهد [innerHTML] چطور اسکریپت های خطرناک را حذف می کند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Sanitized HTML</h3>
    <div [innerHTML]=\"html\"></div>
  `
})
export class AppComponent {
  html: string = '<b>Hello</b> <script>alert(\'xss\')<\/script>';
}

bootstrapApplication(AppComponent);

مشاهده در ادیتور

برای دسترسی امن به داده ها در شبکه، صفحه HTTP در انگولار را هم ببین.

DomSanitizer و مسیرهای امن

«DomSanitizer» ابزاری برای علامت گذاری «ایمن» است. اما مثل کلید انبار مدرسه است؛ فقط مسئول استفاده می کند. هرگز ورودی کاربر را کورکورانه امن نکن.

import { DomSanitizer } from '@angular/platform-browser';

// Prefer validated values with property bindings.
// Avoid bypass unless strictly necessary and audited.
// const safe = sanitizer.bypassSecurityTrustUrl(untrusted);

مشاهده در ادیتور

هشدار: اگر مجبور به bypass شدی، دامنه و مسیر را ثابت نگه دار. مستندسازی کن و کد را کوچک و قابل بازرسی بنویس.

گام های عملی برای امنیت انگولار

1. همیشه از اتصال ویژگی ها استفاده کن تا پاک سازی فعال شود.
2. از رشته سازی آدرس ها و HTML خودداری کن.
3. DomSanitizer را فقط پس از بازبینی استفاده کن.
4. مبدأها را محدود کن و مسیرها را ثابت نگه دار.
5. در صورت امکان، سیاست های امنیتی را در سرور اعمال کن.

جمع بندی سریع

• اتصال ویژگی ها، خط دفاع اول است.
• innerHTML پاک سازی می شود.
• رشته سازی مستقیم خطرناک است.
• DomSanitizer آخرین انتخاب است.
• منابع را محدود و مستندسازی کن.