如何防止 Angular 应用中的 XSS 攻击？

推荐答案

为了防止 Angular 应用中的 XSS 攻击，可以采取以下措施：

1. 使用 Angular 的内置安全机制：Angular 默认会对所有绑定到模板的数据进行自动转义，防止 XSS 攻击。例如，使用 {{ }} 插值表达式或 [innerHTML] 绑定时，Angular 会自动对数据进行转义。

2. 避免直接使用 innerHTML：如果必须使用 innerHTML 绑定 HTML 内容，确保内容来自可信来源，并使用 Angular 的 DomSanitizer 服务来标记内容为安全。

3. 使用 DomSanitizer 服务：通过 DomSanitizer 服务，可以手动标记某些内容为安全，例如使用 bypassSecurityTrustHtml、bypassSecurityTrustStyle 等方法。

4. 避免使用 eval 和 new Function：避免在代码中使用 eval 或 new Function，这些函数会执行传入的字符串代码，容易导致 XSS 攻击。

5. 验证和清理用户输入：对所有用户输入进行严格的验证和清理，确保输入数据符合预期格式，并且不包含恶意代码。

6. 使用 Content Security Policy (CSP)：通过配置 CSP 来限制浏览器加载和执行外部资源的权限，减少 XSS 攻击的风险。

本题详细解读

Angular 的内置安全机制

Angular 在模板引擎中内置了 XSS 防护机制。当使用插值表达式 {{ }} 或属性绑定 [property]="value" 时，Angular 会自动对数据进行转义，确保任何潜在的恶意代码不会被浏览器解析执行。

例如：

<p>{{ userInput }}</p>

即使 userInput 包含恶意脚本，Angular 也会将其转义为普通文本，防止 XSS 攻击。

使用 DomSanitizer 服务

在某些情况下，可能需要将 HTML 内容直接插入到 DOM 中。这时可以使用 Angular 的 DomSanitizer 服务来标记内容为安全。

// www.javascriptcn.com code example
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="safeHtml"></div>`
})
export class AppComponent {
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml('<script>alert("XSS")</script>');
  }
}

在这个例子中，bypassSecurityTrustHtml 方法将 HTML 内容标记为安全，Angular 不会对其进行转义。因此，开发者需要确保内容来自可信来源。

避免使用 eval 和 new Function

eval 和 new Function 会执行传入的字符串代码，如果字符串中包含恶意代码，就会导致 XSS 攻击。因此，应避免在代码中使用这些函数。

验证和清理用户输入

对所有用户输入进行严格的验证和清理是防止 XSS 攻击的重要步骤。可以使用正则表达式或其他验证库来确保输入数据符合预期格式，并且不包含恶意代码。

使用 Content Security Policy (CSP)

CSP 是一种浏览器安全策略，可以通过 HTTP 头或 <meta> 标签来配置。CSP 可以限制浏览器加载和执行外部资源的权限，从而减少 XSS 攻击的风险。

例如，以下 CSP 配置禁止加载任何外部脚本：

Content-Security-Policy: script-src 'self'

通过合理配置 CSP，可以有效减少 XSS 攻击的可能性。