JSONPを使ってJavaScriptだけでマッシュアップ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!地図の開発を担当しています前田博敏です。 今回は、JavaScriptから外部サイトのWeb APIを直接呼び出すことができる、JSONPという手法について紹介させていださきます。 JSONPとは JSONPとは、JavaScriptの外部ファイル読み込み（「script」タグとその「src」指定）を利用して、ドメインの異なる外部サイトのデータを読み込む手法のことを言います。 JSONPを利用するには、呼び出される側のWeb APIがJSONP形式に対応している必要があります。 Yahoo!デベロッパーネットワークでは、現在のところローカルサーチAPIとショッピングAPIが、JSONP形式に対応しています。
第3回 JSONPでのクロスドメインアクセス | gihyo.jp
JSONPの動作原理 前回はAjaxに存在するセキュリティモデルであるSame-Originポリシーを紹介し、そのSame-Originポリシーを迂回する方法とセキュリティについて見てきました。また、回避する方法の1つめとしてリバースProxyを用いた方法を紹介しました。リバースProxyを用いた方法ではセキュリティ的な問題点もありましたが、そもそもProxyサーバを用意しなければならないため、この方法は手軽に使うことはできませんでした。 そこで考え出されたのがJSONP（JavaScript Object Notation with Padding）という方法です。 それではまず簡単にJSONPについて説明します。 Ajaxで使われるXMLHttpRequestオブジェクトには前回説明したとおりSame-Originポリシーがありクロスドメインアクセスはできません。一方、SCRIPTタグ
はじめてのJSONPプログラミング
前回の「ブログの☆の総数を取得できるAPIを組み込みました」では、はじめてJSONPを使ってみました。以下、実際にJSONPを使ってみての覚え書きと、これからJSONPプログラミングをはじめる方へのTIPSです。 ブログの☆の総数を取得できるAPIは、はてなスターに登録されたブログの情報を取得できるJSON形式とJSONP形式で提供されているAPIでした。 はてなスター日記 - ブログの☆の総数を取得できるAPIを追加しました JSONとは、JavaScriptにおけるオブジェクトの表記法をほぼそのまま利用したデータフォーマットのことで、JSONPはJSONにちょっと記述を加えて、クロスドメインのJSONデータを非同期で読み込ませて処理するための手法のことです。（詳しい定義については、自分で調べてみてください） 通常、Webブラウザでは他ドメインのJavaScriptのデータを読み込んで実
［気になる］JSONPの守り方
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます （編集部） JSONPだって、セキュリティを気にしてほしい 皆さんこんにちは、はせがわようすけです。今回は、JSONPを使用する場合のセキュリティについて解説しましょう。 JSONPとは、JSON with Paddingの名称が示しているとおり、JSON形式のデータにコールバック関数の呼び出しのためのコードを付加することで、クロスドメインでデータの受け渡しを実現するためのデータ形式です。JavaScriptからクロスドメインでのデータが簡単に扱えることなどを理由に、多数のWebアプリケーションでAPIの一部としてJSONP形式でデータの提供が行われています。 具体的な例を見
[鏡] 入門 JSON 3 -- JSONP とコールバック関数 -- 戯れ言
最近 JSONP というのが話題になっているようですので， ここで簡単に紹介します。 JSONP （JSON with Padding）というのは JSON のデータフォーマットにちょっとした記述を加えて JavaScript の関数として呼び出せるようにしたものです。 JSONP については以下の記事に簡単な説明があります。（多分この記事が初出だろうという話です） Remote JSON - JSONP 例えば以下のような JSON データがあるとします。 { "name" : "Yasuhiro ARAKAWA" } JSONP ではこのデータに記述を加えて JavaScript 関数のようにしたものです。 分かりにくいですね。 具体的にはこのように記述します。 callback( { "name" : "Yasuhiro ARAKAWA" } ); "callback" の部分は関数
![[鏡] 入門 JSON 3 -- JSONP とコールバック関数 -- 戯れ言](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9403aeb9e428539e1bdb60550747807cd52d387/height=288;version=1;width=512/https%3A%2F%2Fbaldanders.info%2Fimages%2Fattention%2Fremark.jpg)
JSONとJSONPの違い - あと味
解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは？ 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは？ JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと？となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。（WebAPI等） また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.adamrocker.com/blog/102/javascript_simplest_jsonp.html