WordPressは無償で使用することができるオープンソースのソフトウェアになるので、セキュリティの穴が発見されやすい上に、多くのユーザーが利用しているメジャーなCMSであるためセキュリティ面で脆弱な部分があると言われています。
本記事では、セキュリティ面で脆弱な部分があるそんなWordPressにコード中に必要不可欠なエスケープ処理についてを詳しく解説します。
- WordPressのエスケープ処理について
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?
- またゼロからやり直さないといけないの?
- 本当にフリーランスになれるの?
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!
\お申し込みは30秒で終わります。/
新しい一歩を、今踏み出してみませんか?
目次
エスケープ処理
そもそもエスケープ処理とは何か?エスケープ処理前と後も比較しながら解説します。
エスケープ処理とは
冒頭の文章でも記述した通り、WordPressはセキュリティ面で脆弱な部分があります。
悪意のあるユーザーによる攻撃手段の一つである「クロスサイトスクリプティング(XSS)」があります。
クロスサイトスクリプティング(XSS)とは
Webサイトの脆弱性を利用して悪意のあるデータを埋め込み、スクリプトを実行させる攻撃手法です。
動的なWebサイトにある入力フォームに脆弱性のあるサイトへ誘導するスクリプトを含んだリンクを設置し、そのリンクをクリックし誘導されると、埋め込まれたスクリプトが実行され、入力した情報やCookieなどが攻撃者へ漏洩され、様々な被害が発生します。
このクロスサイトスクリプティングの対策として、「エスケープ処理」があります。
エスケープ処理とは、サイト内に入力できる機能があり、ユーザーが入力内容に意味のあるコードを入力し送信した際に、そのまま実行されないように入力した文字を変換する処理です。
また、「エスケープ」は「サニタイジング」と同じ意味で用いられます。
例えば、HTMLのタグで使われる<
は、<
という文字に変換処理されます。
エスケープ処理前と後
エスケープ前 | エスケープ後 |
---|---|
< | < |
> | > |
“ | " |
& | & |
空白 | |
‘ | ' |
例
エスケープ前 | エスケープ後 |
---|---|
<a href="http://akui.site">リンク</a> | <a href="http://akui.site">リンク</a> |
3つのエスケープ関数
エスケープ処理には様々ありますが、頻出する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>
接頭辞がthe_
から始まるものは、エスケープ処理が不要
接頭辞がget_
から始まるものは、エスケープ処理が必要
まとめ
エスケープ処理が必要な理由と必要な場合に、エスケープ処理を行うやり方を解説しました。
よく使用するエスケープ関数である、以下の3つは覚えておきましょう。
- esc_html()
- esc_url()
- esc_attr()