Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
➨6ᅇ WordPress 
䝉䜻䝳䝸䝔䜱䜢⪃䛘䜛఍ 
䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫ 
Ỉ㔝ྐᅵ 
http://www.rescuework.jp/ 
2014ᖺ9᭶7᪥ 䝁䝽䞊䜻䞁䜾䝇䝨䞊䝇ⱴሙ⏫
⮬ᕫ⤂௓ 
Ỉ㔝 ྐᅵ 
䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫ 
WordPress䛷ᵓ⠏䛥䜜䛯 
䝃䜲䝖䛾Ᏻ඲ᛶデ᩿䠋ホ౯ 
䝔䞊䝬䠋䝥䝷䜾䜲䞁䛾䝉䜻䝳䝸䝔䜱䝏䜵䝑䜽
άືሗ࿌1. WordPressᮏయ䛾ᨵၿ 
wpdb::prepare (SQL䜢⏕ᡂ)䛾୙㐺ษ䛺౑䛔᪉ 
● ㆙࿌䜢⾲♧䛩䜛ᥦ᱌ 
● WP3.9 䛻ྲྀ䜚㎸䜎䜜䜛 
https://core.trac.wordpress.org/chang...
άືሗ࿌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(”...
1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ 
WordPress -> HTML -> JavaScript 
HTML䛾ᒓᛶ್䛸䛧䛶䜶䝇䜿䞊䝥: esc_attr 
<ul class=”bxslider” data-mode=”<?php echo...
1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ 
● 䝯䝸䝑䝖 
䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸HTML䛾ᒓᛶ 
್䛸䛧䛶ฎ⌮䛩䜜䜀䜘䛔 
● 䝕䝯䝸䝑䝖 
኱㔞䛾䝕䞊䝍䜢Ώ䛩䛾䛿኱ኚ 
HTML5䛜๓ᥦ( input hidden 䛷ᑐฎ䛩䜛䠛)
2. wp_localize_script䜢౑䛖᪉ἲ 
wp_localize_script䛻䚸䝕䞊䝍䜢Ώ䛩 
$data = array( ’mode’ => ’vertical’); 
wp_localize_script(’slider’...
2. wp_localize_script䜢౑䛖᪉ἲ 
wp_enqueue_scriptと組み合わせて使う 
wp_enqueue_script(’slider’, JS䝣䜯䜲䝹); 
$data = array( ’mode’ => ’ve...
2. wp_localize_script䜢౑䛖᪉ἲ 
下記のようなコードをWPが出力する 
<script type='text/javascript'> 
/* <![CDATA[ */ 
var bxslider = {"mode":"v...
2. wp_localize_script䜢౑䛖᪉ἲ 
WordPress -> JSON -> JavaScript 
wp_localize_script䛜䚸JSON䛻ኚ᥮䛧䛶䛟䜜䜛 
䈜HTML䝍䜾䜢䜶䝇䜿䞊䝥䛧䛺䛔 
json_enco...
2. wp_localize_script䜢౑䛖᪉ἲ 
● 䝯䝸䝑䝖 
䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸 
wp_localize_script䛻䝕䞊䝍䜢Ώ䛫䜀Ⰻ䛔 
● 䝕䝯䝸䝑䝖 
HTML䜶䝇䜿䞊䝥䛧䛺䛔䛾䛷䚸JSഃ䛷ฟຊ䛩䜛䛸䛝 
...
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....
㐃㍕᭩⡠ 䛂WordPress 䝉䜻䝳䝸䝔䜱䝙䝳䞊䝇䛃 
WordPress䝉䜻䝳䝸䝔䜱᝟ሗ 
ᾏእ᝟ሗ 
⊂⮬䝛䝍䠄Login Rebuilder 䛺䛹䠅 
http://www.iineshoten.com/story/114/
Upcoming SlideShare
Loading in …5
×

WordPress(PHP) からjQuery(JavaScript)に動的に値を渡す方法

4,685 views

Published on

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 コワーキングスペース茅場町 コワーキングスペース茅場町

  • 2014-09-07(日)14:00 - 17:00
    東京都中央区新川1-3-4 PAビル5F コワーキングスペース茅場町
    http://wpsecurity.doorkeeper.jp/events/14514

    当日、イベントに参加される方には、デモで使用するテーマのコードも配布します。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WordPress(PHP) からjQuery(JavaScript)に動的に値を渡す方法

  1. 1. ➨6ᅇ WordPress 䝉䜻䝳䝸䝔䜱䜢⪃䛘䜛఍ 䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫ Ỉ㔝ྐᅵ http://www.rescuework.jp/ 2014ᖺ9᭶7᪥ 䝁䝽䞊䜻䞁䜾䝇䝨䞊䝇ⱴሙ⏫
  2. 2. ⮬ᕫ⤂௓ Ỉ㔝 ྐᅵ 䝺䝇䜻䝳䞊䝽䞊䜽ᰴᘧ఍♫ WordPress䛷ᵓ⠏䛥䜜䛯 䝃䜲䝖䛾Ᏻ඲ᛶデ᩿䠋ホ౯ 䝔䞊䝬䠋䝥䝷䜾䜲䞁䛾䝉䜻䝳䝸䝔䜱䝏䜵䝑䜽
  3. 3. άືሗ࿌1. WordPressᮏయ䛾ᨵၿ wpdb::prepare (SQL䜢⏕ᡂ)䛾୙㐺ษ䛺౑䛔᪉ ● ㆙࿌䜢⾲♧䛩䜛ᥦ᱌ ● WP3.9 䛻ྲྀ䜚㎸䜎䜜䜛 https://core.trac.wordpress.org/changeset/27073 䈜 WordPress䜢Ᏻ඲䛻౑䛘䜛䜘䛖䛻ᨵၿ䛧䛶䛔䛟
  4. 4. άືሗ࿌2. 䝥䝷䜾䜲䞁䛾ᨵၿ Login Rebuilder (䝻䜾䜲䞁URL䜢ኚ᭦) ● CSRF(⨜䝨䞊䝆䜢㜀ぴ䛩䜛䛸ᨵ䛦䜣䛥䜜䜛 ● 㛤Ⓨ⪅䛻ሗ࿌䚸㛤Ⓨ⪅䛜ಟṇ http://jvn.jp/jp/JVN05329568/ 䈜බᘧ䝕䜱䝺䜽䝖䝸䛾䝥䝷䜾䜲䞁䜢Ᏻ඲䛻䛧䛶䛔䛟
  5. 5. ᮏ᪥䛾䝛䝍 WordPress䛛䜙JavaScript䛻䝕䞊䝍䜢Ώ䛩 ● 䝇䝷䜲䝗䝅䝵䞊➼䛾㏿ᗘ䚸䜶䝣䜵䜽䝖 ● 䝔䜻䝇䝖䠄䜶䝷䞊䝯䝑䝉䞊䝆➼䠅 䈜䝛䝍䛿ཧຍ⪅䜰䞁䜿䞊䝖䛷Ỵᐃ䚹Login Lockdown䝺䝡䝳䞊䛿䚸ู䛾ᶵ఍䛻䚹
  6. 6. Ⰻ䛟䛺䛔᪉ἲ <script> var mode= ‘<?php echo $mode;?>’, </script>
  7. 7. Ⰻ䛟䛺䛔᪉ἲ <script> var mode= ‘<?php echo $mode;?>’, </script> WordPress (PHP) 䛛䜙 JavaScript 䛻䛭䛾䜎䜎 䝕䞊䝍䜢Ώ䛧䛶䛔䜛 ୙ṇ䛺䝁䞊䝗䜢ฟຊ䛩䜛༴㝤ᛶ䛜䛒䜛
  8. 8. 䝕䞊䝍䜢Ώ䛩ሙྜ 䝕䞊䝍䜢Ώ䛩ඛ䜢☜ㄆ䛩䜛 ពᅗ䛧䛺䛔ゎ㔘䜢䛥䜜䛺䛔䜘䛖䛻䚸ฎ⌮䛩䜛 ౛: HTML䚷< 䜢 &lt;䚷> 䜢 &gt;䚷➼ 䈜Ώ䛩ඛ䛻䜘䛳䛶䚸ฎ⌮䛾௙᪉䛜␗䛺䜛
  9. 9. WordPress 䛛䜙 JavaScript 䜈 ┤᥋Ώ䛩 => JavaScript 䛾䜶䝇䜿䞊䝥 䜔䜔䛣䛧䛔䛾䛷䚸ྍ⬟䛺䜙㑊䛡䜛 WP䛻䛿䛂JS䛻┤᥋Ώ䛩䛃௨እ䛾᪉ἲ䛜䛒䜛
  10. 10. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ HTML䝍䜾䛻䚸data-*** 䛸䛔䛖ᒓᛶ䜢స䜛 <ul class=”bxslider” data-mode=”vertical”> jQuery䛷ྲྀᚓ: $(”.bxslider”).data(”mode”);
  11. 11. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ WordPress -> HTML -> JavaScript HTML䛾ᒓᛶ್䛸䛧䛶䜶䝇䜿䞊䝥: esc_attr <ul class=”bxslider” data-mode=”<?php echo esc_attr($mode);?>”>
  12. 12. 1. 䜹䝇䝍䝮䝕䞊䝍ᒓᛶ䜢౑䛖᪉ἲ ● 䝯䝸䝑䝖 䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸HTML䛾ᒓᛶ ್䛸䛧䛶ฎ⌮䛩䜜䜀䜘䛔 ● 䝕䝯䝸䝑䝖 ኱㔞䛾䝕䞊䝍䜢Ώ䛩䛾䛿኱ኚ HTML5䛜๓ᥦ( input hidden 䛷ᑐฎ䛩䜛䠛)
  13. 13. 2. wp_localize_script䜢౑䛖᪉ἲ wp_localize_script䛻䚸䝕䞊䝍䜢Ώ䛩 $data = array( ’mode’ => ’vertical’); wp_localize_script(’slider’,’bxslider’,$data); JS䛷ྲྀᚓ䛩䜛: bxslider.mode
  14. 14. 2. wp_localize_script䜢౑䛖᪉ἲ wp_enqueue_scriptと組み合わせて使う wp_enqueue_script(’slider’, JS䝣䜯䜲䝹); $data = array( ’mode’ => ’vertical’); wp_localize_script(’slider’,’bxslider’,$data);
  15. 15. 2. wp_localize_script䜢౑䛖᪉ἲ 下記のようなコードをWPが出力する <script type='text/javascript'> /* <![CDATA[ */ var bxslider = {"mode":"vertical"}; /* ]]> */ </script>
  16. 16. 2. wp_localize_script䜢౑䛖᪉ἲ WordPress -> JSON -> JavaScript wp_localize_script䛜䚸JSON䛻ኚ᥮䛧䛶䛟䜜䜛 䈜HTML䝍䜾䜢䜶䝇䜿䞊䝥䛧䛺䛔 json_encode䛾䜸䝥䝅䝵䞁䛿PHP5.3௨㝆 WP䛿PHP5.2௨㝆䜢䝃䝫䞊䝖䛧䛶䛔䜛
  17. 17. 2. wp_localize_script䜢౑䛖᪉ἲ ● 䝯䝸䝑䝖 䜔䜔䛣䛧䛔JS䛾䜶䝇䜿䞊䝥䛷䛿䛺䛟䚸 wp_localize_script䛻䝕䞊䝍䜢Ώ䛫䜀Ⰻ䛔 ● 䝕䝯䝸䝑䝖 HTML䜶䝇䜿䞊䝥䛧䛺䛔䛾䛷䚸JSഃ䛷ฟຊ䛩䜛䛸䛝 䛿䜽䝻䝇䝃䜲䝖䝇䜽䝸䝥䝔䜱䞁䜾䛻ὀព http://www.rescuework.jp/blog/wp_localize_script-json.html
  18. 18. 3. esc_js䜢౑䛖᪉ἲ esc_js 䛜 < > & ’ ” 䜢䜶䝇䜿䞊䝥䛩䜛 var mode = ’<?php echo esc_js($mode);?>’, 䈜JavaScriptഃ䛷䛿ఱ䜒䛧䛺䛔
  19. 19. 3. esc_js䜢౑䛖᪉ἲ WordPress -> JavaScript 䝕䞊䝍䜢Ώ䛩䜋䛛䚸JS⮬య䜢ືⓗ⏕ᡂ䛷䛝䜛 䈜⬤ᙅᛶ䛜䛒䜛ሙྜ䚸⿕ᐖ䛜⏒኱ 䝕䞊䝍䜢Ώ䛩┠ⓗ䛷౑䛖䛾䛿㑊䛡䜛
  20. 20. 3. esc_js䜢౑䛖᪉ἲ ● 䝯䝸䝑䝖 JavaScript䛾᭩䛝᥮䛘䛜᭱ᑠ㝈䛷䛩䜐 ● 䝕䝯䝸䝑䝖 JS䛾䜶䝇䜿䞊䝥ฎ⌮䛜ᚲせ ⬤ᙅᛶ䛜䛒䜛ሙྜ䚸⿕ᐖ䛜⏒኱
  21. 21. JS ഃ䛷䛾ධຊ᳨ド 䝇䝷䜲䝎䞊䛾⾲♧䝰䞊䝗 ● ≉ᐃ䛾ᩥᏐิ䛾䜏ཷ䛡௜䛡䜛 horizontal, vertical ➼ 䈜ධຊ᳨ドฎ⌮䜢᭩䛟䛾䛜ዲ䜎䛧䛔 䠄᫬㛫䛾㒔ྜ䛷௒ᅇ䛿┬␎䠅
  22. 22. ᝟ሗ䛾ධᡭ᪉ἲ䠛 Ᏻ඲䛺䝁䞊䝕䜱䞁䜾䛾䛯䜑䛻 ● බᘧ䝗䜻䝳䝯䞁䝖 (Codex) ● බᘧ䝔䞊䝬䜢Ꮫ䜆 Twenty Fourteen 䝔䞊䝬䛷䚸wp_localize_script䜢 ౑⏝䛧䛶䛔䜛 https://themes.trac.wordpress.org/browser/twentyfourteen/1.2/functions.php#L251
  23. 23. 㐃㍕᭩⡠ 䛂WordPress 䝉䜻䝳䝸䝔䜱䝙䝳䞊䝇䛃 WordPress䝉䜻䝳䝸䝔䜱᝟ሗ ᾏእ᝟ሗ ⊂⮬䝛䝍䠄Login Rebuilder 䛺䛹䠅 http://www.iineshoten.com/story/114/

×