WordPressのesc_jsの使い方解説、スクリプトのエスケープ処理

WordPressのesc_jsの使い方解説、スクリプトのエスケープ処理 イメージ画像

WordPressに限らず、他人が入力したデータを保存する際には必ずサニタイズ(無害化)やエスケープ処理をしなければなりません。

WordPressにはデータ処理に関する専用関数が複数用意されていますので、今回はesc_jsを詳しく見てみましょう。

使い方

基本(2.8.0以降)
string esc_js( string $text )

'、htmlspecialchar、”、&をエスケープし、行末を修正します。

$text

必須:エスケープ処理をしたい文字列を指定。

返り値

(string) エスケープ処理後の文字列

esc_jsの中身

wp-includes/formatting.php
function esc_js( $text ) {
    $safe_text = wp_check_invalid_utf8( $text );
    $safe_text = _wp_specialchars( $safe_text, ENT_COMPAT );
    $safe_text = preg_replace( '/&#(x)?0*(?(1)27|39);?/i', "'", stripslashes( $safe_text ) );
    $safe_text = str_replace( "\r", '', $safe_text );
    $safe_text = str_replace( "\n", '\\n', addslashes( $safe_text ) );

    return apply_filters( 'js_escape', $safe_text, $text );
}

行っていることの解説

  • 文字エンコーディングUTF-8における無効な文字を取り除く。
  • 特殊文字をHTMLエンティティに変換する。
  • '(シングルクォート)のHTMLエンティティを'に変換する。
  • "\r"を除外する。
  • "\n"を"\\n"に置き換える。
  • js_escapeのフィルタを適応

使用例

インラインjavascriptで使用するためにテキスト文字列をエスケープします。

※インラインjavascriptとはhtmlのタグ内でonclick=""などで使用することを目的としており、文字列は'で囲む必要があるため、それに関する処理を自動的に行ってくれる関数がesc_jsというわけです。

この関数を知った経緯は、私は他人がフォームに入力したスクリプト言語をデータベースに保存する際にサニタイズの専用関数はあるかな?と調べた時に見つけたんですよね。
当初インライン向けに変換する事とはつい知らず、データベースに格納する時に使えるのかな?と散々調べて時間を無駄にした経緯が…。

変換前のjavascript
<script>
document.getElementById("t1").innerHTML = "Hello world!!";
</script>
変換後のjavascript
<script>ndocument.getElementById("t1").innerHTML = "Hello world!!";n</script>
PHPで使用
<?php $escaped_text = esc_js( $text ); ?>

使用場所としては、他人がフォームに入力したデータをどうしてもインラインjavascriptでそのまま使う必要が出てきた時ぐらいでしょうね。

稀な使用ケースなためか日本向けの翻訳ページは、この記事執筆時には作成されていないため覚えておく必要がない関数の一つでしょう。


関連記事

  1. WordPressのwpautop()自動整形でが余計に入るバグ回避方法 アイキャッチ
    WordPressのwpautop()自動整形で</p>が余計に入るバグ回避方法
  2. WordPressのアクションフック「add meta boxes」の使い方説明 アイキャッチ
    WordPressのアクションフック「add_meta_boxes」の使い方説明
  3. WordPress記事の公開状態・下書き状態などのステータス判定方法 アイキャッチ
    WordPress記事の公開状態・下書き状態などのステータス判定方法

PHPラボ オリジナルツール

無料配布中

当サイトの記事装飾は全てWPのオリジナルプラグインで行ってます。
インストールするとコピペで簡単に綺麗な記事が作成可能に♪
現在無料配布中・あなたのサイトも綺麗に装飾しませんか?

画像をクリックで配布ページへ
Citron WP Shortcode

承認後に表示(反映まで最長1日)

この記事へのコメントはありません。

質問・一言残していく