JSONP(JSON with Padding)

• トップ
• JSONP

• JSONPとは
• 説明

JSONPとは

JSONP (JSON with Padding) は、クロスサイト環境で他のオリジンから JSON データを取得するために考案された仕組みです。

説明

通常、あるオリジン (site-a.example.com) から、他のオリジン (site-b.example.com) で生成された JSON データを読み出そうとしても、同一生成元ポリシー(Same-Origin Policy) により、取得した JSON データへのアクセスは拒否されます。

{ "name": "Yamada", "age": 26 }

<script>
window.addEventListener('load', function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            } else {
                console.log("Can't get");     // status = 0
            }
        }
    }
    xhr.open("POST", "http://site-b.example.com/test.json");
    xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
    xhr.send();
});
</script>

しかし、<script src="..."> では他のオリジンの JavaScript を読み込めることを利用し、site-a が用意したコールバック関数を site-b のスクリプトが呼び出すことで、他オリジンが生成した JSON データを読み出すことを可能としています。裏技の様なものですね。

callback({ "name": "Yamada", "age": 26 });

<script>
var callback = function(json) {
    console.log(json.name);
    console.log(json.age);
}
</script>
<script src="http://site-b.example.com/test.jsonp"></script>

上記では、コールバック関数名に callback という固定の関数名を用いていますが、下記の様にコールバック関数名をパラメータとして渡せるように実装することもできます。

<script src="http://site-b.example.com/test.jsonp?callback=getTestJson"></script>

ただし、JSONP を利用する際はセキュリティ的なリスクが生じます。重要な情報を扱う際は JSONP は使用しないのが鉄則です。詳細は Google で「JSONP 危険」などを検索し、リスクと対策を十分理解した上で利用してください。