修复 OWASP Top 10 漏洞：Angular 18.1.1 - DZone

摘要

详细讨论在 Angular 18.1.1v 版本的 Web 应用程序中如何配置和减轻安全漏洞的示例。

加入 DZone 社区，体验完整的会员体验。

最新发布的 Angular 18.1.1 版本提供了丰富的功能，用于开发健壮且可扩展的 Web 应用程序。但安全性仍然是一个关注点。在这篇文章中，我们将详细讨论如何在 Angular 18.1.1v Web 应用程序中配置并减轻这些漏洞。

1. 注入攻击

注入漏洞（SQL、NoSQL 和 OS 命令注入）发生在不可信数据被发送到位于机器或查询中的解释器时。

缓解措施

始终使用 Angular 内置的工具对数据进行消毒，以避免注入攻击。
代替 eval()，使用动态代码执行。

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

constructor(private domSanitizer: DomSanitizer) {}

safeHtml(html: string) {
  return this.domSanitizer.bypassSecurityTrustHtml(html);
}

2. 认证机制漏洞

当认证机制实现不当时，攻击者可以破坏密码、密钥或会话令牌。

缓解措施

应强制使用强密码，并实施 MFA。
使用 Angular HTTP 拦截器保护认证令牌。

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable()
export class AppAuthInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const authToken = this.getUserAuthToken();
    const authRequest = req.clone({
      headers: req.headers.set("Authorization", `Bearer ${authToken}`),
    });
    return next.handle(authRequest);
  }

  getUserAuthToken() {
    return localStorage.getItem("authToken");
  }
}

3. 敏感数据曝光

个人信息、医疗信息、信用卡号码等敏感数据的信息安全必须得到保障。

缓解措施

始终使用 HTTPS 加密传输数据。
不要在本地存储中保存敏感数据。安全的存储任何保密信息是一种良好的习惯。

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class AppSecureService {
  constructor(private http: HttpClient) {}

  getUserSecureData() {
    return this.http.get("https://secureapi.example.com/data");
  }
}

4. XML 外部实体 (XXE)

配置不当的 XML 解析器处理输入（使用对外部实体的引用的 XML）时，会形成 XXE 攻击。

缓解措施

使用 JSON 替代 XML。
使用禁用外部实体解析的 XML 解析器。

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class SecureXmlDataService {
  constructor(private http: HttpClient) {}

  getXmlData() {
    return this.http.get("https://secureapi.example.com/data", {
      responseType: "text",
    });
  }
}

5. 访问控制漏洞

这是针对经过认证的用户缺乏严格权限控制。

缓解措施

使用 Angular 守卫管理访问控制
启用基于角色的访问控制 (RBAC)。

import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";

@Injectable({
  providedIn: "root",
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = this.checkIfAuthenticated();
    if (!isAuthenticated) {
      this.router.navigate(["login"]);
    }
    return isAuthenticated;
  }

  checkIfAuthenticated(): boolean {
    return !!localStorage.getItem("authToken");
  }
}

6. 安全配置错误

漏洞可能允许未经验证的攻击者获得特权访问或执行受限操作。

缓解措施

经常更新依赖项。
使用脚本或配置管理工具。

// angular.json
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true
          }
        }
      }
    }
  }
}

7. 跨站脚本攻击 (XSS)

XSS 漏洞发生在 Web 应用程序将用户提供的数据直接包含到输出页面中，而没有进行适当的验证或转义时。

缓解措施

利用 Angular 内置的模板清理功能。
不要使用 innerHTML 来绑定数据。

import { Component } from "@angular/core";

@Component({
  selector: "app-safe-test-component",
  template: `<div [innerHTML]="safeTestHtml"></div>`,
})
export class SafeComponent {
  safeTestHtml = "<p>Safe Content Test!</p>";
}

8. 不安全的反序列化

不安全的反序列化可能导致严重的后果，如远程代码执行或其他事件。

缓解措施

避免使用 eval() 或其他可以执行任意代码的方法。
仅使用安全的序列化和反序列化库。

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

@Injectable({
  providedIn: "root",
})
export class SafeSerializationService {
  serializeData(data: any): string {
    return JSON.stringify(data);
  }

  deserializeData(json: string): any {
    return JSON.parse(json);
  }
}

9. 已知漏洞的组件

组件，如库、框架和其他与应用程序一起运行的具有相同权限的软件模块。

缓解措施

定期扫描和更新依赖项。
使用 npm audit 工具发现应用程序的漏洞。

# 运行 npm audit 来查找和修复漏洞
npm audit fix

10. 缺乏监控和日志记录

日志记录和监控不足，加上缺乏或无效的与事件响应集成，使攻击者能够进一步攻击系统，保持持久性，转向更多系统篡改、提取或销毁数据。

缓解措施

在应用程序中引入日志记录。
使用监控工具检测可疑活动。

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

@Injectable({
  providedIn: "root",
})
export class LoggingService {
  logMessage(message: string) {
    console.log(`[LOG] ${message}`);
  }

  logError(error: any) {
    console.error(`[ERROR] ${error}`);
  }
}

结论

遵循安全最佳实践并使用 Angular 18.1.1 的最新特性，您可以成功地保护您的应用程序免受 OWASP Top 10 漏洞的影响。这不仅提高了应用程序的安全性，还增强了用户的信任感。