JSONP

トップ > アラカルト > JSONP

JSONPとは

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

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

test.json
{ "name": "Yamada", "age": 26 }
HTML
<script>
window.onload = 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 データを読み出すことを可能としています。裏技の様なものですね。

site-b: test.jsonp
callback({ "name": "Yamada", "age": 26 });
site-a: HTML
<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 という固定の関数名を用いていますが、下記の様にコールバック関数名をパラメータとして渡せるように実装することもできます。

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

Copyright (C) 2018 杜甫々
初版:2018年12月30日 最終更新:2018年12月30日
http://www.tohoho-web.com/ex/jsonp.html