Angular项目中自定义Trusted Types的最佳实践咨询

你的实现方向是对的——用Angular服务封装Trusted Types策略是合理的，但有几个关键优化点可以让它更严谨、符合Angular和Trusted Types的最佳实践：

1. 消除any，保证类型安全 #

不要用any定义策略对象，利用TypeScript的类型系统明确类型。首先可以扩展全局window的类型声明（如果项目未自动引入Trusted Types类型），然后指定策略的具体可信类型（如TrustedHTML、TrustedScript）：

// 在项目的typings.d.ts中添加全局类型声明
declare global {
  interface Window {
    trustedTypes: TrustedTypes;
  }
}

import { Injectable } from '@angular/core';
import DOMPurify from 'dompurify';

@Injectable({ providedIn: 'root' })
export class TrustedTypesService {
  readonly fooPolicy: TrustedTypesPolicy;

  constructor() {
    this.fooPolicy = window.trustedTypes.createPolicy('foo', {
      // 针对HTML内容的创建方法，可根据需求添加createScript/createScriptURL等
      createHTML: (input: string) => {
        return DOMPurify.sanitize(input, { RETURN_TRUSTED_TYPE: true });
      }
    });
  }
}

2. 配置服务为单例，避免重复创建策略 #

Trusted Types不允许重复创建同名策略（会抛出错误），因此必须确保服务是单例。Angular中通过providedIn: 'root'配置，就能保证整个应用只初始化一次策略实例。

3. 必须在策略内实现内容净化 #

你的初始代码直接返回输入内容，这完全失去了Trusted Types防止XSS的核心作用。一定要集成DOMPurify这类专业的HTML净化库，并且启用RETURN_TRUSTED_TYPE选项，让它直接返回Trusted类型对象——这样Angular会自动识别并跳过自带的sanitizer，同时保证内容安全。

4. 增加浏览器兼容性降级逻辑 #

虽然主流现代浏览器都支持Trusted Types，但仍需处理不支持的环境，避免代码报错：

constructor() {
  if (window.trustedTypes) {
    this.fooPolicy = window.trustedTypes.createPolicy('foo', {
      createHTML: (input) => DOMPurify.sanitize(input, { RETURN_TRUSTED_TYPE: true })
    });
  } else {
    // 降级处理：返回净化后的字符串，依赖Angular自带sanitizer兜底
    this.fooPolicy = {
      createHTML: (input) => DOMPurify.sanitize(input)
    } as unknown as TrustedTypesPolicy;
  }
}

5. 组件中正确使用策略 #

在组件中注入服务后，通过策略的方法创建可信内容，绑定到DOM属性时Angular会自动信任该内容，无需额外配置：

import { Component } from '@angular/core';
import { TrustedTypesService } from './trusted-types.service';

@Component({
  selector: 'app-my-component',
  template: `<div [innerHTML]="trustedHtmlContent"></div>`
})
export class MyComponent {
  trustedHtmlContent: TrustedHTML | string;

  constructor(private trustedTypesService: TrustedTypesService) {
    const unsafeRawHtml = '<p>包含潜在风险的原始HTML内容</p>';
    this.trustedHtmlContent = this.trustedTypesService.fooPolicy.createHTML(unsafeRawHtml);
  }
}

总结 #

你的初始实现是可行的，但经过上述优化后，能保证类型安全、避免重复创建策略、符合Trusted Types的安全设计初衷，同时适配不同运行环境。

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