[basecamp/lexxy] DOMPurifyによる画像キャプションのコロン削除問題を修正

背景

Lexxyでは、セキュリティ対策としてDOMPurifyを使用してHTMLコンテンツをサニタイズしています。しかし、画像のキャプション属性に「photographer: name」のようにコロンを含むテキストを設定すると、その内容が削除されてしまう問題が発生していました。

この問題は、DOMPurifyがデフォルトで属性値をURIとして検証し、コロンを含む文字列を未知のプロトコルスキームと判断してしまうことが原因でした。caption属性はALLOWED_ATTRに含まれていたものの、URI_SAFE_ATTRIBUTESには登録されていなかったため、URI検証が実行されていました。

技術的な変更内容

修正は、DOMPurifyの設定にADD_URI_SAFE_ATTRオプションを追加し、captionとfilename属性をURI検証の対象外とすることで実現されました。

変更後:

export function buildConfig() {
  return {
    ALLOWED_TAGS: ALLOWED_HTML_TAGS.concat(Lexxy.global.get("attachmentTagName")),
    ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
    ADD_URI_SAFE_ATTR: [ "caption", "filename" ],
    SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
  }
}

ADD_URI_SAFE_ATTRに指定された属性は、DOMPurifyのURI検証をスキップし、任意のテキストコンテンツを保持できるようになります。これにより、以下のような画像キャプションが正しく処理されるようになりました。

<img src="photo.jpg" caption="photographer: John Doe" />

セキュリティへの影響

captionとfilename属性は、実際にはURIとして解釈されることはなく、純粋なテキストデータとして扱われる属性です。そのため、これらをURI検証の対象外とすることで、セキュリティリスクが増加することはありません。むしろ、想定される用途（説明文やファイル名）に対して適切な処理が行われるようになります。