WordPressは無償で使用することができるオープンソースのソフトウェアです。多くのユーザーが利用しているメジャーなCMSであるため、セキュリティの穴も発見されやすいと言われています。
本記事では、そんなWordPressのコード中に必要不可欠なエスケープ処理について詳しく解説します。
エスケープ処理
そもそもエスケープ処理とは何か？エスケープ処理前と後も比較しながら解説します。
エスケープ処理とは
悪意のあるユーザーによる攻撃手段の一つに「クロスサイトスクリプティング（XSS）」があります。
クロスサイトスクリプティング（XSS）とは
Webサイトの脆弱性を利用して悪意のあるデータを埋め込み、スクリプトを実行させる攻撃手法です。
動的なWebサイトにある入力フォームに、脆弱性のあるサイトへ誘導するスクリプトを含んだリンクを設置します。そのリンクがクリックされてリンク先にジャンプすると、埋め込まれたスクリプトが実行され、入力した情報やCookieなどが攻撃者へ漏洩するという仕組みです。
このクロスサイトスクリプティングの対策が、「エスケープ処理」です。
エスケープ処理とは、サイト内の入力可能な機能に対して、ユーザーが入力内容に意味のあるコードを入力し送信した際に、コードがそのまま実行されないように入力した文字を変換する処理です。
また、「エスケープ」は「サニタイジング」と同じ意味で用いられます。
例えば、HTMLのタグで使われる< は、<という文字に変換処理されます。
エスケープ処理前と後
| エスケープ前 | エスケープ後 |
|---|---|
| < | < |
| > | > |
| “ | " |
| & | & |
| 空白 | |
| ‘ | ' |
エスケープ処理された場合の例
| エスケープ前 | エスケープ後 |
|---|---|
| <a href="http://akui.site">リンク</a> | <a href="http://akui.site">リンク</a> |
３つのエスケープ関数
エスケープ処理には様々ありますが、頻出する3つのエスケープ関数について解説します。
esc_html() （文字のエスケープ）
HTMLで扱われる特殊文字をesc_html()を用いてエスケープします。
カスタム投稿タイプのカスタムフィールドの値をエスケープする際などに使用することが多いです。
コード例
<?php echo esc_html('<a href="http://akui.site">リンク</a>'); ?>実際にechoで出力すると、
<a href="http://akui.site">リンク</a> がHTMLではなく、文字列として出力されます。
esc_url() （URLのエスケープ）
aタグのhref属性やimgタグのsrc属性に指定するURLをesc_url()を用いてエスケープします。
タグ内に使用するget_template_directory_uri()やhome_url()と合わせて使用することが多いです。
コード例
<img src="<?php echo esc_url( get_template_directory_uri() . '/img/sample.jpg' ); ?>" alt="">esc_url( get_template_directory_uri() . '/img/sample.jpg' ); は、こちらの記事で解説している「任意の画像を読み込む」に、esc_url()を加えたものになります。
esc_attr() （HTML属性のエスケープ）
HTMLのclass属性やalt属性にWordPressの値を指定する際にesc_attr()を用いてエスケープします。
コード例
<div class="<?php echo esc_attr( $class ); ?>">esc_attr()の使用頻度はそこまで多くはないですが、これら3つの関数がHTML内で使用するエスケープ関数になります。
エスケープ処理が不要なもの
すべての出力をエスケープする必要はありません。
上記で紹介したものの共通点をみてもらうとお気づきになるかと思いますが、エスケープ対象は、echoを使用しているコードに限られます。
WordPressで用意されている関数では、一つの求める出力に対して、似たような関数が用意されています。
例えば、the_permalink()とget_permalink()というリンクを出力・取得することができる関数があります。
| 関数名 | 処理内容 |
|---|---|
| the_permalink() | リンクを出力 |
| get_permalink() | リンクを取得 |
the_permalink()は処理内容のように、そのままWordPressで処理されたリンクを出力してくれます。よって、関数処理の内部でエスケープ処理をしてくれています。
しかし、get_permalink()はリンクの取得になるので、echoを使って出力をする必要があるため、エスケープ処理が別途必要になります。
<a href="<?php the_permalink(); ?>" alt="">リンク</a>
<a href="<?php echo esc_url(get_permalink()); ?>" alt="">リンク</a>
まとめ
エスケープ処理が必要な理由と必要な場合に、エスケープ処理を行うやり方を解説しました。
よく使用するエスケープ関数である、以下の３つは覚えておきましょう。
- esc_html()
- esc_url()
- esc_attr()
また、エスケープ処理が必要か不要かは、以下のように判断できます。
接頭辞がthe_から始まるものは、エスケープ処理が不要
接頭辞がget_から始まるものは、エスケープ処理が必要
