Как защитить Angular-приложение от XSS?angular-88

Что такое XSS?

Cross-Site Scripting (XSS) - это уязвимость, позволяющая злоумышленнику внедрять вредоносные скрипты в веб-страницы, которые просматривают другие пользователи.

Встроенные механизмы защиты Angular

Angular предоставляет несколько уровней защиты:

1. Автоматическое экранирование

Angular автоматически экранирует все данные в шаблонах:

<p>{{ userControlledValue }}</p> <!-- Безопасно -->

2. Санитизация значений

Angular использует DomSanitizer для очистки значений:

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

constructor(private sanitizer: DomSanitizer) {}

safeHtml = this.sanitizer.bypassSecurityTrustHtml(untrustedValue);

Основные методы защиты

1. Использование безопасных привязок

Всегда предпочитайте:

<!-- Безопасно -->
<div [textContent]="userInput"></div>

<!-- Опасно -->
<div [innerHTML]="userInput"></div>

2. Обработка шаблонов

  • Используйте AOT-компиляцию (ng build --prod)
  • Откажитесь от динамической компиляции шаблонов

3. Content Security Policy

Добавьте в index.html:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' 'unsafe-eval';
               style-src 'self' 'unsafe-inline';
               img-src 'self' data:;">

4. HTTP-заголовки безопасности

Настройте сервер для отправки:

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

5. Обработка пользовательского ввода

Всегда валидируйте и санируйте данные:

import { Injectable } from '@angular/core';

@Injectable()
export class SanitizationService {
  sanitizeInput(input: string): string {
    return input.replace(/<script.*?>.*?<\/script>/gi, '');
  }
}

Опасные практики

  1. Использование innerHTML:
<!-- Опасно! -->
<div [innerHTML]="untrustedHtml"></div>
  1. Динамическое создание шаблонов:
// Опасно!
this.compiler.compileModuleAndAllComponentsAsync(moduleType)
  1. Использование bypassSecurityTrust* без необходимости:
// Опасно без веской причины!
this.sanitizer.bypassSecurityTrustScript(untrustedCode);

Дополнительные меры защиты

1. Использование nonce-значений

<script nonce="r4nd0m">...</script>

В CSP:

script-src 'self' 'nonce-r4nd0m'

2. Защита от CSRF

Используйте Angular HttpClient с CSRF-токенами:

import { HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })
  ]
})

3. Регулярное обновление зависимостей

Проверяйте уязвимости:

npm audit
ng update

Отладка и тестирование

  1. Тестирование на уязвимости:

    • Используйте OWASP ZAP или Burp Suite
    • Проводите ручное тестирование с payloads типа <script>alert(1)</script>

  2. Логирование CSP нарушений:

Content-Security-Policy-Report-Only: ...; report-uri /csp-report

Резюмируем

Angular предоставляет мощные встроенные механизмы защиты от XSS, но их недостаточно. Комбинируйте автоматическое экранирование, CSP, санитизацию данных и безопасные практики разработки для комплексной защиты. Всегда валидируйте пользовательский ввод и минимизируйте использование опасных методов.

Вопросы

Собеседования