Tweet

WordPressでは、投稿内容やカスタムフィールドでHTMLタグを利用することが出来ますが、そのまま表示するよりは、文字列をエスケープして無害化してあげることで、安心してデータを利用することが出来ます。

きっかけは、とあるお客さんから『投稿した内容が表に出てきてしまってるから、なおして』というわけのわからない修正依頼がありまして。

よくよく聞けば、実際はmailtoの中に含まれているはずの文字列が表に出てきてしまってるとのこと。
見てみると、確かに『友達にメールで送る』ボタンの下に、その内容が漏れちゃってます。

その理由は単純で、投稿にstyleを使っていたことでした。

これを解決するために、投稿内容をエスケープする手段を取りました。
ただ、エスケープ関数の違いがよくわからなくて…

目次

1. WordPressでの文字列のエスケープ
2. esc_htmlとesc_attrの違い
   • esc_htmlの場合
   • esc_attrの場合
3. まとめ

WordPressでの文字列のエスケープ

WordPressにはエスケープ関数が3種類あります。

• esc_html – <>&”’をエンティティ化してくれます
• esc_attr – <>&”’をエンティティ化して、HTMLタグを取り除きます。
• esc_url – URL文字列として最適化してくれます

WordPressで使うエスケープの関数について ｜ memocarilog

いまいち、esc_attrとesc_htmlの違いがわかりませんね。

esc_htmlとesc_attrの違い

例えば、投稿内容にHTMLタグを利用していた場合に、どうエスケープしてくれるのか確認してみます。

<h1 id="page-title">H1タグです</h1>
<p>こういうことでいいのかな？</p>
<p style="color:red;">色付きのテキストを書いてみる</p>

こんな簡単なHTMLを投稿欄、テキストエディタに書きました。

もちろん出力は、タグがそのまま反映します。

esc_htmlの場合

ではまず、esc_htmlを使ってみます。

echo esc_html(get_the_content());

と出力すると

タグがそのまま出てきました。

ソースを確認すると一目瞭然で、<や>が&lt:などに変換されています。

esc_attrの場合

では、続いてesc_attrを使ってみます。

echo esc_attr(get_the_content());

と出力すると

うーん、全く変わりませんね…。

『HTMLタグを取り除く』という表現から、strip_tags的なイメージを持ってたんですが、どうやら違うようです。

まとめ

結局、今のところ違いがわかってません。
このへんもう少し調べないといけません。

とりあえずesc_htmlを多用しつつ、うまくいかない時はesc_attrを試す感じでしのいでいきます。

esc_attrはHTMLタグ属性をエスケープして、esc_htmlはHTMLタグをエスケープするってことなんだけど、属性って結局何がエスケープされてるんでしょうか…。

うまいことこれに当てはまるように試してみないといけません。
そいぎ～。

Tweet

関連してそうな記事:

WordPressで画像ディレクトリの指定は、slug使っちゃう派？投稿しちゃう派？ WordPressでプラグインいらずなファビコン表示方法 WordPressでプラグイン使わず簡単にキーワードとディスクリプションを設定する方法 カスタムフィールドでショートコードを使いたい