WordPressセキュリティを考える会第6回資料 WordPress(PHP) からjQuery(JavaScript)に動的に値を渡す方法について WordPressに限らず、ウェブアプリケーションでPHPからJavaScriptに値を渡したい場合はあるかと思います。 以下の方法を検証してみます。 1. data-XXX 属性の値に渡す 2. wp_localize_script 3. esc_js wp_localize_scriptは、内部でjson_encodeを使用しているが、HTMLエスケープはしないので注意が必要。 詳細は -> http://www.rescuework.jp/blog/wp_localize_script-json.html 2014-09-07（日）14:00 - 17:00 東京都中央区新川1-3-4 PAビル5F コワーキングスペース茅場町 コワーキングスペース茅場町

1. ➨6ᅇ WordPress
䝉䜻䝳䝸䝔䜱䜢⪃䛘䜛఍
䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫
Ỉ㔝ྐᅵ
http://www.rescuework.jp/
2014ᖺ9᭶7᪥ 䝁䝽䞊䜻䞁䜾䝇䝨䞊䝇ⱴሙ⏫

2. ⮬ᕫ⤂௓
Ỉ㔝 ྐᅵ
䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫
WordPress䛷ᵓ⠏䛥䜜䛯
䝃䜲䝖䛾Ᏻ඲ᛶデ᩿䠋ホ౯
䝔䞊䝬䠋䝥䝷䜾䜲䞁䛾䝉䜻䝳䝸䝔䜱䝏䜵䝑䜽

3. άືሗ࿌1. WordPressᮏయ䛾ᨵၿ
wpdb::prepare (SQL䜢⏕ᡂ)䛾୙㐺ษ䛺౑䛔᪉
● ㆙࿌䜢⾲♧䛩䜛ᥦ᱌
● WP3.9 䛻ྲྀ䜚㎸䜎䜜䜛
https://core.trac.wordpress.org/changeset/27073
䈜 WordPress䜢Ᏻ඲䛻౑䛘䜛䜘䛖䛻ᨵၿ䛧䛶䛔䛟

4. άືሗ࿌2. 䝥䝷䜾䜲䞁䛾ᨵၿ
Login Rebuilder (䝻䜾䜲䞁URL䜢ኚ᭦)
● CSRF(⨜䝨䞊䝆䜢㜀ぴ䛩䜛䛸ᨵ䛦䜣䛥䜜䜛
● 㛤Ⓨ⪅䛻ሗ࿌䚸㛤Ⓨ⪅䛜ಟṇ
http://jvn.jp/jp/JVN05329568/
䈜බᘧ䝕䜱䝺䜽䝖䝸䛾䝥䝷䜾䜲䞁䜢Ᏻ඲䛻䛧䛶䛔䛟

5. ᮏ᪥䛾䝛䝍
WordPress䛛䜙JavaScript䛻䝕䞊䝍䜢Ώ䛩
● 䝇䝷䜲䝗䝅䝵䞊➼䛾㏿ᗘ䚸䜶䝣䜵䜽䝖
● 䝔䜻䝇䝖䠄䜶䝷䞊䝯䝑䝉䞊䝆➼䠅
䈜䝛䝍䛿ཧຍ⪅䜰䞁䜿䞊䝖䛷Ỵᐃ䚹Login Lockdown䝺䝡䝳䞊䛿䚸ู䛾ᶵ఍䛻䚹

6. Ⰻ䛟䛺䛔᪉ἲ
<script>
var mode= ‘<?php echo $mode;?>’,
</script>

7. Ⰻ䛟䛺䛔᪉ἲ
<script>
var mode= ‘<?php echo $mode;?>’,
</script>
WordPress (PHP) 䛛䜙 JavaScript 䛻䛭䛾䜎䜎
䝕䞊䝍䜢Ώ䛧䛶䛔䜛
୙ṇ䛺䝁䞊䝗䜢ฟຊ䛩䜛༴㝤ᛶ䛜䛒䜛

8. 䝕䞊䝍䜢Ώ䛩ሙྜ
䝕䞊䝍䜢Ώ䛩ඛ䜢☜ㄆ䛩䜛
ពᅗ䛧䛺䛔ゎ㔘䜢䛥䜜䛺䛔䜘䛖䛻䚸ฎ⌮䛩䜛
౛: HTML䚷< 䜢 &lt;䚷> 䜢 &gt;䚷➼
䈜Ώ䛩ඛ䛻䜘䛳䛶䚸ฎ⌮䛾௙᪉䛜␗䛺䜛

9. WordPress 䛛䜙 JavaScript 䜈
┤᥋Ώ䛩
=> JavaScript 䛾䜶䝇䜿䞊䝥
䜔䜔䛣䛧䛔䛾䛷䚸ྍ⬟䛺䜙㑊䛡䜛
WP䛻䛿䛂JS䛻┤᥋Ώ䛩䛃௨እ䛾᪉ἲ䛜䛒䜛

10. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ
HTML䝍䜾䛻䚸data-*** 䛸䛔䛖ᒓᛶ䜢స䜛
<ul class=”bxslider” data-mode=”vertical”>
jQuery䛷ྲྀᚓ: $(”.bxslider”).data(”mode”);

11. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ
WordPress -> HTML -> JavaScript
HTML䛾ᒓᛶ್䛸䛧䛶䜶䝇䜿䞊䝥: esc_attr
<ul class=”bxslider” data-mode=”<?php echo
esc_attr($mode);?>”>

12. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ
● 䝯䝸䝑䝖
䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸HTML䛾ᒓᛶ
್䛸䛧䛶ฎ⌮䛩䜜䜀䜘䛔
● 䝕䝯䝸䝑䝖
኱㔞䛾䝕䞊䝍䜢Ώ䛩䛾䛿኱ኚ
HTML5䛜๓ᥦ( input hidden 䛷ᑐฎ䛩䜛䠛)

13. 2. wp_localize_script䜢౑䛖᪉ἲ
wp_localize_script䛻䚸䝕䞊䝍䜢Ώ䛩
$data = array( ’mode’ => ’vertical’);
wp_localize_script(’slider’,’bxslider’,$data);
JS䛷ྲྀᚓ䛩䜛: bxslider.mode

14. 2. wp_localize_script䜢౑䛖᪉ἲ
wp_enqueue_scriptと組み合わせて使う
wp_enqueue_script(’slider’, JS䝣䜯䜲䝹);
$data = array( ’mode’ => ’vertical’);
wp_localize_script(’slider’,’bxslider’,$data);

15. 2. wp_localize_script䜢౑䛖᪉ἲ
下記のようなコードをWPが出力する
<script type='text/javascript'>
/* <![CDATA[ */
var bxslider = {"mode":"vertical"};
/* ]]> */
</script>

16. 2. wp_localize_script䜢౑䛖᪉ἲ
WordPress -> JSON -> JavaScript
wp_localize_script䛜䚸JSON䛻ኚ᥮䛧䛶䛟䜜䜛
䈜HTML䝍䜾䜢䜶䝇䜿䞊䝥䛧䛺䛔
json_encode䛾䜸䝥䝅䝵䞁䛿PHP5.3௨㝆
WP䛿PHP5.2௨㝆䜢䝃䝫䞊䝖䛧䛶䛔䜛

17. 2. wp_localize_script䜢౑䛖᪉ἲ
● 䝯䝸䝑䝖
䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸
wp_localize_script䛻䝕䞊䝍䜢Ώ䛫䜀Ⰻ䛔
● 䝕䝯䝸䝑䝖
HTML䜶䝇䜿䞊䝥䛧䛺䛔䛾䛷䚸JSഃ䛷ฟຊ䛩䜛䛸䛝
䛿䜽䝻䝇䝃䜲䝖䝇䜽䝸䝥䝔䜱䞁䜾䛻ὀព
http://www.rescuework.jp/blog/wp_localize_script-json.html

18. 3. esc_js䜢౑䛖᪉ἲ
esc_js 䛜 < > & ’ ” 䜢䜶䝇䜿䞊䝥䛩䜛
var mode = ’<?php echo esc_js($mode);?>’,
䈜JavaScriptഃ䛷䛿ఱ䜒䛧䛺䛔

19. 3. esc_js䜢౑䛖᪉ἲ
WordPress -> JavaScript
䝕䞊䝍䜢Ώ䛩䜋䛛䚸JS⮬య䜢ືⓗ⏕ᡂ䛷䛝䜛
䈜⬤ᙅᛶ䛜䛒䜛ሙྜ䚸⿕ᐖ䛜⏒኱
䝕䞊䝍䜢Ώ䛩┠ⓗ䛷౑䛖䛾䛿㑊䛡䜛

20. 3. esc_js䜢౑䛖᪉ἲ
● 䝯䝸䝑䝖
JavaScript䛾᭩䛝᥮䛘䛜᭱ᑠ㝈䛷䛩䜐
● 䝕䝯䝸䝑䝖
JS䛾䜶䝇䜿䞊䝥ฎ⌮䛜ᚲせ
⬤ᙅᛶ䛜䛒䜛ሙྜ䚸⿕ᐖ䛜⏒኱

21. JS ഃ䛷䛾ධຊ᳨ド
䝇䝷䜲䝎䞊䛾⾲♧䝰䞊䝗
● ≉ᐃ䛾ᩥᏐิ䛾䜏ཷ䛡௜䛡䜛
horizontal, vertical ➼
䈜ධຊ᳨ドฎ⌮䜢᭩䛟䛾䛜ዲ䜎䛧䛔
䠄᫬㛫䛾㒔ྜ䛷௒ᅇ䛿┬␎䠅

22. ᝟ሗ䛾ධᡭ᪉ἲ䠛
Ᏻ඲䛺䝁䞊䝕䜱䞁䜾䛾䛯䜑䛻
● බᘧ䝗䜻䝳䝯䞁䝖 (Codex)
● බᘧ䝔䞊䝬䜢Ꮫ䜆
Twenty Fourteen 䝔䞊䝬䛷䚸wp_localize_script䜢
౑⏝䛧䛶䛔䜛
https://themes.trac.wordpress.org/browser/twentyfourteen/1.2/functions.php#L251

23. 㐃㍕᭩⡠ 䛂WordPress 䝉䜻䝳䝸䝔䜱䝙䝳䞊䝇䛃
WordPress䝉䜻䝳䝸䝔䜱᝟ሗ
ᾏእ᝟ሗ
⊂⮬䝛䝍䠄Login Rebuilder 䛺䛹䠅
http://www.iineshoten.com/story/114/