第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 < を < > を > 等
※渡す先によって、処理の仕方が異なる
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/
Top Related