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

これからHTML5を書く人のための
セキュリティ
Yoshinori Matsumoto
2012/07/21

目次

• 自己紹介
• これから書き始める人の悩み
• ついついやってしまうセキュリティホール
• HTML5まわりで起こるセキュリティ対策
• まとめ
• 参考文献
HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info

自己紹介
• 名前：松本悦宜(よしのり)
• Twitter : @ym405nm
• 会社：神戸デジタル・ラボ
• 業務：Webプログラマー、セキュリティエンジニ
ア、セキュリティコンサルタント

セキュリティ JavaScript HTML5 Android Web
神戸ITフェスティバル讃岐うどん小ネタ

自己紹介

• セキュリティ診断
事例 : ECサイト
管理者アカウントがのっとられないか
商品在庫・値段が改ざんされないか
顧客情報が漏洩しないか
攻撃の踏み台にされないか

擬似的に攻撃して検証


これから書き始める人の
悩み

これからHTML5を書き始める人の悩みは何ですか？

これから書き始める人の悩み

• そうだ、Webアプリをつくろう！
•サーバサイド
•DOMツリー
•JavaScript
•Ajax
理解することがいっぱいある
•新要素
•ブラウザ依存
•スマホ対応
など


• そうだ、Webアプリをつくろう！
•セキュリティ？？
クロスサイトスクリプティング、SQLインジェクショ
ン、クロスサイトリクエストフォージェリ、バッファ・
オーバーフロー、OSコマンドインジェクション、クロ
スサイトトレーシング、ブルートフォースアタック

セキュリティなんてやってられへん！！



• 重要なサイトならともかくすべてのセキュリ
ティチェックを行うのは大変！

• かといって全く対策しないのも・・・
• セキュリティにも優先順位があるはず
重要なセキュリティ対策と

HTML5を書くときの注意点をご紹介

ついついやってしまう
セキュリティホール

Webサイトのセキュリティに関して、
よく検出されるセキュリティホール
対策しようと思っていても、
ついつい忘れてしまうけど、
悪用されると結構あぶない2例をご紹介

XSS

• XSS (Cross Site Scripting)
• 勝手に攻撃者がJavaScriptを実行してしまう
手法

• 攻撃者が作ったコードが他の人のブラウザで
も実行される

• サイト改ざん、他サイトへの誘導

XSS
• サンプルをお見せします！
簡易おみくじ

テキストボックスに名前を入れ
て、送信ボタンを押すと、

フォームの下に名前とおみくじ結
果が出力される


ちょこっとソースでも。。。

<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);
}
?>
投稿した値が
そのまま表示される

原因
投稿した値がタグを入れると
そのまま表示される HTMLとして認識される

<span style= color:red >
まつもと
</span>

ここにJavaScriptを仕込むと
それが実行される

サイト改ざん、悪意のあるサイト誘導

対策
HTMLとして特別な意味をもつ記号を、
エスケープ処理をして無効にする

PHPでの対策例
htmlspecialchars($_POST['name'],ENT_QUOTES,'UTF-8');

変換前変換後
<span
<span
style="color:red
style="color:red;">
;">まつもと
まつもと</span> さんは
</span> さんは
凶です！
凶です！

SQLインジェクション

• 攻撃者がSQL文を改ざんして、勝手に好きな
SQL文を追加する

• 顧客情報やコンテツ情報がSQLに入っている
と大きな被害になる

• 情報漏えい、サイト改ざん

ログインフォーム

SELECT * FROM USERS
WHERE ID=”___” and PASS = “___”
ID, PASS SQL文

ログイン可否結果
server DB


ログインフォーム

改ざんPASS = “___”
SELECT * FROM USERS
WHERE ID=”___” and

ログインできる
攻撃コード SQL文

ログインOK 結果
server DB


HTML5まわりで起こる
セキュリティ対策
HTML5活用するサイトをつくるときに、
頭にいれておきたいセキュリティ対策を4例紹介
簡単に直せるけど、重要な

その１
XSS対策

• やっぱりXSS対策は重要
• JavaScriptを実行されないようにエスケープ
することが大事

• これはHTML5の新しい要素でも一緒のこと


その１
URLで指定した動画ファイルを再生するとしたら。。。

http://server.com/video?ﬁle=html5.mov

HTML

ページ

その１

http://server.com/video?ﬁle=html5.mov

<video src=”html5.mov”></video>


その１

http://server.com/video?ﬁle= ><script>alert(1)</script>

<video src=””><script>alert(1)</script>
”></video>


その２

新しいフォーム

• HTML５でブラウザがやってくれる便利な機
能たち

• ブラウザがやってくれることは改ざんされる
ものと認識する


その２

送信


その２

<input type=”text” required>

required属性を指定するこ
とで、空欄では送信できず
エラーメッセージを表示する


その２

<input type=”email”>

type属性にemailを指定する
と、メールアドレスでない値
はエラーが表示される


その２

HTML5の新機能を使えば、ブラウザがバリデート
を行ってくれるのでサーバサイドでバリデートす
る必要はない！！
DANGER


その２

Chek HTTPリクエスト

Browser HTTPレスポンス server

HTTPリクエスト

HTTPレスポンス
攻撃者攻撃者が直接HTTPリクエストを作成
した場合、値のブラウザが行う値の
チェックをすり抜ける

その２

Chek HTTPリクエスト

Browser HTTPレスポンス Chek server

HTTPリクエスト

HTTPレスポンス
攻撃者どんなリクエストを送られてもいい
ように、サーバサイドでチェックをし
ておく

その３
Ajax

• Ajaxによりユーザビリティが大幅向上！
• Ajax使うと、JavaScriptで値をやりとりする
ことが増える

• JavaScriptコードを乗っ取られる危険性も


その３

HTML

Java Ajax
Script

ここで通信をする値に関しても
サンプルチェックをすることが必須


その３
サンプル

jQuery
$("#sample1button").on("click",function(){
$.get("sample1.php",{query: $("#sample1text").val()},function(data){
// callback
}); 通信先リクエストパラメータコールバック
});
処理


その３
値のチェックしてる？
$("#sample1").html(data);
});
}); 投稿した値が
そのまま表示される
送られてきたデータに
JavaScriptの攻撃コードがあったら
実行される


その３
値のチェックしてる？

$("#sample1").text(data);
});
});
textメソッドを使用する

HTMLのタグを無効にする


その３
JSON 正しく使えてる？

e = eval("("+data+")");
$("#sample3").text(e["res"]);
});
}); テキストデータで来たJSON形式を
オブジェクト形式に変換する

データに JavaScript の関数が入っていた場合、
eval関数によって実行される恐れがある


その３

• JavaScriptでしっかりJSONを受け取る
$.getJSON("sample4.php",{query: $("#sample4text").val()},function(data){
$("#sample4").text(data["res"]);
});
});

jQuery には getJSON とよばれる
メソッドが用意されている


その３

• JSONデータを扱うときは、テキストデータで
はなくJSON形式

Content-Type: application/json; charset=UTF-8

HTTPレスポンスでしっかり指定する


その３

• テキストデータに解釈されないように注意する
X-Content-Type-Options: nosniff

IE が HTML ファイル以外を HTML と
認識するのを防ぐ


その３

• HTMLと同様に特定の記号には注意する
echo json_encode($res);

json_encode 関数は
「」等を自動的にエスケープする


その４

iframe vs IE

• 新しいブラウザを頼り過ぎない
• 新しいブラウザといえども、今後もセキュリ
ティ問題は出続けます


その４

<iframe src=”http://server.com”>
HTML

iframe


その４

<a>
<iframe src=”http://server.com”>
HTML </a>

iframe IEではiframe全体にリンクが貼れる

攻撃者サイト内で悪用される


その４

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: 1


まとめ

• HTML5で新しくできること、新しく理解すべ
きことはたくさんある

• セキュリティもそのなかの１つ
• 重要なところや、よく使うとこを中心に対策
とる必要がある


参考文献

体系的に学ぶ安全なWebアプリケーションの作り方脆弱性が生まれる原理と対策の実践
徳丸浩ソフトバンククリエイティブ

HTML5 Security Cheatsheet
http://html5sec.org/

PHPのイタい入門書を読んでAjaxのXSSについて検討した(1)
http://d.hatena.ne.jp/ockeghem/20110905/p1

X-Content-Type-Options: nosniﬀ つかわないやつは死ねばいいのに!
http://d.hatena.ne.jp/hasegawayosuke/20110106/p1

サンプルコード
https://github.com/ym405nm/html5sec-demo


おわりに

• Webアプリを作るのは楽しいですよね
• 気軽に作るアプリもいくつか気にしておくセ
キュリティがある

• Webアプリ OR HTMLを書きながらセキュリ
ティを学ぶ勉強会もしたいですね


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

More Related Content

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