Angular 项目中的自定义受信任类型答案

【问题标题】：Custom trusted types in Angular projectAngular 项目中的自定义受信任类型
【发布时间】：2022-12-04 22:44:17
【问题描述】：

我在我的 Angular 应用程序中有一个地方我不希望 Angular 清理程序清理我的内容。我的目标是在我的角度项目中创建一个自定义的可信类型策略。但我无法弄清楚创建一个、存储它们并稍后在代码中使用它们的最佳实践是什么。

我知道它可以通过使用（任何窗口）我是在一个单独的可信类型服务中做的：

export class TrustedTypesService {
  readonly fooPolicy: any;

  constructor() {
    this.fooPolicy = (window as any).trustedTypes.createPolicy('foo', (bar) => {
      // ideally some sanitizing by e.g. DOM Purify
      return bar;
    });
  }
}

但这是正确和最好的方法吗？

我将不胜感激任何帮助。谢谢：）

【问题讨论】：

标签： angular content-security-policy websecurity trusted-types

【解决方案1】：

是的，创建自定义可信类型策略并将其存储在服务中是在 Angular 应用程序中执行此操作的最佳方式。这种方法允许您为所有受信任的类型策略创建单一的事实来源。然后可以将该服务注入到需要使用受信任类型的任何组件中。

您还可以使用相同的服务来创建和存储多个受信任类型的策略。这将允许您针对不同类型的数据制定不同的策略。例如，您可以制定一项用于清理 HTML 的策略，一项用于清理 URL 的策略，以及一项用于清理用户输入的策略。

同样重要的是要注意，您应该始终使用 DOM Purify 或类似的库来实际清理数据。这将确保数据在返回之前得到适当的清理。

总的来说，在 Angular 应用程序中创建和使用自定义可信类型策略的最佳实践是创建一个服务来存储策略并将该服务注入到需要使用可信类型的任何组件中。这将使您拥有所有受信任类型策略的单一真实来源，并确保您的数据得到适当清理。

【讨论】：

【解决方案2】：

Trusted Types 是 Angular 9.0 中引入的一项安全功能，旨在防止跨站点脚本 (XSS) 攻击。它通过提供严格的 API 来创建、修改和清理可在不同上下文中安全使用的字符串来实现这一点。

创建自定义可信类型策略是一种扩展 Angular 清理程序的默认行为以支持应用程序中特定需求的方法。您在 TrustedTypesService 中实现自定义策略的方式看起来是正确的，但值得注意的是，窗口对象上的 trustedTypes 属性仅在您的 Angular 应用程序中导入了 TrustedTypesModule 时才可用。

以下是如何在 Angular 代码中使用自定义 fooPolicy 的示例：

import { TrustedTypesService } from './trusted-types-service';

@Component({
  // ...
})
export class MyComponent {
  constructor(private trustedTypesService: TrustedTypesService) {}

  foo() {
    const input = 'Some potentially unsafe string';
    const safe = this.trustedTypesService.fooPolicy.createHTML(input);
    // You can now safely use the "safe" string in your Angular templates
    // without worrying about XSS attacks.
  }
}

值得注意的是，createPolicy 方法采用第二个参数来指定策略输出的类型。这可以是 HTML、Script、ScriptURL、ResourceURL 或 URL。在上面的示例中，我们使用了 HTML 类型，这表明该策略创建受信任的 HTML 字符串。

总的来说，您在 Angular 应用程序中创建自定义可信类型策略所采用的方法看起来是正确的。但是，重要的是要了解这种方法的局限性并明智地使用它。特别是，您应该意识到自定义策略不会自动保证您的应用程序的安全性——您需要确保该策略正确地清理输入字符串并使它们在您的 Angular 模板中安全使用。

【讨论】：