Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
管理画面を効率よく、安全に 作成する方法 水野　史土 https://rescuework.nagoya/
自己紹介 水野　史土 (みずの ふみと) レスキューワーク株式会社 (名古屋市 八事) 企業のホームページ運用サポート CMSの初期設定: 万人がある程度満足するもの ↓ 使う人の要望に応じてカスタマイズし、 更新しやすくして提供する
セッションの目標 効率よく、かつ、安全に作成する ▲ 安全だが、作成に手間がかかる方法 => 実際には使われない可能性がある ● 安全で、開発の効率も良い方法
WordPress の管理画面 ● 自由に作ることができる ○ 独自機能を追加しやすい ○ 運用しやすい ● しかし、自己流に作ると... ○ 時間がかかる ○ バグ(脆弱性)が生じやすい
WPの機能を活用して管理画面を作る ● 開発効率が良い ○ データベースへの更新などをWPが行ってくれる ● セキュリティ機能をWPが面倒見てくれる ○ WPにバグが無い限り安全にカスタマイズできる
本日取り上げるもの ● カスタム投稿タイプ (WP3.0～) ○ データ更新やファイルアップロードなどの機能がある管 理画面を容易に作成可能 ● Settings API (WP2.7～) ○ SQLインジェクション、CSRFに対応した管理画面...
サンプルのプラグイン ● スライダー画像 ○ 画像とタイトルを管理画面から入力する ○ 表示する枚数や順番を管理画面で設定する このケースで、安全に開発してみよう
スライダー画像を表示させる ● 画像とタイトルを入力する ○ カスタム投稿タイプ ● 表示する枚数や順番を管理画面で設定する ○ Settings API
カスタム投稿タイプ
カスタム投稿を作る function my_slider_settings_post_type() { register_post_type( 'myslidersettings', array( 'label' => 'スライダー', 'sh...
カスタム投稿を作る function my_slider_settings_post_type() { register_post_type( 'myslidersettings', array( 'label' => 'スライダー', 'sh...
投稿画面とほぼ同じUI WPの更新機能を使う
WPのファイルアップロード機能
カスタム投稿の管理画面 ● 通常の投稿とほぼ同じUI、機能 ○ 下書き／公開等もそのまま使える ● 様々な処理をWPに任せられる ○ データベースの更新 ○ ファイルアップロード
Settings API
Settings APIで管理画面を作る
add_options_page
add_settings_section
add_settings_field
function num_of_slides_callback_function() { echo '<input name="my_slider_settings_num_of_slides" id=" my_slider_settings_...
function num_of_slides_callback_function() { echo '<input name="my_slider_settings_num_of_slides" id=" my_slider_settings_...
更新後のメッセージ
入力値検証とエラーメッセージ
入力値検証とエラーメッセージ ● データ検証を通らない場合、エラーを出せる ○ エラーメッセージの表示処理もWPに任せられる ○ 画面遷移などのコードを書く必要なし http://wpdocs.osdn.jp/データ検証 http://php....
Settings APIで管理画面を作る ● WPのオプション画面とほぼ同じUI ● DBへの更新処理をWPに任せられる ● 画面遷移のチェックをWPに任せられる
WPの機能を使う
SQLインジェクション ● DBに値を渡すとき、命令になってしまう ○ 意図していない書き込み、削除など SQLを自分で作ると、脆弱性が生じやすい ■ WPの機能を使う (自分でSQLを書かない) カスタム投稿、settings APIなどを使う
ファイルのアップロードの脆弱性 ● 不正なファイルをアップロードされる ○ プログラムファイルをアップロードされ、実行される 入力ファイルの検証、ファイル名、ファイルの保存 場所など、様々なチェックが必要 ■ WPの機能を使う (自分で処理を書...
クロスサイトリクエストフォージェリ CSRF ● 通常のフロー: 「編集」→「更新」 ○ 直接「更新」できてしまう脆弱性 ○ 別サイトのリンクを踏む => 意図せず、更新してしまう ページにトークン (攻撃者が推測困難な値)を入れる ■ WPの...
※ クロスサイトスクリプティング XSS ● データをそのまま出力してしまい、意図しないス クリプトを実行してしまう ○ <script>... をそのまま出力する 出力時のエスケープ ■ 管理画面側はWPの関数を使えばほぼOK form_op...
WPの機能を使うと安全？
WPの機能を使うと安全？ ● 多くのユーザーが見ている ○ バグがあっても発見されやすい ● オープンソース ○ 発見した人が修正できる ● 自動アップデート ○ 修正作業が楽
自己流で構築して 脆弱性を作りこんだケース
自己流で脆弱性を作りこんだケース1 ● timthumb.php を使ったテーマ・プラグイン ○ ファイルアップロードするスクリプト ○ 脆弱性が見つかり、修正された
自己流で脆弱性を作りこんだケース1 ● timthumb.php を使ったテーマ・プラグイン ○ ファイルアップロードするスクリプト ○ 脆弱性が見つかり、修正された ↓ WordPress標準のコードではなかったため、 自動アップデートされず...
自己流で脆弱性を作りこんだケース2 ● Acunetix WP Security 4.0.3 ● All in One WP Security & Firewall 3.8.9
自己流で脆弱性を作りこんだケース2 ● Acunetix WP Security 4.0.3 ● All in One WP Security & Firewall 3.8.9 ↓ Settings API を使わないで管理画面作成 不正操作(...
WPの機能を使った場合
カスタム投稿とSettings APIで ● SQLの作成をWPに任せられる ● ファイルアップロードをWPに任せられる ● CSRF対策をWPに任せられる
カスタム投稿とSettings APIで ● SQLの作成をWPに任せられる ● ファイルアップロードをWPに任せられる ● CSRF対策をWPに任せられる ↓ 自前で作るよりも速く作れる WPにバグが無い限り、安全に作れる
自己流でコードを書くより WPの機能を使うほうが安全
クロスサイトスクリプティング には注意する
XSS対策は難しい ● 出力箇所ごとに処理が異なる ○ 属性は esc_attr ○ URLは esc_url ● HTMLタグを許可する場合 ○ wp_kses_post フロントエンド側では、様々なHTMLを生成するの で注意が必要
settings APIの その他のメリット
別プラグインから項目追加 別のプラグイン
別プラグインから項目追加 別プラグインを有効 にして、項目を追加
エラー等も共通の管理画面で表示
項目の差し替えも可能 更新する人の好みに合わせてカスタマイズ可能
別プラグインで管理する ● ベースのプラグインを作成しておく ○ 顧客の要望に応じて、追加プラグインを導入する ● プラグインの開発を分担する ○ 複数人で開発する ○ 別の会社と協業する
他者作成のプラグイン ● 他者作成のプラグインをカスタマイズ ○ 他者作成のプラグインに設定項目を追加する ○ 同一ページに表示できる ■ 更新処理やエラーメッセージを共通にできる
他者作成のプラグインを 改変できるのか？
WordPressはGPLライセンス ● GPL = 自由に改変できる ○ WP本体を自由に改変できる ○ 派生物(プラグインやテーマ)も自由に改変できる
WordPressはGPLライセンス ● GPL = 自由に改変できる ○ WP本体を自由に改変できる ○ 派生物(プラグインやテーマ)も自由に改変できる ↓ 他者作成のプラグインを改変できる 開発効率が良い
公開する場合
公式ディレクトリに公開する場合 ● テーマとプラグインの役割分担 ○ テーマは見た目を扱う ○ カスタム投稿タイプ等の機能はプラグインの領域 公開するときは、ガイドラインを守る
settings API の注意点
実装方法が古い ● WP2.7 は2008年末リリース ○ settings API の仕組みもその頃に作成された ○ オブジェクトではなく、関数ベース ○ モダンなフレームワークと比較すると見劣りする
標準でないプラグインの存在 ● settings APIを使っていないプラグイン ○ 公式ディレクトリに掲載されているものもある ○ 事情があって使わない場合でも注意書きが無い ■ 例: ajaxを使いたいので独自実装
まとめ
WordPressのカスタマイズ ● 効率よく開発する ○ カスタム投稿タイプやSettings APIといった、WPの標準 機能を活用する ● 安全に開発する ○ WP本体の機能を使うことで、WPと同等のセキュリティ 水準で開発できる
ご清聴 ありがとうございました
Prochain SlideShare
Chargement dans…5
×

WordPress 管理画面を効率よく、安全に作成する方法

4 320 vues

Publié le

WordFes Nagoya 2015 の発表資料。
カスタム投稿や Settings API等、WPの標準機能を使って、効率よく、安全にカスタマイズする方法を紹介。

自己流で脆弱性を引き起こした事例も紹介

Publié dans : Internet
Licence: CC Attribution-ShareAlike License
no profile picture user

  • Identifiez-vous pour voir les commentaires

WordPress 管理画面を効率よく、安全に作成する方法

  1. 1. 管理画面を効率よく、安全に 作成する方法 水野　史土 https://rescuework.nagoya/
  2. 2. 自己紹介 水野　史土 (みずの ふみと) レスキューワーク株式会社 (名古屋市 八事) 企業のホームページ運用サポート CMSの初期設定: 万人がある程度満足するもの ↓ 使う人の要望に応じてカスタマイズし、 更新しやすくして提供する
  3. 3. セッションの目標 効率よく、かつ、安全に作成する ▲ 安全だが、作成に手間がかかる方法 => 実際には使われない可能性がある ● 安全で、開発の効率も良い方法
  4. 4. WordPress の管理画面 ● 自由に作ることができる ○ 独自機能を追加しやすい ○ 運用しやすい ● しかし、自己流に作ると... ○ 時間がかかる ○ バグ(脆弱性)が生じやすい
  5. 5. WPの機能を活用して管理画面を作る ● 開発効率が良い ○ データベースへの更新などをWPが行ってくれる ● セキュリティ機能をWPが面倒見てくれる ○ WPにバグが無い限り安全にカスタマイズできる
  6. 6. 本日取り上げるもの ● カスタム投稿タイプ (WP3.0～) ○ データ更新やファイルアップロードなどの機能がある管 理画面を容易に作成可能 ● Settings API (WP2.7～) ○ SQLインジェクション、CSRFに対応した管理画面を作成 する機能
  7. 7. サンプルのプラグイン ● スライダー画像 ○ 画像とタイトルを管理画面から入力する ○ 表示する枚数や順番を管理画面で設定する このケースで、安全に開発してみよう
  8. 8. スライダー画像を表示させる ● 画像とタイトルを入力する ○ カスタム投稿タイプ ● 表示する枚数や順番を管理画面で設定する ○ Settings API
  9. 9. カスタム投稿タイプ
  10. 10. カスタム投稿を作る function my_slider_settings_post_type() { register_post_type( 'myslidersettings', array( 'label' => 'スライダー', 'show_ui' => true, 'supports' => array( 'title', 'thumbnail' ), ) ); } add_action( 'init', 'my_slider_settings_post_type', 1 );
  11. 11. カスタム投稿を作る function my_slider_settings_post_type() { register_post_type( 'myslidersettings', array( 'label' => 'スライダー', 'show_ui' => true, 'supports' => array( 'title', 'thumbnail' ), ) ); タイトルとアイキャッチのみのカスタム投稿 } add_action( 'init', 'my_slider_settings_post_type', 1 );
  12. 12. 投稿画面とほぼ同じUI WPの更新機能を使う
  13. 13. WPのファイルアップロード機能
  14. 14. カスタム投稿の管理画面 ● 通常の投稿とほぼ同じUI、機能 ○ 下書き／公開等もそのまま使える ● 様々な処理をWPに任せられる ○ データベースの更新 ○ ファイルアップロード
  15. 15. Settings API
  16. 16. Settings APIで管理画面を作る
  17. 17. add_options_page
  18. 18. add_settings_section
  19. 19. add_settings_field
  20. 20. function num_of_slides_callback_function() { echo '<input name="my_slider_settings_num_of_slides" id=" my_slider_settings_num_of_slides" type="text" value="'; form_option( 'my_slider_settings_num_of_slides' ); echo '" />'; }
  21. 21. function num_of_slides_callback_function() { echo '<input name="my_slider_settings_num_of_slides" id=" my_slider_settings_num_of_slides" type="text" value="'; form_option( 'my_slider_settings_num_of_slides' ); echo '" />'; DBから取得し、エスケープ処理を行って出力する form_option }
  22. 22. 更新後のメッセージ
  23. 23. 入力値検証とエラーメッセージ
  24. 24. 入力値検証とエラーメッセージ ● データ検証を通らない場合、エラーを出せる ○ エラーメッセージの表示処理もWPに任せられる ○ 画面遷移などのコードを書く必要なし http://wpdocs.osdn.jp/データ検証 http://php.net/manual/ja/function.filter-var.php
  25. 25. Settings APIで管理画面を作る ● WPのオプション画面とほぼ同じUI ● DBへの更新処理をWPに任せられる ● 画面遷移のチェックをWPに任せられる
  26. 26. WPの機能を使う
  27. 27. SQLインジェクション ● DBに値を渡すとき、命令になってしまう ○ 意図していない書き込み、削除など SQLを自分で作ると、脆弱性が生じやすい ■ WPの機能を使う (自分でSQLを書かない) カスタム投稿、settings APIなどを使う
  28. 28. ファイルのアップロードの脆弱性 ● 不正なファイルをアップロードされる ○ プログラムファイルをアップロードされ、実行される 入力ファイルの検証、ファイル名、ファイルの保存 場所など、様々なチェックが必要 ■ WPの機能を使う (自分で処理を書かない)
  29. 29. クロスサイトリクエストフォージェリ CSRF ● 通常のフロー: 「編集」→「更新」 ○ 直接「更新」できてしまう脆弱性 ○ 別サイトのリンクを踏む => 意図せず、更新してしまう ページにトークン (攻撃者が推測困難な値)を入れる ■ WPの機能を利用する (自分で実装しない)
  30. 30. ※ クロスサイトスクリプティング XSS ● データをそのまま出力してしまい、意図しないス クリプトを実行してしまう ○ <script>... をそのまま出力する 出力時のエスケープ ■ 管理画面側はWPの関数を使えばほぼOK form_option, checked, selected
  31. 31. WPの機能を使うと安全？
  32. 32. WPの機能を使うと安全？ ● 多くのユーザーが見ている ○ バグがあっても発見されやすい ● オープンソース ○ 発見した人が修正できる ● 自動アップデート ○ 修正作業が楽
  33. 33. 自己流で構築して 脆弱性を作りこんだケース
  34. 34. 自己流で脆弱性を作りこんだケース1 ● timthumb.php を使ったテーマ・プラグイン ○ ファイルアップロードするスクリプト ○ 脆弱性が見つかり、修正された
  35. 35. 自己流で脆弱性を作りこんだケース1 ● timthumb.php を使ったテーマ・プラグイン ○ ファイルアップロードするスクリプト ○ 脆弱性が見つかり、修正された ↓ WordPress標準のコードではなかったため、 自動アップデートされず、脆弱性が長期間残った
  36. 36. 自己流で脆弱性を作りこんだケース2 ● Acunetix WP Security 4.0.3 ● All in One WP Security & Firewall 3.8.9
  37. 37. 自己流で脆弱性を作りこんだケース2 ● Acunetix WP Security 4.0.3 ● All in One WP Security & Firewall 3.8.9 ↓ Settings API を使わないで管理画面作成 不正操作(CSRF)脆弱性が見つかる
  38. 38. WPの機能を使った場合
  39. 39. カスタム投稿とSettings APIで ● SQLの作成をWPに任せられる ● ファイルアップロードをWPに任せられる ● CSRF対策をWPに任せられる
  40. 40. カスタム投稿とSettings APIで ● SQLの作成をWPに任せられる ● ファイルアップロードをWPに任せられる ● CSRF対策をWPに任せられる ↓ 自前で作るよりも速く作れる WPにバグが無い限り、安全に作れる
  41. 41. 自己流でコードを書くより WPの機能を使うほうが安全
  42. 42. クロスサイトスクリプティング には注意する
  43. 43. XSS対策は難しい ● 出力箇所ごとに処理が異なる ○ 属性は esc_attr ○ URLは esc_url ● HTMLタグを許可する場合 ○ wp_kses_post フロントエンド側では、様々なHTMLを生成するの で注意が必要
  44. 44. settings APIの その他のメリット
  45. 45. 別プラグインから項目追加 別のプラグイン
  46. 46. 別プラグインから項目追加 別プラグインを有効 にして、項目を追加
  47. 47. エラー等も共通の管理画面で表示
  48. 48. 項目の差し替えも可能 更新する人の好みに合わせてカスタマイズ可能
  49. 49. 別プラグインで管理する ● ベースのプラグインを作成しておく ○ 顧客の要望に応じて、追加プラグインを導入する ● プラグインの開発を分担する ○ 複数人で開発する ○ 別の会社と協業する
  50. 50. 他者作成のプラグイン ● 他者作成のプラグインをカスタマイズ ○ 他者作成のプラグインに設定項目を追加する ○ 同一ページに表示できる ■ 更新処理やエラーメッセージを共通にできる
  51. 51. 他者作成のプラグインを 改変できるのか？
  52. 52. WordPressはGPLライセンス ● GPL = 自由に改変できる ○ WP本体を自由に改変できる ○ 派生物(プラグインやテーマ)も自由に改変できる
  53. 53. WordPressはGPLライセンス ● GPL = 自由に改変できる ○ WP本体を自由に改変できる ○ 派生物(プラグインやテーマ)も自由に改変できる ↓ 他者作成のプラグインを改変できる 開発効率が良い
  54. 54. 公開する場合
  55. 55. 公式ディレクトリに公開する場合 ● テーマとプラグインの役割分担 ○ テーマは見た目を扱う ○ カスタム投稿タイプ等の機能はプラグインの領域 公開するときは、ガイドラインを守る
  56. 56. settings API の注意点
  57. 57. 実装方法が古い ● WP2.7 は2008年末リリース ○ settings API の仕組みもその頃に作成された ○ オブジェクトではなく、関数ベース ○ モダンなフレームワークと比較すると見劣りする
  58. 58. 標準でないプラグインの存在 ● settings APIを使っていないプラグイン ○ 公式ディレクトリに掲載されているものもある ○ 事情があって使わない場合でも注意書きが無い ■ 例: ajaxを使いたいので独自実装
  59. 59. まとめ
  60. 60. WordPressのカスタマイズ ● 効率よく開発する ○ カスタム投稿タイプやSettings APIといった、WPの標準 機能を活用する ● 安全に開発する ○ WP本体の機能を使うことで、WPと同等のセキュリティ 水準で開発できる
  61. 61. ご清聴 ありがとうございました

×