Hatena Blog Tags
はてなブログ トップ
JSONP
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

JSONP

(コンピュータ)
【じぇいそんぴー】

JSON with paddingの略

Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。
一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。


ただし、Same-Originポリシーが存在しないため、機密情報をAPIに含める際には十分な注意が必要である。


はてなでもJSONPによるデータ取得用APIを公開している。
http://d.hatena.ne.jp/hatenastar/20070908/1189212476

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
ぼちぼちクラウド•3ヶ月前

【読書記録】Webを支える技術　第4部

第4部の構成 HTML 見出しや段落などの構造を定義した文書フォーマット microformats HTMLに比べ、WebAPIをプログラム用に別途用意する必要がない、メンテナンス性などの面ですぐれている Atom ブログだけでなく検索エンジンなどさまざまなWebサービスのWebAPIとして利用可能 Atom Publishing Protocol(AtomPub) Atomはデータフォーマットの規定であるのに対し、AtomPubはAtomを利用したリソース編集(CRUD操作)プロトコル ブログや検索データベースには向いているが、リアルタイム性が重要なAPI、データの階層構造が重要なAPIなど…

#webを支える技術#HTML#JSON#JSONP

関連ブログ

元Webデザイナー兼コーダーの備忘録•2年前

【JavaScript】JSONデータの読み込み

外部サイトでJSONデータをJSONPとして公開している場合、そのデータを読み込んで利用することができます。 今回は、JSONデータの読み込みについて書きます。まず、ローカルフォルダにデータを用意して、それを読み込んでみます。次に、外部サイトにあるデータを読み込んでみます。その他に、JSONデータの整形とセキュリティリスクについて簡単に書いています。 JSON(JavaScript Object Notation) JSONP(JSON with padding) ローカルのJSONデータの読み込み 外部のJSONデータの読み込み JSONデータの整形 JSON.stringify() con…

#JSON#JSONP#コールバック関数
元Webデザイナー兼コーダーの備忘録•2年前

【mustache入門:JS版】データを別ファイル(JSONP)にして読み込む

レンダー部分でデータを指定しているところがあります。そこを外部ファイルとして読み込むように変更します。ここでは、データをJSONPファイルとして用意します。 作成するファイル JSONPでデータを読み込む まとめ 参考サイト 作成するファイル HTMLファイル:index.html JavaScriptファイル:render.js JSONPファイル(データファイル):data.jsonp ファイルをそれぞれ以下のように作成します。 <!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"…

#mustache#JavaScript#JSON#JSONP
エンターテイメント！！•25日前

【翻訳＋意訳・要約】ウェブ開発者のためのクロスオリジンリソース共有（CORS）の理解

※本記事は、ChatGPTによる意訳+翻訳を活用し、レイアウト調整したものです。 ※感想は、オリジナルです。 原文 意訳+要約 ウェブ開発者のためのクロスオリジンリソース共有（CORS）の理解 ChatGPTへのQA Ｑ：具体的に、どういう場合にCORSが発生するのでしょうか？ Ｑ：プロキシサーバを立ててCORSを回避するのは、適切なのでしょうか？ Ｑ：サーバーが外部サーバーで管理外の場合、プロキシくらいしか対策がない気がしますが、他にどのような対策がありますか？ 感想＋雑記 原文 Understanding Cross-Origin Resource Sharing (CORS) for W…

ts0818のブログ•2ヶ月前

jQuery 4.xで遂にIE 10以前のサポートを終了するそうな。Ajaxについても整理してみる

www.publickey1.jp ⇧ 何と言うか、コストの観点からしたら、オンプレミスで構築した方がよい場合もあるからして、全てをクラウドありきで考えられても困るんだが... 特に円安、クラウドサービスの値上げ、とかある中で、本当にクラウドの方が低コストと言えるのか甚だ疑問なんだが... Microsoftなんかは、 news.microsoft.com 日本マイクロソフト株式会社は、2024 年 4 月 1 日から、法人向けソフトウエアおよびクラウドサービスの価格を改定します。新価格は、日本円の為替変動に伴い、いずれも 20% の引き上げとなり、2024 年 4 月以降に適用されます。 h…

rhanda | 元銀行員Web系エンジニアの日記•2ヶ月前

『Web API The Good Parts』読みました

Web API: The Good Parts作者:水野 貴明オライリージャパンAmazon 構成 1章 Web APIとは何か 2章 エンドポイントの設計とリクエストの形式 3章 レスポンスデータの設計 4章 HTTPの仕様を最大限利用する 5章 設計変更をしやすいWeb APIを作る 6章 堅牢なWeb APIを作る 感想 基礎的な用語から解説がなされていたので、1つずつ理解しながら読み進められてよかったです。 TwitterやGitHubなど、世のサービスはどうなっているかが例に挙げられていて、面白みを感じながら読み進めることができました。 また「なぜデファクトスタンダードに寄せるのが良…

Python転職初心者向けエンジニアリングブログ•3ヶ月前

PHP 連携: よくあるミスとエラー解消方法

PHP 連携: よくあるミスとエラー解消方法 PHPとの連携はウェブ開発において一般的であり、様々なプロジェクトで使用されています。しかし、PHPとの連携においては、よくあるミスやエラーが発生することがあります。本記事では、PHPとの連携時に起こりがちな問題とその解決策について、具体的なコード例を交えて詳しく解説します。 1. エラーの原因の特定 PHPとの連携において発生するエラーは様々ですが、まずはエラーの原因を特定することが重要です。以下によくあるエラーの例を挙げ、それに対する解決策を述べていきます。 1.1. CORS(Cross-Origin Resource Sharing) エラ…

Python転職初心者向けエンジニアリングブログ•3ヶ月前

junko​.com: よくあるミスとエラー解消方法

junko​.com: よくあるミスとエラー解消方法 1. はじめに Web開発において、特定のドメインやサイトに関連するよくあるミスやエラーがあります。本記事では、junko.comという仮想のドメインを例に取りながら、そのよくある問題とその解消方法について具体的なコード例とともに解説します。これにより、Web開発においてよりスムーズなトラブルシューティングが可能になります。 2. よくあるミスとエラー 2.1. SSL/TLS証明書の期限切れ 問題: junko.comにアクセスすると、SSL/TLS証明書に関するエラーが表示される。 解決策: SSL/TLS証明書が期限切れになると、安全…

The light of hope to the other side of the tunnel - Kotsu Kotsu To -•3ヶ月前

$350 XSS in 15 minutes から学ぶ

ソース： infosecwriteups.com 脆弱性：XSS 訳： 特定のエンドポイントには、 Reflected XSS インジェクションに対して脆弱なname パラメータがあって。 example.com/profile?name=<img+src=1+onerror=alert(1337)> バイパスの検索を開始し、Chrome デベロッパー ツールの検索機能を使用してこのエンドポイントを検索しました /profileすべての JS ファイルで別の脆弱なパラメータを確認しましたが、別のエンドポイントが見つかりました。 example.com/services 私の頭に浮かんだ最初のア…

DebugIto's diary•7ヶ月前

また久々にHaskellでプログラムを書いて学んだこと

ここ最近、ある程度の規模のHaskellプログラムを書いた。またしてもOAuth2関連のWebアプリだが、OpenID Connectクライアント(relying party)と独立したAuthorization serverの2つのロールを兼ねる。 ここでは、今回プログラムを書いて学んだ雑多ことを書き留めておく。 reqについて 以前と同様、HTTP clientとしてreqを使った。HTTP clientはOpenID Connectのrelying partyを実装する際に必要となる。 以前にも書いたが、reqは本当に独特なライブラリだ。特にリクエスト先エンドポイントのschemeを型レ…

CLOVER🍀•7ヶ月前

WildFly Quickstarts

WildFlyの新しい機能を使う時などは、機能追加時のブログなどをよく見ていたのですが、Quickstartsを見た方が良さそうだなと 思ったのでメモ。 ドキュメントでは、ここで紹介されています。 ここで見ているのは、WildFly 29のドキュメントです。今まで、ここまで下の欄をあまり見ていませんでした…。 Quickstartsには多数のサンプルが含まれていて、GitHubリポジトリーはこちらです。 GitHub - wildfly/quickstart: Holds all versioned WildFly quickstarts WildFly 29.0.1.Finalの時点だと、こ…

ソニックの部屋•7ヶ月前

REST APIまとめ

気になった用語をまとめた Webサービスの基本 WebAPIとは、HTTPなどのインターネット関連技術を利用してプログラムが読み書きしやすい形でメッセージ送受信を行えるよう定義した規約、または規約を実装して展開されるサービスのこと リクエストの中でCRUDに相当するメソッド（POST、GET、PUT、DELETE）が重要 メソッド 意味 GET リソースの取得 POST リソースの新規登録(データ作成時にリソース名が決まっていない、決まっていればPUTになる) PUT リソースの更新 DELETE リソースの削除 冪等(べきとう)とは何度実行しても同じ状態が再現されること データ登録（POST…

KEITA LOG•9ヶ月前

REST APIについて整理する

REST APIについて学んだので整理しておきます。 前提となるWebの知識 REST APIを理解するために必要なWebの知識を整理しておく。 Web Webとは、HTML文書を閲覧するためのシステム。 HTMLの他にも画像や動画ファイルなども閲覧でき、それらをまとめたコンテンツが置かれているのがWebサーバーで、Webサーバーに対してコンテンツを要求し閲覧するためのソフトウェアがWebブラウザ。 クライアント・サーバー Webブラウザがクライアントにあたり、Webサーバーがその名の通りサーバーにあたる。Webのシステムはこの2つのソフトウェアがインターネット上でやりとりすることで成り立つ。…

エムスリーテックブログ•10ヶ月前

セキュリティヘッダ警察です！既に包囲されている！観念してヘッダを挿入しなさい！

【セキュリティチームブログリレー2回目】 こんにちは。エンジニアリンググループの山本です。 セキュリティチームは、エンジニアリンググループ全体のセキュリティを向上させるためのバーチャルチームなのですが、各プロダクト開発チームのサービスをチェックして、協力しながら全体のセキュリティを向上させていくのがミッションです。 そのお仕事の一環として「この部分、セキュリティヘッダが足りないから入れてください！」というやりとりを日常的に行なっています。 今日はこの「セキュリティヘッダ」というものが一体何なのか、今さら人に聞けないアレコレを取りまとめてみたいと思います。 セキュリティヘッダ警察の日常の図(もち…