HTML5 レベル2 過去問まとめ(セキュリティモデル)

オリジン

オリジン
　URLの内、「スキーム://ホスト名:ポート番号」まで

同一オリジンポリシー
　　webページから異なるオリジン(クロスオリジン)のリソースに
　　アクセスできないようにすること

クロスオリジン
　　http://www.knowledge.com/kw/inde.html
       から、
　　http://www.test.com/
    　へアクセスすること


リクエスト元のオリジンを表すヘッダ
　　Originヘッダ

注意:
Locationヘッダ　　リダイレクト先のURLを表すレスポンスヘッダ
Serverヘッダ　　　Webサーバのソフト名を表すヘッダ

同一オリジンの例

最初からポート番号まで同じなら同一オリジン

http://www.knowledgewing.com/

↓

http://www.knowledgewing.com/kw/index.html
http://www.knowledgewing.com//kw/?p=flm

同一オリジンとみなさない例

下記のように、
・ポート番号が異なる
・http から https なる
場合は同一オリジンとみなさない

http://www.knowledgewing.com/




↓
http://www.knowledgewing.com:8000/
https://www.knowledgewing.com/

CORSリクエスト(Cross-Origin Resource Sharing)

現在のオリジンと違うオリジンのリソースにアクセスする権限を取得する仕組み

Access-Control-Allow-Originヘッダなどを使う


HTTP通信ではセキュリティの関係上、クロスオリジンリクエストは許可されてない
->　XMLHttpRequestを用いてころなるドメインからリソースを
　　取得できない
-> そこで、Access-Control-Allow-Originヘッダなどを用いる

主なCORS関連のヘッダ

Access-Control-Request-Method
　　リクエストで使用するリクエストメソッドを
　　サーバに通知するリクエストヘッダ


Access-Control-Request-Headers
　　リクエストで使用するヘッダをサーバに通知するリクエストヘッダ


Access-Control-Allow-Origin
　　必須
　　アクセスを許可するオリジンを指定するレスポンスヘッダ
　　「*」の場合、全てのオリジンからのアクセスを許可する


Access-Control-Allow-Methods
　　許可するリクエストメソッドを指定するレスポンスヘッダ


Access-Control-Allow-Headers
　　リクエストで使用できるヘッダを指定するレスポンスヘッダ

Access-Control-Allow-Origin

・アクセスを許可するオリジンを指定するレスポンスヘッダ

・webサーバ側でアクセスを許可するオリジンを指定して、
　クライアントにレスポンスする

・Access-Control-Allow-Originヘッダで許可されていないオリジンからリクエストがあった場合、同一オリジンポリシー違反でアクセスを拒否される


注意: リクエストごとにアクセス許可を与えるのは、
Access-Control-Allow-Methodsが行う

プリフライトリクエスト

・メインとなるリクエストを開始する前に、OPTIONSリクエストメソッドを使用して、通信しても安全かどうか調査するリクエスト

・HTTPS通信でも発生する

・プリフライトリクエストは、PUT、DELETEメソッドのリクエストのみ
　発生する
・GETやPOSTでのリクエストでは発生しない

ブラウザのセキュリティモデル

Service Workers
　　HTTPS通信のみで動作するAPI 
　　セキュリティ面を考慮されている

Geolocation API
　　位置情報はプライバシーにもかかわるので、
　　ブラウザによってはHTTPS通信のみで動作する制限がある

注意:
以下はHTTPS通信でなくても動く
　　WebSocket
　　XMLHttpRequest
　　Server-Sent Events
　　DeviceOrientation Event

Secure ContextsとMixed Content

Secure Contexts
　　・HTTPSなどの暗号化された通信を介して、安全に提供されている
　　　コンテンツの事

　　・SSL/TLSによる暗号化が必要
　　・Geolocation APIやService WorkersはSecure Contextsでのみ使用可能

Mixed Content
　　HTTPS通信でwebページを公開しても、webページ内で
　　暗号化されていない通信(HTTP通信)を行っていること

Secure Contextsの例

HTTPS通信を行っているもの

・webページ内のiframe要素のsrc属性で、HTTPS通信をしている
・webページ内でXMLHttpRequestによるHTTPS通信をしている

Mixed Contentの例

HTTP通信を行っているもの

・img要素のsrc属性でHTTP通信でコンテンツを取得している
・iframe要素のsrc属性でHTTP通信をしてコンテンツを取得している
・script要素のsrc属性でHTTP通信をしてコンテンツを取得している

JavaScriptでSecure Contextsか判断する例

isSecureContext を使う

if( window.isSecureContext) {
    var data = localStorage.getItem('data');
}