sanitize-htmlで特定の属性を許可する

はじめに

ユーザが作成したHtml等を動的に出力したい場合、全ての操作を許可してしまうとXSS的な面で問題があります。
以下のsanitize-htmlを用いるとXSSの可能性がある内容等は良しなにサニタイズされます。

github.com

デフォルトではタグの属性は書けない

上記のサニタイザーは便利ですが、デフォルトではタグの属性は書けない仕様になっています。 要するに、<p class="test-class">テスト</p>と入力してもサニタイザーを通すと<p>テスト</p>となってしまうわけですね。

特定の属性を許可する

特定の属性の許可を行う方法は単純で以下のようにsanitizeメソッドの引数へタグと許可する属性を配列で渡してあげます。

sanitizeHtml(/* サニタイズ対象 */, {
  allowedAttributes: {
    // 左に特定のタグ、右に許可する属性
    "p": ["class", "id", "style"],
  },
});

上記でサニタイザーを実行すると<p class="test-class">テスト</p>と入力しても問題なく同じ値が出力されます。

おわりに

以上、sanitize-htmlで特定の属性を許可する方法でした。