Web

Chrome 105 から Sanitizer API が使えるようになりました

投稿日:

Chrome 105 から、HTML Sanitizer API(の一部)が使えるようになっています。

簡単に言うと、既存のHTMLに対して、JavaScript を使って HTML要素を追加する際に、危険な部分を削除してくれる機能です。

Safe DOM manipulation with the Sanitizer API にも書かれていますが、「サニタイズ」はエスケープとは違い、入力されたものに対して危険な部分を削除する機能を指します。

HTML Sanitizer API の特徴としては、

  • 許可するHTMLタグや属性 / 許可しないHTMLタグや属性を指定することができる。
  • 「特定のHTML要素内である」というコンテキストを指定することによって、そのHTML要素にとって適切なサニタイズを行ってくれる。

などがありますが、この2つ目が気になりました。

コンテキスト(どのHTML要素内か?)によって適した動作をしてくれるのは一見便利ですが、何をされるか分からないという見方もできます(なるべく安全な側に寄せた処理がされるようですが)。

※ 例えば、<script>タグなどは当然危険であるため削除される(簡単なコードで試しました)ようですが、<script>タグを文字列として画面上に追加して表示したい場合、どうすればよいでしょうか? 普通に考えれば、<> の部分をHTMLエスケープした文字列を HTML Sanitizer API に渡せばよいのでしょうが、コンテキストによって動作が異なるとなると、思った通りの結果になるのか不安がよぎります。HTML Sanitizer API を見ても、コンテキスト毎の動作の定義が読み取れませんでした。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする方法を紹介します。

Web

Mastodon(OStatus) を参考にして、理想の標準情報発信プラットフォームを考えてみました

話題の Mastodon を参考にして、私の理想とする情報発信プラットフォームについて考えてみました。 Mastodonとは? 見た目は、Twitterとほとんど同じサービスです。しかし、Twitte …

Web

Web Components: CSS Shadow Parts の使い方

CSS Shadow Parts の使い方を説明します。

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。