3.4安全 (Security)

文档摘要

3.4安全 (Security) 3.4 安全 (Security) Angular 应用的安全至关重要，因为它们通常处理敏感数据并与后端服务交互。忽略安全问题可能导致数据泄露、跨站脚本攻击 (XSS)、跨站请求伪造 (CSRF) 等严重后果。本章节将深入探讨 Angular 应用中常见的安全威胁以及如何有效地防范它们。 3.4.1 常见安全威胁在深入研究 Angular 安全防护之前，了解常见的安全威胁至关重要。跨站脚本攻击 (XSS)： XSS 攻击允许攻击者将恶意脚本注入到其他用户查看的网页中。这些脚本可以窃取用户数据、劫持会话或执行其他恶意操作。跨站请求伪造 (CSRF)： CSRF 攻击迫使用户在不知情的情况下执行恶意操作。

3.4安全 (Security)

3.4 安全 (Security)

Angular 应用的安全至关重要，因为它们通常处理敏感数据并与后端服务交互。忽略安全问题可能导致数据泄露、跨站脚本攻击 (XSS)、跨站请求伪造 (CSRF) 等严重后果。本章节将深入探讨 Angular 应用中常见的安全威胁以及如何有效地防范它们。

3.4.1 常见安全威胁

在深入研究 Angular 安全防护之前，了解常见的安全威胁至关重要。

跨站脚本攻击 (XSS)： XSS 攻击允许攻击者将恶意脚本注入到其他用户查看的网页中。这些脚本可以窃取用户数据、劫持会话或执行其他恶意操作。

graph TD A[用户] --> B(Angular 应用); B --> C{后端服务器}; C --> D[数据库]; E[攻击者] --> F(恶意脚本); F --> B; B --> G{执行恶意脚本}; G --> A;
跨站请求伪造 (CSRF)： CSRF 攻击迫使用户在不知情的情况下执行恶意操作。攻击者利用用户已登录的会话，以用户的身份向服务器发送请求。

graph TD A[用户] --> B(Angular 应用); B --> C{后端服务器}; D[攻击者] --> E(恶意链接/表单); E --> A; A --> C;
点击劫持： 点击劫持攻击通过在用户可见的页面上覆盖一个透明的不可见层，诱使用户点击恶意链接或按钮。
中间人攻击 (MITM)： MITM 攻击者拦截用户和服务器之间的通信，窃取敏感数据或篡改数据。
不安全的反序列化： 如果 Angular 应用使用不安全的反序列化方法，攻击者可以利用它来执行任意代码。
依赖漏洞： Angular 应用依赖于许多第三方库。如果这些库包含漏洞，攻击者可以利用这些漏洞来攻击应用程序。

3.4.2 Angular 安全实践

Angular 提供了多种机制来帮助开发者构建安全的应用程序。

输入验证和输出编码：

输入验证： 始终验证用户输入，以确保其符合预期的格式和类型。使用 Angular 的表单验证功能来验证输入。


import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input type="text" formControlName="username">
      <div *ngIf="myForm.get('username')?.invalid && myForm.get('username')?.touched">
        Username is required.
      </div>
      <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
  `
})
export class ExampleComponent {
  myForm = new FormGroup({
    username: new FormControl('', Validators.required)
  });
  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    }
  }
}

输出编码： 对所有输出到 HTML 的数据进行编码，以防止 XSS 攻击。 Angular 默认使用输出编码，但应始终确保正确使用。使用 {{ expression }} 进行数据绑定会自动进行 HTML 编码。对于属性绑定，使用 [attr.attributeName]="expression"。
```
<div>{{ userInput }}</div>  
<a [href]="safeUrl">Link</a> 
```

防止 XSS 攻击：

信任 HTML： 避免使用 innerHTML 属性或 DomSanitizer.bypassSecurityTrustHtml 方法，除非绝对必要。如果必须使用它们，请确保对输入进行严格的验证和清理。


import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) {}
getSafeHtml(html: string): SafeHtml {
  // 谨慎使用，确保 html 内容是可信的
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

内容安全策略 (CSP)： 使用 CSP 来限制浏览器可以加载的资源类型。 CSP 可以帮助防止 XSS 攻击。在你的服务器配置中设置 CSP 标头。


Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self';

防止 CSRF 攻击：

使用 CSRF 令牌： 在每个表单中包含一个 CSRF 令牌。服务器验证令牌，以确保请求来自合法的用户。 Angular 的 HttpClient 拦截器可以自动添加 CSRF 令牌。

后端生成和设置 Cookie： 服务器生成一个随机的 CSRF 令牌，并将其设置为一个 Cookie。

Angular 读取 Cookie 并添加到请求头：


import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpXsrfTokenExtractor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class HttpCsrfInterceptor implements HttpInterceptor {
  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headerName = 'X-CSRF-TOKEN'; // 或其他你后端期望的 Header 名称
    let token = this.tokenExtractor.getToken() as string;
    if (token !== null && !req.headers.has(headerName)) {
      req = req.clone({ headers: req.headers.set(headerName, token) });
    }
    return next.handle(req);
  }
}

在 AppModule 中注册拦截器：


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpXsrfTokenExtractor } from '@angular/common/http';
import { HttpCsrfInterceptor } from './http-csrf.interceptor';
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpCsrfInterceptor, multi: true },
    { provide: HttpXsrfTokenExtractor, useValue: {
        getToken: () => document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*\=\s*([^;]*).*$)|^.*$/, "$1") // 替换为你的 Cookie 名称
      }}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

服务器端验证： 服务器端接收到请求后，从请求头中获取 CSRF 令牌，并与 Cookie 中的令牌进行比较。如果匹配，则认为请求是合法的。

使用 SameSite Cookie 属性： 将 Cookie 的 SameSite 属性设置为 Strict 或 Lax，以防止 CSRF 攻击。

防止点击劫持：
- 使用 X-Frame-Options 标头： 设置 X-Frame-Options 标头为 DENY 或 SAMEORIGIN，以防止应用程序被嵌入到其他网站的 iframe 中。
```
X-Frame-Options: DENY
```
- 使用 Content Security Policy (CSP) 的 frame-ancestors 指令： 允许指定哪些来源可以将你的页面嵌入到 frame 中。
HTTPS： 始终使用 HTTPS 来加密客户端和服务器之间的通信。
依赖管理：
- 定期更新依赖项： 定期更新 Angular 和第三方库，以修复已知的安全漏洞。
- 使用安全审计工具： 使用 npm audit 或 yarn audit 等工具来扫描依赖项中的漏洞。
服务器端安全：
- 身份验证和授权： 使用强大的身份验证和授权机制来保护后端 API。
- 输入验证和输出编码： 在服务器端也进行输入验证和输出编码。
- 防止 SQL 注入： 使用参数化查询或 ORM 来防止 SQL 注入攻击。
- 限制文件上传： 限制用户可以上传的文件类型和大小。
AOT 编译： 使用 AOT 编译可以减少客户端需要下载和编译的代码量，从而提高应用程序的安全性。

3.4.3 代码示例：安全 URL 处理

以下代码示例演示了如何使用 DomSanitizer 来清理 URL，以防止 XSS 攻击。


import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@Component({
  selector: 'app-safe-url-example',
  template: `
    <a [href]="safeUrl">安全链接</a>
  `
})
export class SafeUrlExampleComponent {
  unsafeUrl = 'javascript:alert("XSS")'; // 恶意 URL
  safeUrl: SafeUrl;
  constructor(private sanitizer: DomSanitizer) {
    this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(this.unsafeUrl);
  }
}

解释：

DomSanitizer 是 Angular 提供的一个服务，用于清理不受信任的数据，使其可以安全地用于 HTML。
bypassSecurityTrustUrl 方法将一个字符串标记为安全 URL，Angular 不会对其进行进一步的清理。 请谨慎使用此方法，确保 URL 来源可信。 更好的做法是使用 Angular 的内置安全机制，避免直接操作 URL。
在模板中，使用 [href] 属性绑定到 safeUrl 属性。 Angular 会自动对 URL 进行清理，以防止 XSS 攻击。

3.4.4 总结

Angular 提供了许多工具和技术来帮助开发者构建安全的应用程序。通过遵循最佳实践，例如输入验证、输出编码、使用 CSRF 令牌和定期更新依赖项，可以显著降低应用程序的安全风险。始终关注最新的安全漏洞和最佳实践，并定期审查应用程序的安全性。

希望这篇文章能够帮助你更好地理解 Angular 中的安全问题以及如何有效地解决它们。