---
title: HTML5セキュリティ その3: HTML5のセキュリティもうちょい詳しく
tags:  #security #owaspkansai #html5 #javascript  
author: [はせがわようすけ](https://convert.docswell.com/user/hasegawa)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/W47Z8MM9E3.jpg?width=480
description: OWASP Kansai Local Chapter Meeting 2nd
published: June 06, 14
canonical: https://convert.docswell.com/s/hasegawa/5133VK-2022-03-14-210221
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/W47Z8MM9E3.jpg)

HTML5のセキュリティ
もうちょい詳しく
HTML5セキュリティ その3 : JavaScript API
Jun 6 2014
Yosuke HASEGAWA
#owaspkansai


# Page. 2

![Page Image](https://bcdn.docswell.com/page/KYJ6PNND7V.jpg)

自己紹介
はせがわようすけ
ネットエージェント株式会社
株式会社セキュアスカイ・テクノロジー 技術顧問
http://utf-8.jp/
OWASP Kansai Chapter Leader
OWASP Japan Chapter Advisory Board member
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 3

![Page Image](https://bcdn.docswell.com/page/5GJ5K558E4.jpg)

HTML5時代のWebアプリ
次々とリリースされるブラウザ
多数の新しい要素と属性
canvas, video, audio, input…
多数の新しいAPI
Web Sockets, Web Storage, XHR Lv.2…
最適化されたJavaScriptエンジン
高速化された描画エンジン
どのブラウザにどの機能が実装されてい
るのか把握できない
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4LE3ZNNGE5.jpg)

次々リリースされるブラウザ
2001
2001
2003
2004
2005
2006
6
2007
2008
2009
7
1.0
1.5
2.0
1
6
7
OWASP Kansai Local Chapter Meeting #2
2
8
3
9
2011
8
3.0
3.5
10
10
15
3.6
23
5
4
2012
9
2 3 4 5
1
5
2010
11
6
12
#owaspkansai


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V8EDRWWNJG.jpg)

HTML5の新機能
マルチメディアのサポート
&lt;video&gt; &lt;audio&gt; &lt;canvas&gt;...
文書構造を表す要素
&lt;section&gt; &lt;header&gt; &lt;footer&gt; ...
フォームの拡張
&lt;input type=&quot;email&quot;&gt; ...
JavaScript API
Web Workers, WebSocket, File...
その他…
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4V7PW99NJ8.jpg)

HTML5時代のWebアプリ
HTML5時代のブラウザ
高速化、高機能化
実行コードのブラウザ上へのシフト
ネイティブアプリからWebアプリへ
サーバ側で実行されていた処理がブラウザの
JavaScript上へ
攻撃もクライアントサイドへシフト
JavaScript上の問題点の増加
XSSやCSRFなどの比重が増加
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L2JV8MMYJQ.jpg)

Webの技術 楽しいですよね！


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Z5EG5GGWEL.jpg)

クロスサイトスクリプティング
強制ブラウズ
書式文字列攻撃
リモートファイルインクルード
SQLインジェクション
パストラバーサル
LDAPインジェクション
バッファオーバーフロー
CSRF
セッションハイジャック
Webの技術 楽しいですよね！
OSコマンドインジェクション
オープンリダイレクタ
DoS
セッション固定攻撃
HTTPレスポンス分割
XPathインジェクション
メモリリーク
HTTPヘッダインジェクション


# Page. 9

![Page Image](https://bcdn.docswell.com/page/V4JQZXXQJP.jpg)

HTML5を使った攻撃
攻撃側こそ新しいWebの技術をもっとも
活用できる
クロスブラウザ対応不要！
誰に遠慮することもなく使いたい技術を選ん
で使える！
多少不安定な技術でもかまわない！
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 10

![Page Image](https://bcdn.docswell.com/page/DK74366YE1.jpg)

HTML5で増加する脅威
攻撃もクライアントサイドへシフト
JavaScriptを通じた攻撃の比重が増加
XSSのリスクも増加
“
多くの点から見て、XSS 脆弱性の危険性
はバッファ オーバーフローに匹敵します。
”
セキュリティに関するブリーフィング : Web に対する SDL の適用
http://msdn.microsoft.com/ja-jp/magazine/cc794277.aspx
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PLJ11VVNJG.jpg)

HTML5で増加する脅威
 XSS
HTML5の新要素によるXSS
JSコード量の増加 – DOM Based XSS
AjaxデータによるXSS
 CSRF
XMLHttpRequestで攻撃者有利
 オープンリダイレクタ
JavaScriptによるリダイレクトの増加
 その他
Ajaxデータからの情報漏えい
APIの使い方の問題
WebSocket、Web Storage、Web Workers…
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 12

![Page Image](https://bcdn.docswell.com/page/8GJW8L3M72.jpg)

今日のはなし
JavaScript API使用上の注意点
WebSocket
Web Storage
Web Workers
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 13

![Page Image](https://bcdn.docswell.com/page/W4EZ8MVMJ3.jpg)

WebSocket


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KY76PN55EV.jpg)

WebSocket
JavaScriptにおける双方向通信機能
var ws = new WebSocket( &quot;ws://example.jp/&quot; );
ws.onopen = function( evt ){
console.log( &quot;connected&quot; );
};
ws.onmessage = function( evt ){
console.log( &quot;received:&quot; + evt.data );
};
ws.send( &quot;hello&quot; );
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 15

![Page Image](https://bcdn.docswell.com/page/5G75K5YGJ4.jpg)

WebSocket
重要な情報はTLS(wss://)を使うこと
httpに対するhttpsと同様
// no TLS
var ws = new WebSocket( &quot;ws://example.jp/&quot; );
// over TLS
var ws = new WebSocket( &quot;wss://example.jp/&quot; );
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 16

![Page Image](https://bcdn.docswell.com/page/V9J2WNGDER.jpg)

WebSocket
Cookieはhttp/httpsと共有される
http://example.jp/で発行されたCookie
は
https://example.jp/
ws://example.jp:8080/websocket
wss://example.jp:8081/websocket
などで共有される
(secure属性がない場合)
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5DEYLPVMJM.jpg)

WebSocket
Cookieはhttp/httpsと共有される
GET /index.html HTTP/1.1
Host: example.jp
Connection: Keep-Alive
GET /websocket HTTP/1.1
Upgrade: websocket
HTTP/1.1 200 OK
Connection: Upgrade
Date: Tue, 1 Jan 2013 09:00:00
Host:GMT
example.jp
Content-Length: 2524
Origin: http://example.jp
Content-Type: text/html; charset=utf-8
Sec-WebSocket-Key: mU6OBz5GKwUgZqbj2OtWfQ==
Set-Cookie: session=12AFE9BD34E5A202;
path=/
Sec-WebSocket-Version:
13
....
Sec-WebSocket-Protocol: chat, superchat
Cookie: session=12AFE9BD34E5A202
HTTP/1.1 101 Switching Protocols
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Accept: IsCRPjZ0Vshy2opkKOsG2UF74eA=
Sec-WebSocket-Protocol: chat
....
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 18

![Page Image](https://bcdn.docswell.com/page/2VJN45M3E8.jpg)

WebSocket
secure属性付きのCookieはhttpsとwss
で共有される
https://example.jp/index.html
wss://example.jp:8081/websocket
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GYE9QYNPE3.jpg)

Web Storage


# Page. 20

![Page Image](https://bcdn.docswell.com/page/5GE8G6KXED.jpg)

Web Storage
JavaScriptでデータを保存する機構
Cookieより大容量
Cookieと違って自動送信されない
JavaScript上で明示的な読み書きが必要
sessionStorage.setItem( &quot;foo&quot;, &quot;abcdefg&quot; );
var value = sesseionStorage.getItem( &quot;foo&quot; );
localStorage - 永続的に保持
sessionStorage - セッション間だけ保持
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 21

![Page Image](https://bcdn.docswell.com/page/MLELG9ZN7R.jpg)

Web Storage
localStorage
明示的に削除しない限りデータを保持
原則、オリジン単位でデータを保持
IE8ではhttpとhttpsで共有される
Safariではプライベートブラウズ時に読み書
きできない
sessionStorage.setItem( &quot;foo&quot;, &quot;data&quot; ); // 例外発生
alert( sesseionStorage.getItem( &quot;foo&quot; ) );
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 22

![Page Image](https://bcdn.docswell.com/page/54JMQZVQEW.jpg)

Web Storage
sessionStorage
ブラウザが開かれている間データを保持
新しいタブでは異なるセッション
同一オリジンのiframe、frameではセッ
ションを共有(IE8,9を除く)
IE8ではhttpとhttpsで共有される
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 23

![Page Image](https://bcdn.docswell.com/page/ZPJR862KE9.jpg)

Web Storage
Cookieと違い、常にJavaScriptから読
み書き可能
Cookie – httponlyによってJSからアクセ
ス不可
XSSが発生したときに盗み見を防ぐことがで
きない
パスワードや生年月日などの重要情報をWeb
Storageに保存しないこと
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 24

![Page Image](https://bcdn.docswell.com/page/NPEX8MD57X.jpg)

Web Storage
Webアプリケーションの「セッション」
と異なるデータ保持期間
Webアプリケーション: セッション = ログ
インからログアウトまで
sessionStorage – (原則)タブを閉じるまで
localStorage – 無期限
ログインしたユーザに紐づくデータの保
存期間に注意
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 25

![Page Image](https://bcdn.docswell.com/page/63EKKGXRED.jpg)

Web Storage
他のユーザとデータが混在する可能性
ユーザA
ログイン
データを保存
タイムアウトによる
強制ログアウト
ユーザB
Web Storage
ログイン
データ読み込み
誤ったデータの使用
データ漏えい
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4L73ZN5G75.jpg)

Web Storage
対策
ユーザIDと合わせて保存する
sessionStorage.setItem( userid + &quot;-foo&quot;, &quot;data&quot; );
未ログインでのページロード時やログイン処
理時、ログアウト処理時にstorage内のデー
タを削除する
(ログアウト処理は確実に走るとは限らない)
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 27

![Page Image](https://bcdn.docswell.com/page/V87DRWDNEG.jpg)

Web Workers


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4VJPW9XNE8.jpg)

Web Workers
JavaScriptによるバックグラウンド処理
機構
多量の計算などの重い処理をUIをブロックせ
ず実行
var worker = new Worker( &quot;background-task.js&quot; );
worker.onmessage = function( event ){
alert( &quot;completed:&quot; + event.data );
};
// background-task.js
for( var i = 0, sum = 0; i &lt; 1000; i++ ){
sum += i;
}
postMessage( sum );
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 29

![Page Image](https://bcdn.docswell.com/page/L2EV8MLYEQ.jpg)

Web Workers
外部からのコードが実行されないよう注
意
// 脆弱なコード
// http://example.jp/#data:text/javascript,onmessage=...
var src = location.hash.substring(1);
var worker = new Worker( src );
攻撃者が用意したスクリプトがWorkerとし
て実行される
ただしDOM操作できないので脅威は低い
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Z57G5GXW7L.jpg)

Web Workers
importScriptsも同様
//脆弱なコード。importScriptsに任意のURIがわたる
var src = location.hash.substring(1);
var worker = new Worker( &#039;worker.js&#039; );
worker.postMessage( src );
// worker.js
onmessage = function( evt ){
if( evt.data ) importScripts( evt.data );
}
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 31

![Page Image](https://bcdn.docswell.com/page/V4EQZX8QEP.jpg)

まとめ
Conclusion


# Page. 32

![Page Image](https://bcdn.docswell.com/page/DKJ4362Y71.jpg)

まとめ
WebSocket
重要情報はTLSで保護されたwss:スキームで
Cookieの共有に注意
Web Storage
重要情報は保存しない
複数ユーザの意図しないデータ共有に注意
Web Workers
外部由来のコードをworker srcとして使用
しない
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 33

![Page Image](https://bcdn.docswell.com/page/PLE11VMNEG.jpg)

参考文献


# Page. 34

![Page Image](https://bcdn.docswell.com/page/8GEW8LDMJ2.jpg)

HTML5 調査報告 from JPCERT/CC
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 35

![Page Image](https://bcdn.docswell.com/page/W47Z8MGME3.jpg)

参考文献
http://utf-8.jp/
HTML5セキュリティ その1:
基礎編、XSS編
http://utf-8.jp/public/20130613/owasp.pptx
HTML5セキュリティ その2:
オープンリダイレクト、CSRF
http://utf-8.jp/public/20131114/owasp.pptx
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


# Page. 36

![Page Image](https://bcdn.docswell.com/page/KYJ6PNY57V.jpg)

質問タイム
Question ?


# Page. 37

![Page Image](https://bcdn.docswell.com/page/5GJ5K5GGE4.jpg)

Question?
質問
hasegawa@utf-8.jp
hasegawa@netagent.co.jp
@hasegawayosuke
http://utf-8.jp/
OWASP Kansai Local Chapter Meeting #2
#owaspkansai


