https://shiroyuki2020.hatenablog.com/entry/jsonp_cross_domain

ウェブ開発において、異なるドメイン間のデータ取得は重要ですが、セキュリティ上の制限により難しいです。この課題に対応するためJSONP（JSON with Padding）は、クロスドメインでのデータ取得を可能にする手法として注目されていました。本記事では、JSONPの基本概念から実装例までを説明します。

JSONPとは？

JSONPは「JSON with Padding」の略称で、異なるドメイン（オリジン）からJSONデータを取得するために考案された仕組みです。同一生成元ポリシーという制限を巧妙に回避し、クロスドメイン環境でのデータ取得を可能にします。

JSONPの仕組み

JSONPは、以下のステップで機能します。

クライアント側でコールバック関数を定義する
<script>タグを使用して、他ドメインのJavaScriptを動的に読み込む
サーバからコールバック関数でラップされたJSONデータが返される
ブラウザがスクリプトを実行し、コールバック関数にJSONデータが渡される

JSONPの利点

最大の利点は、クロスドメインでのデータ取得が可能になることです。通常のAjaxリクエストでは、同一生成元ポリシーに阻まれますが、JSONPならこの壁を乗り越えられます。

注意点

ただし、JSONPにも注意点があります。

セキュリティリスク:信頼できないソースからのデータ実行の可能性
GET方式のみ:POSTなど他のHTTPメソッドが使えない
エラーハンドリングの難しさ

代替手段

最近のウェブ開発では、JSONPよりもCORS（Cross-Origin Resource Sharing）の使用が推奨されています。CORSはより安全にクロスドメインリクエストを行えます。

実装例

最後に、簡単なJSONPの実装例を紹介します。

function handleData(data) {
    console.log(data.name);
    console.log(data.age);
}

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleData';
document.body.appendChild(script);

サーバ側のレスポンスの例

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

この方法で、クロスドメインデータ取得が実現できます。

まとめ

JSONPは強力な仕組みですが、セキュリティに注意が必要です。現代のウェブ開発では、CORSの使用を検討するのがベストプラクティスです。プロジェクトに合わせて、適切な方法を選んでください。

以上、JSONPについての説明でした。

ランキング参加中

プログラミング