速度に影響を与えないために
まずは外部サイト向けのJavaScriptが,
Webページのレンダリングをブロックしないようにする
特別な配慮なく外部JavaScriptを提供すると,
外部JavaScriptの読み込みが遅れた場合,
- 注6)
- JavaScriptと違い画像やiframeであれば,
ロードされた順番で表示されるだけですので, このような心配をする必要はありません。
defer属性やasync属性を活用する
Webページのレンダリングをブロックしないようにする1つ目の戦略は,
scriptタグにdefer属性を付けると,
async属性を付けた場合は,
このように記述することで,
document.write+ 追加のスクリプト
2つ目は,
- ① ブラウザに長期間キャッシュされる,
ローダとなるjsファイル - ② ブラウザにキャッシュさせず,
動的に生成されるjsファイルやiframe
これは広告配信などでよく使われる手法です。①については高速で読み込まれることを保証したうえでdocument.
DOM
- 注7)
- Internet Explorer はver.
4から, Netscape Navigatorはver. 6からDOMに対応しています。
安全に提供するために──セキュリティ編
速度への影響がクリアになったところで,
サンドボックスドメインを使う
外部JavaScriptのすべてが安全かどうか,
外部に起因するJavaScriptを実行するなら,
サンドボックスドメインとログイン情報を持つドメインを切り分けることができれば,
表1 任意のJavaScriptが実行された場合に何が起きるか
実行される場所 | 何が起きるか |
---|---|
サンドボックスドメインの場合 | 悪意のあるサイトへのリダイレクト, |
ログイン情報を持つドメインの場合 | そのドメインで行えるあらゆる操作 |
※ パスワード入力などの本人再確認がない範囲
- 注8)
- 隔離されたドメインのこと。ここでは外部JavaScriptを表示させるためのドメイン。サンドボックス
(sandbox) とは, 外部から受け取ったプログラムを保護された領域で動作させることにより, システムが不正に操作されるのを防ぐセキュリティモデルです。
サンドボックスドメインの例
たとえばlivedoorのサービスであれば,*.livedoor.
は主にlivedoorが提供するコンテンツで,blog.
であれば,
サンドボックスドメインの中では自由にJavaScriptを実行できるため,
サンドボックスドメインを使わない場合
ブログサービスによっては, このケースでは,