More Related Content
Similar to Webアプリ開発者のためのHTML5セキュリティ入門 (20)
More from Muneaki Nishimura (15)
Webアプリ開発者のためのHTML5セキュリティ入門
- 2. 西村 宗晃 a.k.a. nishimunea
html5j Webプラットフォーム部 部員
FxOS コードリーディング 部員
Gecko勉強会 主催
1
- 13. そこでCORSという仕組みが作られた
• CORS:安全にクロスオリジン通信をするための仕組み
• AjaxもXMLHttpRequest Level 2(XHR2)としてCORSに対応
Webサーバ
ページを要求
Origin: http://example.jp
APサーバ
http://example.jp/
(このリクエストはexample.jpのページから発行されました)
データをリクエスト
Access-Control-Allow-Origin: http://example.jp
example.jp
12
(example.jpからのリクエストのみを許可します)
api.example.jp
※CORSはCross Origin Resource Sharingの略
- 25. WebSocketの使用例
http://example.jp/index.html (WebSocketを接続)
var ws = new WebSocket("ws://api.example.jp");
WebSocketの接続を確立
ws.send("msg");
HTTPリクエストヘッダ (WebSocket接続時)
GET http://api.example.jp/ HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: api.example.jp
リクエストにはOriginヘッダが付く
Sec-WebSocket-Key: tJiswgrSqUJu7h5X1W1PKg==
Origin: http://example.jp
24
- 28. サーバでOriginヘッダを検証する際の注意点
• ホスト名は完全一致で比較する
- 脆弱な例: Originに期待するホスト名が含まれていることを確認
if(strpos($_SERVER['HTTP_ORIGIN'], 'example.jp')!== false){
do_process();
example.jp.waru.jpからのリクエストを許可してしまう
- 安全な例: Originヘッダの値と期待するホスト名を完全一致で比較
$url = parse_url($_SERVER['HTTP_ORIGIN']);
if ($url['host'] === 'example.jp'){
do_process();
27
- 42. アクセス制御の単位(Web Storage)
• 同一生成元ポリシーに基づくアクセス制御
example.jp
- scheme + host + port の組み合わせが同じ
ホストからのみアクセスが許可される
アクセス可能
http://a.example.jp
- IEはscheme+hostでアクセス制御する(portを見ない)
- IE8は同じhost内でデータを共有する(schemeも見ない)
• http://a.example.jpのデータに対して
次のホストはアクセスできない
https://a.example.jp
- http://a.example.jp:8080
- https://a.example.jp
- http://example.jp
http://b.example.jp
41
※この他にSessionStorageのデータは他のウィンドウと共有されないという特徴もあります(詳細は下記)
https://developer.mozilla.org/ja/docs/DOM/Storage
- 47. Web Storageを使用する際の注意点
• 永続性の必要ないデータはSessionStorageに保存する
- データの消し忘れによるリスクを軽減できる
• LocalStorageのデータの消し忘れに注意する
- 例えば利用者がサーバからログアウトした際は忘れずにデータを削除する
• サーバとのセッション情報はCookieに保存する
- CookieはJSからのアクセス禁止やサーバからの強制削除が可能であるため
• XSS脆弱性の対策をしっかりやる
- XSSによって攻撃者に全てのデータを盗まれる可能性があるため
- CSP(後述)の適用によりXSSのリスクを軽減する
46
- 57. ポリシーの定義に使用するディレクティブ
ディレクティブ名
default-src
明示的な指定の無い全コンテンツ
script-src
スクリプトファイル
<script>, Worker, SharedWorker, XSLT
object-src
プラグイン
<object>, <embed>, <applet>
style-src
スタイルシート
img-src
画像ファイル
media-src
メディアファイル
<video>, <audio>, <source>, <track>
frame-src
フレームコンテンツ
<iframe>, <frame>
font-src
Webフォント
cssの@font-face
connect-src
56
ポリシーの適用対象
影響を受ける要素の例
サーバとの非同期通信
WebSocket, EventSource, XMLHttpRequest.open
<link rel="stylesheet">, document.styleSheets,
cssの@import
<img>, <link rel="shortcut icon">, cssのurl()や
image()
- 58. ポリシーの書き方
• まずはdefault-srcに'none'を指定
- 初期値は '*' で、全ての通信元を許可するため
default-src 'none';
• コンテンツの種別ごとにアクセスを許可するオリジンを記載
- 例:自身のサイトのJavaScriptの使用+jQueryをCDNで利用する場合
default-src 'none'; script-src 'self' http://code.jquery.com;
57
- 67. 本日ご紹介した注意点
XMLHttpRequest Level 2
• カスタムヘッダにユニークな値が含まれていることを確認する
• Originヘッダの有無、ある場合は許可するオリジンであることを確認する
• Access-Control-Allow-Originに許可する全てのオリジンを列挙しない
WebSocket
• 接続時にOriginヘッダの値を完全一致で確認する
• クライアントから送られたデータは必ずサーバ側で検証する
• wss:の使用を検討する
66