WordPressのエディタ内のcodeで囲んだHTMLコードをサニタイズ:メモ

リニューアルに際して、シンタックスハイライト用のプラグインを削除し、単にpreとcodeを使うようにしました。

ところが、HTMLのサニタイズが抜けていたので急いで代替案を作った次第です。

実現したいこと

実現したことは以下の通りです。

• テキストエディタに入力したHTMLをサニタイズする
• HTMLに限らず、コードはcodeとpreで囲む
• プラグインを使わない

今回は行番号や特定部分のハイライトなどの高度な処理は不要なので、WordPressのサニタイズ用関数であるesc_html()を利用する方向で検討しました。

コード

最終的にコードは以下のようになりました。

function pre_esc_html($content) {
  $content = preg_replace_callback(
    '#(<pre><code.*?>)(.*?)(<\/code><\/pre>)#imsu',
    function ($match){ return $match[1].esc_html($match[2]).$match[3];},$content);
  return $content;
}
add_filter('the_content','pre_esc_html',9);

参考にしたのは以下のページです。

• Relaxing unescaped HTML filtering inside pre tags?

上記のページのままですとcreate_functionによってeval()が実行されるとのことで、PHP 5.3.0 以上を使用していることもあり書き換えた次第です。

この件について参考にしたのは以下のページです。

• create_function

問題点

codeで囲まれた中を検索し、抽出し、置換していたのですが、この記事の説明用のコードのように、code内にcodeがあると、そこに反応して表示がおかしくなりました。

複雑な条件を加えるのも面倒だったので、今回はcode内にcodeを書く時のみ、手動で一部をエンティティ化する方法を用いています。

テスト

<div id="page">
<span class="spaaaaan">大文字</span>
</div>

大丈夫そうですね。

結び

出力の度にフィルターを通すのも嫌だなというのも少なからずあったのですが、HTMLを入れる度にエンティティ化する手間と、後ほど該当箇所を修正する際の見辛さから、この記事の方法を取ることにしました。

仮にプラグインを使っても結局フィルターを通すことになると思うので、許容範囲かなとも思っています。