JavaScript Tips | セキュリティ：JSONPを安全に扱う

JSONPを安全に扱うことは「外部サイトからの“任意コード実行”を制御するための重要な防御技術」です

JSONP（JSON with Padding）は、古いブラウザやCORSが使えない環境で 別ドメインのAPIからデータを取得するための仕組みとしてよく使われてきました。

仕組みはシンプルです。

• <script>タグは、別ドメインのJavaScriptを読み込める
• そのJavaScriptの中で callback({...}) のようにJSONを渡す
• 自分のページ側で callback 関数を定義しておけば、データを受け取れる

しかし、ここで重要なのは、 「JSONPは“データ”ではなく“コード”として読み込まれる」 という点です。

つまり、JSONPを扱うということは、 外部サイトのJavaScriptコードをそのまま実行する ということでもあり、セキュリティ的には非常に慎重な設計が求められます。

ここから、初心者向けにステップバイステップで解説していきます。

JSONPの基本的な動き方を理解する（まずはイメージから）

典型的なJSONPの呼び出し例

外部APIが次のようなレスポンスを返すとします。

callback({
  user: "Alice",
  age: 20
});

callback({
  user: "Alice",
  age: 20
});

クライアント側では、次のようにしてデータを受け取ります。

<script>
  function callback(data) {
    console.log("受け取ったデータ:", data);
  }
</script>

<script src="https://api.example.com/user?callback=callback"></script>

<script src="..."> で読み込まれた外部コードが callback({...}) を実行し、 自分のページ側の callback 関数が呼ばれる、という流れです。

ここで重要なのは、 「外部APIのレスポンスは、JSONではなくJavaScriptコード」 だということです。

JSONPが危険になりうるポイントを整理する

JSONPが危険になる理由は、次のような点にあります。

1. 外部サイトのコードがそのまま実行される
   • データだけでなく、任意のJavaScriptが実行可能
2. レスポンス内容を完全には制御できない
   • API側が攻撃者に乗っ取られた場合、悪意あるコードが返される
3. <script>タグはCSPやXSSの観点で強力な権限を持つ
   • DOM操作、Cookieアクセス、ネットワーク通信など何でもできる

つまり、JSONPは 「外部サイトに自分のページのJavaScript権限を渡す」 くらいの危険度を持つ仕組みだと理解しておく必要があります。