---
title: "Angular: Trusted Typesサポートの概要"
slug: angular-trusted-types
created_time: 2020-11-03T00:00:00.000Z
last_edited_time: 2026-01-15T14:28:00.000Z
category: Tech
tags:
- Angular
- Security
- Web
published: true
locale: ja
---
DOM の新しいセキュリティ機構として [Trusted Types](https://web.dev/trusted-types) という仕様が提案されている。 現在開発中の Angular v11 は Trusted Types の仕様に準拠し、Trusted Types をサポートしたブラウザではその機能が利用できるようになる予定だ。 この記事では Angular と Trusted Types がどのように関わるのかを解説する。
## Trusted Types とは
Trusted Types そのものが初見であれば、Jxck さんのブログ記事を先に読むことをおすすめする。
[安全な文字列であると型で検証する Trusted Types について | blog.jxck.io](https://blog.jxck.io/entries/2019-01-27/trusted-types.html)
簡潔に言えば、文字列ベースでの DOM 操作が可能な API について、その文字列が信頼できるものであることをマークして、ブラウザに対してその DOM 操作が安全である（と開発者は信じている）ことを伝えるものだ。 具体的な API で言えば、 `element.innerHTML` や `script.src` などが挙げられる。
[CSP](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)と併用することで、信頼できることがマークされていない文字列はブラウザがセキュリティポリシー違反としてエラーを報告できるようになる。 検証目的であれば`index.html`の ``タグ内に次の HTML を追加すれば簡単に Trusted Types の動作を確認できる。
```html
```
## Angular と Trusted Types
実は以前にも Angular と Trusted Types について記事を書いている。
[DOM の XSS を防ぐ Trusted Types と Angular のセキュリティ機構](/2019/05/trusted-types-and-angular-security/)
この記事では Angular がビルトインで持つ独自のセキュリティ機構と、Trusted Types がどのようにかかわる可能性があるかを少し述べた。 まず Angular の `DomSanitizer` についての基本的な理解が必要となるため、理解が不安であればまずはこちらを読んでほしい。
### DomSanitizer と Trusted Types
`DomSanitizer` は、任意の文字列が信頼できる HTML、スクリプト、CSS などであることを、開発者が Angular に伝えるための API だ。 たとえば `innerHTML` への文字列の挿入で ``;
@Component({
selector: 'app-root',
template: ` `,
})
export class AppComponent {
constructor(private sanitizer: DomSanitizer) {}
snippet = this.sanitizer.bypassSecurityTrustHtml(unsafeHTML);
}
```
`DomSanitizer.bypassSecurityTrustHtml` は引数に与えた文字列を `SafeHtml` 型としてラップし、サニタイズ処理をバイパスする。 もし`innerHTML` にバインディングされた `htmlSnippet` が単なる string であれば、 `