mcpField
A
angular-security

angular-security

github.com/oguzhan18安全7210 次安装30 周前更新
代码仓库

关于 angular-security

面向 Angular 开发者的安全开发技能，围绕 XSS、CSRF、CSP 和输入验证提供指南。内容还涉及 Trusted Types、DomSanitizer、HttpClient 与路由守卫。

主要功能

  1. 01DomSanitizer 安全处理 HTML
  2. 02HttpClient CSRF 配置建议
  3. 03Trusted Types 与 CSP 指南
  4. 04避免动态模板求值
  5. 05路由守卫与输入验证

适用场景

  1. 01安全显示用户提供的 HTML
  2. 02为 HTTP 请求配置 CSRF 防护
  3. 03加强 Angular 应用的内容安全策略
  4. 04限制未认证用户访问受保护路由

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-security

安装后在 Claude Code 中输入/angular-security确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 安全

版本： Angular 21（2025） 标签： 安全、XSS、CSRF、CSP、清理

参考： 安全指南 • DomSanitizer

API 变更

本节记录特定版本近期的 API 变更。

  • 新增：Trusted Types — Angular 支持用于 CSP 的 Trusted Types

  • 新增：HttpClient CSRF — 通过 CookieXSRFStrategy 提供内置 CSRF 保护

  • 新增：带有 untrustedEvents 的 provideZoneChangeDetection — Zone.js 事件筛选

  • 新增：afterNextRender 安全性 — 在渲染后安全地运行代码

最佳实践

  • 使用 DomSanitizer 安全地处理 HTML
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

getSafeHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}
  • 谨慎使用 bypassSecurityTrust 方法
// Only use when content is trusted
this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(userInput);
this.safeScript = this.sanitizer.bypassSecurityTrustScript(script);
this.safeStyle = this.sanitizer.bypassSecurityTrustStyle(style);
this.safeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  • 使用带有 CSRF 保护的 HttpClient
// Automatically uses XSRF-TOKEN cookie
http.get('/api/data').subscribe();

// Configure CSRF
provideHttpClient(
  withXsrfConfiguration({
    cookieName: 'XSRF-TOKEN',
    headerName: 'X-XSRF-TOKEN'
  })
)
  • 对 innerHTML 使用清理
@Component({
  template: `<div [innerHTML]="safeContent"></div>`
})
export class MyComponent {
  // Angular sanitizes automatically
  safeContent = '<p>Safe content</p>';
}
  • 避免动态模板求值
// ❌ Dangerous
eval(userInput);

// ✅ Safe - use Angular's binding
{{ userInput }}
  • 使用内容安全策略
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self'">
  • 使用 Trusted Types
import { provideTrustedTypes } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTrustedTypes()
  ]
};
  • 验证用户输入
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'escapeHtml' })
export class EscapeHtmlPipe implements PipeTransform {
  transform(value: string): string {
    return value
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }
}
  • 使用 HttpClient 拦截器进行身份验证
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  
  if (token) {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    return next(authReq);
  }
  return next(req);
};
  • 使用路由守卫保护路由
export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  
  if (auth.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

评论

支持 Markdown