Wikipedia

「JSONP」の版間の差分

履歴の双方向閲覧
削除された内容 追加された内容
ビジュアルウィキテキスト
←新しいページ: ''''JSONP'''（'''JSON with padding'''）とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。[[HT...'
 
m 外部リンクの修正 http:// -> https:// (gihyo.jp) (Botによる編集)
 
(24人の利用者による、間の34版が非表示)
1行目:
{{Infobox file format
'''JSONP'''（'''JSON with padding'''）とは、scriptタグを使用して[[クロスドメイン]]なデータを取得する仕組みのことである。[[HTML]]のscriptタグ、[[JavaScript]]（関数）、JSONを組み合わせて実現される。▼
| icon = [[File:JSONP logo.png]]
| mime = application/json-p
| extension = .jsonp
| genre = Data interchange
| extended from = [[JavaScript Object Notation|JSON]]、[[JavaScript]]
| url = {{URL|http://www.json-p.org/}}<br />(リンク切れ，アーカイブ[https://web.archive.org/web/20160304044218/http://www.json-p.org/ web archive])
}}
▲'''JSONP'''（ ('''JSON with padding'''）) とは、scriptタグを使用して[[同一生成元ポリシー|クロスドメイン]]な（異なるドメインに存在する）データを取得する仕組みのことである。[[HyperText Markup Language|HTML]]のscriptタグ、[[JavaScript]]（関数）、[[JavaScript Object Notation|JSON]]を組み合わせて実現される。
 
クロスドメインな通信を実現する方法としては、後に{{仮リンク|オリジン間リソース共有|en|Cross-origin resource sharing}} (CORS)も開発され、JSON-Pに代わる選択肢となっている。
[[ブラウザ]]などに実装されている「[[同一生成元ポリシー]]」という制約により、
[[Webページ]]は通常、自分を生成した[[ドメイン]]以外のドメインのサーバと通信することはできない。▼
しかし、[[HTML]]のscriptタグのsrc属性には別ドメインの[[URL]]を指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。▼
 
== 仕組 ==
JSONPでは、通常、上記src属性のレスポンスの内容は[[javascript]]関数呼び出しの形式となるため、src属性に指定するURLにその関数の名前をクエリ文字列の形式で付加する。一般的な方法では、この時に指定する関数名はWebページ側ですでに定義されている[[コールバック]]用の関数の名前になる。▼
▲[[Webウェブブラウザ]]などに実装されている「[[同一生成元ポリシー]]」という制約により、[[ウェブページ]]は通常、自分を生成した[[ドメイン名|ドメイン]]以外のドメインの[[サーバ]]と通信することはできない。
▲しかし、[[HTML]]のscriptタグのsrc属性には別ドメインの[[Uniform Resource Locator|URL]]を指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。
 
▲JSONPでは、通常、上記src属性のレスポンスの内容は[[javascriptJavaScript]]関数呼び出しの形式となるため、<code>src</code>属性に指定する[[Uniform Resource Locator|URL]]にその関数の名前をクエリ[[文字列]]の形式で付加する。一般的な方法では、この時に指定する関数名はWebウェブページ側ですでに定義されている[[コールバック (情報工学)|コールバック]]用の関数の名前になる。
関数名を渡すリクエストパラメータの名前はサーバとクライアント間で事前に取り決めておく必要がある。<br/>▼
例えば（callbackというパラメータ名でparseResponseという関数名を渡す場合）▼
 
▲関数名を渡すリクエストパラメータの名前はサーバとクライアント間で事前に取り決めておく必要がある。<br />
<source lang="javascript">▼
▲例えば（callback（<code>callback</code>というパラメータ名で<code>parseResponse</code>という関数名を渡す場合）
 
▲<sourcesyntaxhighlight lang="javascript">
<script type='text/javascript'
src='http://another.domain.example.com/getjson?callback=parseResponse'>
</syntaxhighlight>
</source>
 
通常は、上記[[リクエスト]]の[[レスポンス]]として、[[JSON]]形式の[[データ]]を[[引数]]とする[[サブルーチン|関数]]の[[呼び出し]]文が返される。
この関数の呼び出し文がブラウザにより解釈・実行されることで、データの受信完了の検知と[[コールバック (情報工学)|コールバック]]処理が可能になっている。
上記の例では、<code>parseResponse</code>という関数の呼び出し文が返される。
 
<sourcesyntaxhighlight lang="javascript">
parseResponse({"Name":"Smith","Rank":7})
</syntaxhighlight>
</source>
 
== 注意点 ==
JSONPでは、[[CSRFクロスサイトリクエストフォージェリ]]（cross（{{Lang-en-short|cross-site request forgery）forgery}}、CSRF）に対する脆弱性に注意が必要である。▼
このscriptタグを使う方法では同一生成元ポリシーが適用されず、またサーバのエンドポイントは外部に公開されているため、悪意のあるサイトが自分のページにscriptタグを埋め込み、別のサイトのJSONデータを取得するといったことが可能である。このためとから、機密情報や個人情報などのデータを取り扱うには不適切向きである。▼
また、scriptタグを埋め込む側においてはも、リモートサイトはから任意の内容のデータをページに差し込むことが可能であるため、そのリモートサイトが悪意のあるサイトである場合やJavaScriptインジェクションに対する脆弱性がある場合は、その脆弱性を突かれることで、アカウント情報を盗まれたり、元のサイトも影響を受けたりする可能性がある。▼
 
データを提供するサーバ側では、[[リクエスト]]の正当性を検証するのが適切である。▼
但し、[[クッキーHTTP cookie|Cookie]]だけを使用した検証は、CSRFに対して脆弱であるため、不十分である。▼
 
[[Dojo Toolkit]]、[[Google Web Toolkit]]などの[[ライブラリ]]でJSONPがサポートされている。▼
 
== 関連項目 ==
▲JSONPでは、[[CSRF]]（cross-site request forgery）に対する脆弱性に注意が必要である。
* [[同一生成元ポリシー]]
▲このscriptタグを使う方法では同一生成元ポリシーが適用されず、またサーバのエンドポイントは外部に公開されているため、悪意のあるサイトが自分のページにscriptタグを埋め込み、別のサイトのJSONデータを取得するといったことが可能である。このため、機密情報や個人情報などのデータを取り扱うには不適切である。
* [[クロスサイトリクエストフォージェリ]] (CSRF)
▲また、scriptタグを埋め込む側においては、リモートサイトは任意の内容のデータをページに差し込むことが可能であるため、そのリモートサイトが悪意のあるサイトである場合やJavaScriptインジェクションに対する脆弱性がある場合は、その脆弱性を突かれることで、アカウント情報を盗まれたり、元のサイトも影響を受けたりする可能性がある。
 
== 外部リンク ==
▲データを提供するサーバ側では、[[リクエスト]]の正当性を検証するのが適切である。
* [https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011 gihyo.jp - これでできる！ クロスブラウザJavaScript入門 第11回 JSONP入門]
▲但し、[[クッキー]]だけを使用した検証は、CSRFに対して脆弱であるため、不十分である。
 
{{JavaScript}}
 
[[Category:ウェブ技術]]
▲[[Dojo Toolkit]]、[[Google Web Toolkit]]などのライブラリでJSONPがサポートされている。
[[Category:JavaScript]]
[[Category:JSON|P]]
[[Category:ソフトウェアアーキテクチャ]]
{{Internet-stub}}
{{Software-stub}}
「https://ja.wikipedia.org/wiki/JSONP」から取得