Лучшие практики безопасности Angular

Angular - это популярный front-end framework, созданный компанией Google. Как и другие популярные front-end фреймфорки, он использует архитектуру, основанную на компонентах для структурирования компонентов.

В этой статье будут рассмотрены существующие практики безопасности, которые следует использовать при написании Angular приложения.

Предотвращение межсайтового скриптинга (XSS)

Межсайтовый скриптинг позволяет злоумышленнику внедрить вредоносный код в веб-страницу.

Чтобы это предотвратить, Angular создает переменные, которые интерполируются в шаблоны.

Angular шаблоны представляют собой исполняемый код, поэтому любые вредоносные куски кода необходимо "дезинфицировать".

Интерполяция очищена, но не innerHtml. Например:

<p>{{htmlSnippet}}</p>

Очищена, но при этом:

<p [innerHTML]="htmlSnippet"></p>

- нет.

Следовательно, необходимо быть осторожным, при использовании innerHtml, чтобы предотвратить выполнение строк с тэгом script.

Прямое использование DOM API и явных вызовов очистки

Встроенные DOM API не защищают нас от уязвимостей безопасности.

document, ElementRef имеют небезопасные методы. Перед их использованием следует запустить метод DomSanitizer.sanitize и соответствующий SecurityContext.

Использование автономного компилятора шаблонов

Возможно использование автономного компилятора шаблонов в продакшене для предотвращения внедрения шаблонов.

Доверие безопасным ценностям

Можно доверять безопасным значениям, используя DomSanitizer и вызывать один из следующий методов:

• bypassSecurityTrustHtml

• bypassSecurityTrustScript

• bypassSecurityTrustStyle

• bypassSecurityTrustUrl

• bypassSecurityTrustResourceUrl

Для того, чтобы доверять коду, устанавливаемому динамически.

Например, есть следующий код, который позволяет запустить JavaScript код в href атрибуте:

app.component.ts :

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Component({  
	selector: "app-root",
	templateUrl: "./app.component.html", 
  styleUrls: ["./app.component.css"]
})
export class AppComponent {  
	dangerousUrl;  
  trustedUrl;  
  constructor(private sanitizer: DomSanitizer) {    
  	this.dangerousUrl = 'javascript:alert("Hi")';    
    this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);  
  }
}

app.component.html :

<p><a class="e2e-trusted-url" [href]="trustedUrl">Click me</a></p>

При передаче this.dangerousUrl в sanitizer.bypassSecurityTrustUrl мы верим, что код безопасен.

Уязвимости на HTTP уровне

Angular из коробки имеет поддержку, помогающую предотвратить распространённые уязвимости ( подделка межсайтовых запросов CSRF/XSRF или межсайтовый скриптинг XSS.

Подделка межсайтовых запросов — это атака, при которой злоумышленник выдает себя за законного пользователя и делает запрос от имени этого пользователя.

Распространенным методом защиты от CSRF является отправка случайно сгенерированного токена аутентификации в файле cookie. Клиент считывает файл cookie и добавляет настраиваемый заголовок запроса с токеном во все последующие запросы.

Сервер сравнивает полученное значение cookie со значением заголовка запроса и отклоняет запрос, если значения отсутствуют или не совпадают.

Все браузеры реализуют политику одного и того же источника. Только код с веб-сайта, на котором установлены файлы cookie, может прочитать файл cookie и установить пользовательские заголовки на сайте.

HTTP-клиент Angular`а может получить файл cookie с сервера и добавить настраиваемый заголовок запроса во все последующие запросы.

Включение межсайтового скрипта (XSSI)

Это уязвимость в старых браузерах, которая переопределяет собственные конструкторы объектов JavaScript и включающая URL-адрес API с использованием тега script.

Этот вид атак успешен только в том случае, если JSON имеет исполняемый JavaScript код.

Выводы

Атаки с использованием межсайтовых сценариев — это когда вредоносные скрипты внедряются в код приложения и запускаются.

Это предотвращается очисткой строк. Angular также предоставляет возможность пройти санитарную обработку.

Методы DOM небезопасны, поэтому мы должны помнить об этом при их использовании.

Подделка межсайтовых запросов - это когда злоумышленник отправляет запросы в качестве законного пользователя, выдавая себя за него.

HttpClient Angular`a может считывать пользовательские файлы cookie с сервера и отправлять заголовок запроса с уникальным идентификатором, который проверяется сервером, чтобы предотвратить эту атаку.

Мы можем предотвратить атаку с включением межсайтовых сценариев, очистив JSON, чтобы предотвратить выполнение исполняемой строки JSON.

Ссылка на оригинальную статью: Angular Security Best Practices