Angular 6：如何检测安全路由/URL并防范CSRF/XSRF注入攻击

一、路由中的XSS检测优化 #

你当前使用DomSanitizer的sanitize(SecurityContext.URL)仅能处理URL格式合规性，对路由中注入的HTML/JS代码（如示例中的iframe注入）识别能力有限，可通过以下方式优化检测逻辑：

1. 直接检测可疑字符与脚本模式 #

在RoutesRecognized事件中，解码路由URL后匹配常见XSS特征，发现可疑内容直接跳转404：

import { RoutesRecognized } from '@angular/router';
import { DomSanitizer, SecurityContext } from '@angular/platform-browser';

// app.component.ts中修改事件监听逻辑
this.router.events
  .filter(event => event instanceof RoutesRecognized)
  .subscribe((event: RoutesRecognized) => {
    const decodedUrl = decodeURIComponent(event.state.url);
    // 定义XSS可疑特征模式
    const suspiciousPatterns = [
      /<iframe/i,
      /<script/i,
      /javascript:/i,
      /on\w+=/i,
      /srcdoc=/i,
      /alert\(/i
    ];
    // 检测是否匹配任意可疑模式
    const isUnsafe = suspiciousPatterns.some(pattern => pattern.test(decodedUrl));
    if (isUnsafe) {
      this.router.navigate(['/404']);
      return;
    }
    // 正常路由处理
    const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, event.state.url);
    console.log('安全路由:', sanitizedUrl);
  });

2. 用路由守卫提前拦截 #

将检测逻辑封装到CanActivate守卫中，在路由激活前就拦截不安全请求，比组件监听更高效：

// 创建xss-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { DomSanitizer, SecurityContext } from '@angular/platform-browser';

@Injectable()
export class XssGuard implements CanActivate {
  constructor(private sanitizer: DomSanitizer, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const decodedUrl = decodeURIComponent(state.url);
    const suspiciousPatterns = [
      /<iframe/i,
      /<script/i,
      /javascript:/i,
      /on\w+=/i,
      /srcdoc=/i
    ];
    if (suspiciousPatterns.some(pattern => pattern.test(decodedUrl))) {
      this.router.navigate(['/404']);
      return false;
    }
    // 额外验证路由参数的安全性
    Object.values(route.params).forEach(param => {
      const sanitizedParam = this.sanitizer.sanitize(SecurityContext.HTML, param);
      if (sanitizedParam !== param) {
        this.router.navigate(['/404']);
        return false;
      }
    });
    return true;
  }
}

在路由配置中应用守卫：

// app-routing.module.ts
import { XssGuard } from './xss-guard.service';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [XssGuard] },
  // 其他路由同理添加守卫
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

二、CSRF/XSRF防范措施 #

Angular 6内置了XSRF防护机制，结合以下措施可强化安全：

1. 启用内置XSRF拦截器 #

HttpClientModule默认包含HttpXsrfInterceptor，会自动从cookie读取XSRF-TOKEN，并在POST/PUT/DELETE请求中添加X-XSRF-TOKEN请求头。后端需配合：

• 首次请求时设置XSRF-TOKEN cookie（HttpOnly设为false，允许前端读取）
• 验证所有非GET请求的X-XSRF-TOKEN头与cookie值是否匹配

2. 禁止敏感数据通过URL传递 #

不要将用户凭证、密钥等敏感数据放在路由参数或查询字符串中，改用POST请求体传递，且确保请求体加密。

3. 配置Cookie安全属性 #

设置Cookie的Secure（仅HTTPS下传递）和HttpOnly（禁止JS读取，除XSRF-TOKEN需设为false外，其他Cookie均设为true）属性。

4. 验证请求来源 #

后端检查请求的Referer或Origin头，仅允许来自自身域名的请求。

三、额外安全建议 #

• 对所有用户输入（含路由参数）做严格输入验证，仅允许符合预期格式的内容
• 避免直接将路由参数渲染到DOM，若必须渲染，使用Angular插值语法{{}}（自动转义）或DomSanitizer处理后展示
• 定期升级Angular到最新稳定版，修复已知安全漏洞

内容的提问来源于stack exchange，提问作者Dev Developer