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.
管理画面を効率よく、安全に
作成する方法
水野 史土
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と同等のセキュリティ
水準で開発できる
ご清聴
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

2,896 views

Published on

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

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

Published in: Internet

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. ご清聴 ありがとうございました

×