ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > WordPressの特定の関数をエスケープしよう

WordPressの特定の関数をエスケープしよう

Web制作

2022/07/20

2023/05/08

WordPressの特定の関数をエスケープしよう

WordPressは無償で使用することができるオープンソースのソフトウェアになるので、セキュリティの穴が発見されやすい上に、多くのユーザーが利用しているメジャーなCMSであるためセキュリティ面で脆弱な部分があると言われています。

本記事では、セキュリティ面で脆弱な部分があるそんなWordPressにコード中に必要不可欠なエスケープ処理についてを詳しく解説します。

この記事で身につく内容
  • WordPressのエスケープ処理について

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?

  • またゼロからやり直さないといけないの?
  • 本当にフリーランスになれるの?

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!

\お申し込みは30秒で終わります。/

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか?

エスケープ処理

そもそもエスケープ処理とは何か?エスケープ処理前と後も比較しながら解説します。

エスケープ処理とは

冒頭の文章でも記述した通り、WordPressはセキュリティ面で脆弱な部分があります。

悪意のあるユーザーによる攻撃手段の一つである「クロスサイトスクリプティング(XSS)」があります。

 

クロスサイトスクリプティング(XSS)とは

Webサイトの脆弱性を利用して悪意のあるデータを埋め込み、スクリプトを実行させる攻撃手法です。

動的なWebサイトにある入力フォームに脆弱性のあるサイトへ誘導するスクリプトを含んだリンクを設置し、そのリンクをクリックし誘導されると、埋め込まれたスクリプトが実行され、入力した情報やCookieなどが攻撃者へ漏洩され、様々な被害が発生します。

このクロスサイトスクリプティングの対策として、「エスケープ処理」があります。

 

エスケープ処理とは、サイト内に入力できる機能があり、ユーザーが入力内容に意味のあるコードを入力し送信した際に、そのまま実行されないように入力した文字を変換する処理です。

また、「エスケープ」は「サニタイジング」と同じ意味で用いられます。

例えば、HTMLのタグで使われる< は、&lt;という文字に変換処理されます。

エスケープ処理前と後

エスケープ前エスケープ後
<&lt;
>&gt;
&quot;
&&amp;
空白 &nbsp;
&#x27

 

エスケープ前エスケープ後
<a href="http://akui.site">リンク</a>&lt;a href=&quot;http://akui.site&quot;&gt;リンク&lt;/a&gt;

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()

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから