Angular 的安全性措施有哪些？

推荐答案

Angular 提供了多种安全性措施来保护应用程序免受常见的安全威胁，主要包括以下几个方面：

1. 跨站脚本攻击（XSS）防护：

   • Angular 默认对所有绑定到 DOM 的数据进行自动转义，防止恶意脚本注入。
   • 使用 DomSanitizer 服务来手动处理信任的 HTML、样式、URL 等。

2. 跨站请求伪造（CSRF）防护：

   • Angular 的 HttpClient 服务会自动处理 CSRF 令牌，确保请求的安全性。

3. 内容安全策略（CSP）：

   • Angular 支持通过配置 CSP 来限制外部资源的加载，防止恶意代码执行。

4. 路由保护：

   • 使用 CanActivate 和 CanDeactivate 守卫来控制用户对特定路由的访问权限。
   • 使用 Resolve 守卫来确保数据在路由激活前已加载。

5. HTTP 安全头：

   • Angular 应用可以通过服务器配置来设置安全头，如 X-Content-Type-Options、X-Frame-Options 等。

6. 防止 JSON 劫持：

   • Angular 的 HttpClient 默认会拒绝带有 text/plain 类型的 JSON 响应，防止 JSON 劫持攻击。

7. 模板注入防护：

   • Angular 的模板引擎会阻止在模板中直接执行 JavaScript 代码，防止模板注入攻击。

本题详细解读

跨站脚本攻击（XSS）防护

Angular 通过自动转义所有绑定到 DOM 的数据来防止 XSS 攻击。这意味着，如果用户输入包含恶意脚本，Angular 会将其转义为普通文本，而不是执行它。对于需要信任的 HTML、样式或 URL，开发者可以使用 DomSanitizer 服务来手动标记这些内容为安全。

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

constructor(private sanitizer: DomSanitizer) {}

getSafeHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

跨站请求伪造（CSRF）防护

Angular 的 HttpClient 服务会自动处理 CSRF 令牌。当应用向服务器发送请求时，HttpClient 会自动在请求头中添加 CSRF 令牌，确保请求的安全性。开发者只需确保服务器端正确配置了 CSRF 防护机制。

内容安全策略（CSP）

内容安全策略（CSP）是一种浏览器安全机制，用于限制外部资源的加载。Angular 应用可以通过配置 CSP 来防止恶意代码的执行。例如，可以通过设置 Content-Security-Policy 头来限制脚本、样式、图片等资源的加载来源。

路由保护

Angular 提供了多种路由守卫来控制用户对特定路由的访问权限。CanActivate 守卫用于控制用户是否可以访问某个路由，CanDeactivate 守卫用于控制用户是否可以离开某个路由，Resolve 守卫用于确保数据在路由激活前已加载。

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 检查用户是否已登录
    return this.authService.isLoggedIn();
  }
}

HTTP 安全头

Angular 应用可以通过服务器配置来设置安全头，如 X-Content-Type-Options、X-Frame-Options 等。这些安全头可以防止浏览器执行某些不安全的行为，如 MIME 类型嗅探、点击劫持等。

防止 JSON 劫持

JSON 劫持是一种攻击方式，攻击者通过恶意脚本获取 JSON 数据。Angular 的 HttpClient 默认会拒绝带有 text/plain 类型的 JSON 响应，防止 JSON 劫持攻击。

模板注入防护

Angular 的模板引擎会阻止在模板中直接执行 JavaScript 代码，防止模板注入攻击。开发者应避免在模板中使用动态生成的代码，以确保应用的安全性。

<!-- 不安全的模板 -->
<div [innerHTML]="userInput"></div>

<!-- 安全的模板 -->
<div [innerHTML]="getSafeHtml(userInput)"></div>

通过以上措施，Angular 能够有效保护应用免受常见的安全威胁。