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.

これからHTML5を書く人のためのセキュリティ - HTML5など勉強会

9,636 views

Published on

これからHTML5を書く人のためのセキュリティ
2012年7月21日
HTML5など勉強会

Published in: Technology
  • Be the first to comment

これからHTML5を書く人のためのセキュリティ - HTML5など勉強会

  1. 1. これからHTML5を書く人のための セキュリティ Yoshinori Matsumoto 2012/07/21
  2. 2. 目次 • 自己紹介 • これから書き始める人の悩み • ついついやってしまうセキュリティホール • HTML5まわりで起こるセキュリティ対策 • まとめ • 参考文献HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  3. 3. 自己紹介• 名前:松本 悦宜(よしのり)• Twitter : @ym405nm• 会社:神戸デジタル・ラボ• 業務:Webプログラマー、セキュリティエンジニ ア、セキュリティコンサルタント セキュリティ JavaScript HTML5 Android Web 神戸ITフェスティバル 讃岐うどん 小ネタHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  4. 4. 自己紹介 • セキュリティ診断 事例 : ECサイト 管理者アカウントがのっとられないか 商品在庫・値段が改ざんされないか 顧客情報が漏洩しないか 攻撃の踏み台にされないか 擬似的に攻撃して検証HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  5. 5. これから書き始める人の 悩み これからHTML5を書き始める人の悩みは何ですか?
  6. 6. これから書き始める人の悩み • そうだ、Webアプリをつくろう! •サーバサイド •DOMツリー •JavaScript •Ajax 理解することがいっぱいある •新要素 •ブラウザ依存 •スマホ対応   などHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  7. 7. これから書き始める人の悩み • そうだ、Webアプリをつくろう! •セキュリティ?? クロスサイトスクリプティング、SQLインジェクショ ン、クロスサイトリクエストフォージェリ、バッファ・ オーバーフロー、OSコマンドインジェクション、クロ スサイトトレーシング、ブルートフォースアタック セキュリティなんてやってられへん!!HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  8. 8. これから書き始める人の悩み • 重要なサイトならともかくすべてのセキュリ ティチェックを行うのは大変! • かといって全く対策しないのも・・・ • セキュリティにも優先順位があるはず 重要なセキュリティ対策と HTML5を書くときの注意点をご紹介HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  9. 9. ついついやってしまう セキュリティホール Webサイトのセキュリティに関して、 よく検出されるセキュリティホール 対策しようと思っていても、 ついつい忘れてしまうけど、 悪用されると結構あぶない2例をご紹介
  10. 10. XSS • XSS (Cross Site Scripting) • 勝手に攻撃者がJavaScriptを実行してしまう 手法 • 攻撃者が作ったコードが他の人のブラウザで も実行される • サイト改ざん、他サイトへの誘導HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  11. 11. XSS • サンプルをお見せします! 簡易おみくじ テキストボックスに名前を入れ て、送信ボタンを押すと、 フォームの下に名前とおみくじ結 果が出力されるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  12. 12. ちょこっとソースでも。。。<form method="post" action=""><p>名前 : <input type="text" name="name" value=""></p><input class="btn btn-primary" type="submit" value="submit"></form> <?php if(!empty($_POST[name])){ $omikuji = array(大吉,中吉,末吉,凶); $result = $omikuji[ rand(0, count($omikuji)-1) ]; echo "<hr>"; printf("<h2>%s さんは %s です!</h2>",$_POST[name],$result); }?> 投稿した値が そのまま表示される
  13. 13. 原因 投稿した値が タグを入れると そのまま表示される HTMLとして認識される<span style= color:red >まつもと</span>ここにJavaScriptを仕込むと それが実行される サイト改ざん、悪意のあるサイト誘導
  14. 14. 対策 HTMLとして特別な意味をもつ記号を、 エスケープ処理をして無効にするPHPでの対策例 htmlspecialchars($_POST[name],ENT_QUOTES,UTF-8); 変換前 変換後 &lt;span<span style=&quot;color:redstyle="color:red;"> ;&quot;&gt;まつもとまつもと</span> さんは &lt;/span&gt; さんは凶 です! 凶 です!
  15. 15. SQLインジェクション • 攻撃者がSQL文を改ざんして、勝手に好きな SQL文を追加する • 顧客情報やコンテツ情報がSQLに入っている と大きな被害になる • 情報漏えい、サイト改ざんHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  16. 16. SQLインジェクション ログインフォーム SELECT * FROM USERS WHERE ID=”___” and PASS = “___” ID, PASS SQL文 ログイン可否 結果 server DBHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  17. 17. SQLインジェクション ログインフォーム 改ざんPASS = “___” SELECT * FROM USERS WHERE ID=”___” and ログインできる 攻撃コード SQL文 ログインOK 結果 server DBHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  18. 18. HTML5まわりで起こる セキュリティ対策 HTML5活用するサイトをつくるときに、 頭にいれておきたいセキュリティ対策を4例紹介 簡単に直せるけど、重要な
  19. 19. その1 XSS対策 • やっぱりXSS対策は重要 • JavaScriptを実行されないようにエスケープ することが大事 • これはHTML5の新しい要素でも一緒のことHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  20. 20. その1 URLで指定した動画ファイルを再生するとしたら。。。 http://server.com/video?file=html5.mov HTML ページHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  21. 21. その1 URLで指定した動画ファイルを再生するとしたら。。。 http://server.com/video?file=html5.mov <video src=”html5.mov”></video>HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  22. 22. その1 URLで指定した動画ファイルを再生するとしたら。。。 http://server.com/video?file= ><script>alert(1)</script> <video src=””><script>alert(1)</script> ”></video>HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  23. 23. その2 新しいフォーム • HTML5でブラウザがやってくれる便利な機 能たち • ブラウザがやってくれることは改ざんされる ものと認識するHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  24. 24. その2 送信HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  25. 25. その2 <input type=”text” required> required属性を指定するこ とで、空欄では送信できず エラーメッセージを表示するHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  26. 26. その2 <input type=”email”> type属性にemailを指定する と、メールアドレスでない値 はエラーが表示されるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  27. 27. その2 HTML5の新機能を使えば、ブラウザがバリデート を行ってくれるのでサーバサイドでバリデートす る必要はない!! DANGERHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  28. 28. その2 Chek HTTPリクエスト Browser HTTPレスポンス server HTTPリクエスト HTTPレスポンス 攻撃者 攻撃者が直接HTTPリクエストを作成 した場合、値のブラウザが行う値の チェックをすり抜けるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  29. 29. その2 Chek HTTPリクエスト Browser HTTPレスポンス Chek server HTTPリクエスト HTTPレスポンス 攻撃者 どんなリクエストを送られてもいい ように、サーバサイドでチェックをし ておくHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  30. 30. その3 Ajax • Ajaxによりユーザビリティが大幅向上! • Ajax使うと、JavaScriptで値をやりとりする ことが増える • JavaScriptコードを乗っ取られる危険性もHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  31. 31. その3 HTML Java Ajax Script ここで通信をする値に関しても サンプル チェックをすることが必須HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  32. 32. その3 サンプル jQuery $("#sample1button").on("click",function(){ $.get("sample1.php",{query: $("#sample1text").val()},function(data){ // callback }); 通信先 リクエストパラメータ コールバック }); 処理HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  33. 33. その3 値のチェックしてる?$("#sample1button").on("click",function(){ $.get("sample1.php",{query: $("#sample1text").val()},function(data){ $("#sample1").html(data); });}); 投稿した値が そのまま表示される 送られてきたデータに JavaScriptの攻撃コードがあったら 実行されるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  34. 34. その3 値のチェックしてる?$("#sample1button").on("click",function(){ $.get("sample1.php",{query: $("#sample1text").val()},function(data){ $("#sample1").text(data); });}); textメソッドを使用する HTMLのタグを無効にするHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  35. 35. その3 JSON 正しく使えてる?$("#sample3button").on("click",function(){ $.get("sample3.php",{query: $("#sample3text").val()},function(data){ e = eval("("+data+")"); $("#sample3").text(e["res"]); });}); テキストデータで来たJSON形式を オブジェクト形式に変換する データに JavaScript の関数が入っていた場合、 eval関数によって実行される恐れがあるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  36. 36. その3 JSON 正しく使えてる?• JavaScriptでしっかりJSONを受け取る$("#sample4button").on("click",function(){ $.getJSON("sample4.php",{query: $("#sample4text").val()},function(data){ $("#sample4").text(data["res"]); });}); jQuery には getJSON とよばれる メソッドが用意されているHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  37. 37. その3 JSON 正しく使えてる?• JSONデータを扱うときは、テキストデータで はなくJSON形式 Content-Type: application/json; charset=UTF-8 HTTPレスポンスでしっかり指定するHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  38. 38. その3 JSON 正しく使えてる?• テキストデータに解釈されないように注意する X-Content-Type-Options: nosniff IE が HTML ファイル以外を HTML と 認識するのを防ぐHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  39. 39. その3 JSON 正しく使えてる?• HTMLと同様に特定の記号には注意する echo json_encode($res); json_encode 関数は 「 」等を自動的にエスケープするHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  40. 40. その4 iframe vs IE • 新しいブラウザを頼り過ぎない • 新しいブラウザといえども、今後もセキュリ ティ問題は出続けますHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  41. 41. その4 <iframe src=”http://server.com”> HTML iframeHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  42. 42. その4 <a> <iframe src=”http://server.com”> HTML </a> iframe IEではiframe全体にリンクが貼れる 攻撃者サイト内で悪用されるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  43. 43. その4 X-Frame-Options: SAMEORIGIN 同一サイト以外からは ifame内では呼び出されない 参考 HTTP/1.1 302 Found Cache-Control: private google.com Content-Length: 222 Content-Type: text/html; charset=UTF-8 Date: Fri, 20 Jul 2012 15:14:42 GMT Location: https://www.google.co.jp/ Server: gws X-Frame-Options: SAMEORIGIN x-xss-protection: 1; mode=block X-Firefox-Spdy: 1HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  44. 44. まとめ • HTML5で新しくできること、新しく理解すべ きことはたくさんある • セキュリティもそのなかの1つ • 重要なところや、よく使うとこを中心に対策 とる必要があるHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  45. 45. 参考文献 体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践 徳丸浩 ソフトバンククリエイティブ HTML5 Security Cheatsheet http://html5sec.org/ PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) http://d.hatena.ne.jp/ockeghem/20110905/p1 X-Content-Type-Options: nosniff つかわないやつは死ねばいいのに! http://d.hatena.ne.jp/hasegawayosuke/20110106/p1 サンプルコード https://github.com/ym405nm/html5sec-demoHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info
  46. 46. おわりに • Webアプリを作るのは楽しいですよね • 気軽に作るアプリもいくつか気にしておくセ キュリティがある • Webアプリ OR HTMLを書きながらセキュリ ティを学ぶ勉強会もしたいですねHTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info

×