信頼できないブログパーツを貼り付けるには？
このように，
もし外部JavaScript利用者がそのドメイン上で認証Cookieを持っている場合や，
しかし広告やアクセス解析などで，
- ① iframeの中に表示させられないかを検討する
- ② 無理であればソースを検証し，
提供元が信用できるか審査したうえで利用する
このポリシーに則って，
HTML5のsandbox属性を使う
HTML5であれば，
iframe内でスクリプトを実行した場合でも，
iframe内のスクリプトが実行可能な処理を制限できるよう，
スクリプトを使わないプレーンなHTMLでお知らせなどを配信したい場合，
JSONPの外部APIを安全に使うために
JSONP
JSONPはscriptタグの追加によって外部から提供されるJavaScriptを直接実行するしくみになっています。そのため，
JSONPのAPIをサンドボックス内で呼び出す
JSONPのAPIは，
しかし現状，
サンドボックスドメイン上では任意のJavaScriptコードが実行される可能性もありますが，
具体的な実装方法を解説します。ここではiframeをサンドボックスとして使います。iframeを埋め込むのがリスト1の親フレームです。ここで，
図1 サンドボックスを使わない場合のJSONP API
図2 サンドボックスを使う場合のJSONP API
リスト1 jsonp.
<!DOCTYPE html>
<html>
<head>
<title>JSONP with sandbox</title>
</head>
<body>
<iframe src="http://sandbox.example.com/jsonp_sandbox.html"
id="jsonp_sandbox" style="display:none"></iframe>
<script>
var sandbox_domain = "http://sandbox.example.com";
var request_id = 0;
var callbacks = { };
window.addEventListener("message", function(event){
if (event.origin !== sandbox_domain) return;
var data = JSON.parse(event.data);
callbacks[data.request_id] &&
callbacks[data.request_id] (data.response);
delete callbacks[data.request_id];
});
function JSONPRequest(url, callback) {
var jsonp = document.getElementById("jsonp_sandbox").content Window;
callbacks[request_id] = callback;
var request = {
url: url,
request_id: request_id++
};
jsonp.postMessage(JSON.stringify(request), "*");
}
function dump_jsonp(){
var url = document.getElementById("url").value;
JSONPRequest(url, function(res){
document.getElementById("result").value =
JSON.stringify(res);
})
}
</script>
URL <input type="text" value="" id="url" size="80">
<button onclick="dump_jsonp()">GO</button><br>
<textarea style="width:100%; height:100px" id="result">
</textarea>
</body>
</html>
リスト2 jsonp_
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>
window.onmessage = function(event){
var data = JSON.parse(event.data);
var request_id = data.request_id;
delete data.request_id;
data.dataType = "JSONP";
data.success = function(res, status){
var message = {
request_id: request_id,
response: res
};
event.source.postMessage(JSON.stringify(message), "*")
};
$.ajax(data);
};
</script>
</head>
<body></body>
</html>
これはあくまで，
これは簡略化したサンプルですので，
- 注9）
- 対応しているブラウザはInternet Explorer 8以上，
Firefox 3以上などです。