WordPressのテンプレート作成などのテーマ開発で必要不可欠なエスケープ処理。
世界で多く使用されているWordpressはオープンソースの為、どうしてもセキュリティ面で脆弱な部分はあります。適切にエスケープ処理を行わないと悪意のあるコードが実行されたり様々な被害が発生する可能性があります。
今回は、Wordpressでのエスケープ関数を使ったエスケープ処理について解説します。
エスケープ処理とは
エスケープ処理とは特定の文字や記号をエンコードして、その文字や記号本来の意味を無効化する処理の事を言います。
例えばHTMLで「<」や「>」をそのまま入力するとHTMLコードだと認識してしまい、表示が崩れたりする事があります。それを防ぐために「<」や「>」に置き換える必要があります。簡単に言うとこういった処理の事です。
エスケープ処理をしないと上記のような表示崩れの他に、悪意のあるスクリプトを実行されてしまったりなどの被害がおきる場合があります。これらを防ぐためにエスケープ処理が必須となります。
今回はすべてまとめてエスケープ処理と述べますが、本来は
- 特定の文字や記号を意味をもたない別の文字や記号に置き換える処理を「エスケープ処理」
- 不正なデータや悪意のあるコードを無害化するための処理を「サニタイジング処理」
と言います。
エスケープ処理が必要なものについて
WordPressではテーマファイルに静的に記述しているコードはそのまま置き換えればいいですが、カスタムフィールドの内容やURLなどを動的出力しているものに関しては、先程述べたようにエスケープ処理が必要になってきます。
WordPressでエスケープ処理が必要になるのは、基本的には自身で「echo」して出力しているものとなります。
例えばWordpress関数である「the_title()」と「get_the_title()」では「the_title()」はエスケープ処理する必要はありません。「the_〇〇〇」のように「the_」から始まる関数は内部でエスケープ処理を行い出力までされます。
ただし、「get_the_title()」のような関数はエスケープ処理されていませんので、以下のように別途エスケープ処理をしてから出力が必要になります。
<h2><?php echo esc_html(get_the_title()); ?></h2>esc_html()で文字のエスケープ処理
WordPress関数であるesc_html()は、HTMLタグなどの特殊な文字や記号が入っていた場合に置き換えてくれる関数となります。カスタムフィールドの値を出力させるときによく利用するかと思います。
esc_html()の使い方は以下のようになります。
<?php echo esc_html('<a href="https://cdg-blog.jp/">リンク</a>'); ?>
<div class="item"><?php echo esc_html($items->name); ?></div>esc_url()でURLのエスケープ処理
WordPress関数であるesc_url()は、URLのエスケープ処理です。
a要素やimg要素のsrc属性に出力するURLなどによく使われ、一番使用する関数かなと思います。
esc_url()の使い方は以下のようになります。
<a href="<?php echo esc_url(home_url('/')); ?>">Home</a>
<img src="<?php echo esc_url(get_template_directory_uri().'/img/sampleimg.jpg'); ?>" alt="">esc_attr()でHTMLの属性値などのエスケープ処理
WordPress関数であるesc_attr()は、HTMLの属性(alt、class、value、titleなど)の値を出力する際に使用されるエスケープ処理です。
esc_attr()の使い方は以下のようになります。
<p class="<?php echo esc_attr($class); ?>">
<input type="text" name="name" value="<?php echo esc_attr($name); ?>">さいごに
いかがでしたでしょうか。
今回は、Wordpressでのエスケープ関数を使ったエスケープ処理について解説しました。
これら3つのエスケープ関数はそれぞれテンプレートファイル内などで使われますので、しっかりと覚えて使えるようにしておいた方がいいかなと思います。
