第6回 WordPressセキュリティを考える会

レスキューワーク株式会社水野史土

http://www.rescuework.jp/2014年9月7日 コワーキングスペース茅場町

自己紹介

水野 史土

レスキューワーク株式会社

WordPressで構築された

サイトの安全性診断／評価

テーマ／プラグインのセキュリティチェック

活動報告1. WordPress本体の改善

wpdb::prepare (SQLを生成)の不適切な使い方

● 警告を表示する提案● WP3.9 に取り込まれる

https://core.trac.wordpress.org/changeset/27073

※ WordPressを安全に使えるように改善していく

活動報告2. プラグインの改善

Login Rebuilder (ログインURLを変更)● CSRF(罠ページを閲覧すると改ざんされる● 開発者に報告、開発者が修正

http://jvn.jp/jp/JVN05329568/

※公式ディレクトリのプラグインを安全にしていく

本日のネタ

WordPressからJavaScriptにデータを渡す

● スライドショー等の速度、エフェクト● テキスト（エラーメッセージ等）

※ネタは参加者アンケートで決定。Login Lockdownレビューは、別の機会に。

良くない方法

<script> var mode= ‘<?php echo $mode;?>’,</script>

良くない方法

<script> var mode= ‘<?php echo $mode;?>’,</script>

WordPress (PHP) から JavaScript にそのままデータを渡している不正なコードを出力する危険性がある

データを渡す場合

データを渡す先を確認する

意図しない解釈をされないように、処理する

例: HTML　< を &lt;　> を &gt;　等

※渡す先によって、処理の仕方が異なる

WordPress から JavaScript へ

直接渡す

=> JavaScript のエスケープ

ややこしいので、可能なら避ける

WPには「JSに直接渡す」以外の方法がある

1. カスタムデータ属性を使う方法

HTMLタグに、data-*** という属性を作る

<ul class=”bxslider” data-mode=”vertical”>

jQueryで取得: $(”.bxslider”).data(”mode”);

1. カスタムデータ属性を使う方法

WordPress -> HTML -> JavaScript

HTMLの属性値としてエスケープ: esc_attr

<ul class=”bxslider” data-mode=”<?php echo esc_attr($mode);?>”>

1. カスタムデータ属性を使う方法

● メリット

ややこしいJSのエスケープではなく、HTMLの属性値として処理すればよい

● デメリット

大量のデータを渡すのは大変

HTML5が前提( input hidden で対処する？)

2. wp_localize_scriptを使う方法

wp_localize_scriptに、データを渡す

$data = array( ’mode’ => ’vertical’);wp_localize_script(’slider’,’bxslider’,$data);

JSで取得する: bxslider.mode

2. wp_localize_scriptを使う方法

wp_enqueue_scriptと組み合わせて使う

wp_enqueue_script(’slider’, JSファイル);$data = array( ’mode’ => ’vertical’);wp_localize_script(’slider’,’bxslider’,$data);

2. wp_localize_scriptを使う方法

下記のようなコードをWPが出力する

<script type='text/javascript'>/* <![CDATA[ */var bxslider = {"mode":"vertical"};/* ]]> */</script>

2. wp_localize_scriptを使う方法

WordPress -> JSON -> JavaScript

wp_localize_scriptが、JSONに変換してくれる

※HTMLタグをエスケープしない

json_encodeのオプションはPHP5.3以降

WPはPHP5.2以降をサポートしている

2. wp_localize_scriptを使う方法

● メリット

ややこしいJSのエスケープではなく、wp_localize_scriptにデータを渡せば良い

● デメリット

HTMLエスケープしないので、JS側で出力するときはクロスサイトスクリプティングに注意http://www.rescuework.jp/blog/wp_localize_script-json.html

3. esc_jsを使う方法

esc_js が < > & ’ ” をエスケープする

var mode = ’<?php echo esc_js($mode);?>’,

※JavaScript側では何もしない

3. esc_jsを使う方法

WordPress -> JavaScript

データを渡すほか、JS自体を動的生成できる

※脆弱性がある場合、被害が甚大

データを渡す目的で使うのは避ける

3. esc_jsを使う方法

● メリット

JavaScriptの書き換えが最小限ですむ

● デメリット

JSのエスケープ処理が必要

脆弱性がある場合、被害が甚大

JS 側での入力検証

スライダーの表示モード

● 特定の文字列のみ受け付ける

horizontal, vertical 等

※入力検証処理を書くのが好ましい

（時間の都合で今回は省略）

情報の入手方法？

安全なコーディングのために

● 公式ドキュメント (Codex)

● 公式テーマを学ぶ

Twenty Fourteen テーマで、wp_localize_scriptを使用しているhttps://themes.trac.wordpress.org/browser/twentyfourteen/1.2/functions.php#L251

連載書籍 「WordPress セキュリティニュース」

WordPressセキュリティ情報

海外情報

独自ネタ（Login Rebuilder など）

http://www.iineshoten.com/story/114/