Difference between revisions of "JSONp"

From BC$ MobileTV Wiki
Jump to: navigation, search
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
'''JSON''' with '''P'''adding (commonly abbreviated ''JSONP'') is a '''JSON''' extension wherein a prefix is specified as an input argument of the call itself. This padding prefix is typically the name of a callback function, but may also be a variable assignment, an if statement, or any other Javascript statement prefix. The original proposition appears to have been made in the MacPython blog in 2005 [17] and is now used by many Web 2.0 applications such as Dojo Toolkit Applications, Google Toolkit Applications[18] and Web Services. Further extensions of this protocol have been proposed by considering additional input arguments as, for example, is the case of JSONPP<ref>Almeida, Jonas (June 11, 2008). "JSON, JSONP, JSONPP?". S3DB: http://sites.google.com/a/s3db.org/s3db/documentation/mis/json-jsonp-jsonpp. Retrieved April 26, 2009.</ref> supported by S3DB web services.
+
'''JSON''' with '''P'''adding (commonly abbreviated ''JSONP'') is a [[JSON]] extension wherein a prefix is specified as an input argument of the call itself. This padding prefix is typically the name of a callback function, but may also be a variable assignment, an if statement, or any other Javascript statement prefix. The original proposition appears to have been made in the MacPython blog in 2005 [17] and is now used by many Web 2.0 applications such as Dojo Toolkit Applications, Google Toolkit Applications[18] and Web Services. Further extensions of this protocol have been proposed by considering additional input arguments as, for example, is the case of JSONPP<ref>Almeida, Jonas (June 11, 2008). "JSON, JSONP, JSONPP?". S3DB: http://sites.google.com/a/s3db.org/s3db/documentation/mis/json-jsonp-jsonpp. Retrieved April 26, 2009.</ref> supported by S3DB web services.
  
 
Because JSONP makes use of script tags, calls are essentially open to the world. For that reason, JSONP may be inappropriate to carry sensitive data.[20]
 
Because JSONP makes use of script tags, calls are essentially open to the world. For that reason, JSONP may be inappropriate to carry sensitive data.[20]
Line 7: Line 7:
  
  
== Examples ==
+
== EXAMPLES ==
  
 
=== BC$ MobileTV ===
 
=== BC$ MobileTV ===
Line 14: Line 14:
 
  http://bcmoney-mobiletv.com/1744/oembed/json
 
  http://bcmoney-mobiletv.com/1744/oembed/json
 
oEmbed - special JSONp endpoint (direct):
 
oEmbed - special JSONp endpoint (direct):
  http://bcmoney-mobiletv.com/api/oembed/oembed_writer.php?v=1744&format=json&callback=displayResults
+
  http://bcmoney-mobiletv.com/1744/oembed/json&callback=displayResults
 
+
  
 
=== YouTube ===
 
=== YouTube ===
Line 24: Line 23:
 
* (Interactive test tool) Understanding the YouTube API's JSON-C responses: http://code.google.com/apis/youtube/articles/view_youtube_jsonc_responses.html
 
* (Interactive test tool) Understanding the YouTube API's JSON-C responses: http://code.google.com/apis/youtube/articles/view_youtube_jsonc_responses.html
 
* YouTube JavaScript Player API Reference: http://code.google.com/apis/youtube/js_api_reference.html
 
* YouTube JavaScript Player API Reference: http://code.google.com/apis/youtube/js_api_reference.html
 
 
  
 
=== Flickr ===
 
=== Flickr ===
Line 31: Line 28:
 
* '''Flickr image widget (via JSONp): http://bcmoney-mobiletv.com/widgets/flickr/'''
 
* '''Flickr image widget (via JSONp): http://bcmoney-mobiletv.com/widgets/flickr/'''
 
* Flickr AJAX API integration (photo/photoset search): http://kylerush.net/javascript/tutorial-flickr-api-javascript-jquery-ajax-json-build-detailed-photo-wall/
 
* Flickr AJAX API integration (photo/photoset search): http://kylerush.net/javascript/tutorial-flickr-api-javascript-jquery-ajax-json-build-detailed-photo-wall/
 
 
  
 
=== Last.fm ===
 
=== Last.fm ===
Line 40: Line 35:
 
* Last.fm JSON/JSONp Web Service Extensions: http://lastfm-api-ext.appspot.com/docs/
 
* Last.fm JSON/JSONp Web Service Extensions: http://lastfm-api-ext.appspot.com/docs/
 
* Last.FM - Recent Tracks widget (using jQuery and JSONp): http://wordpress.org/extend/plugins/lastfm-recent-tracks-widget/
 
* Last.FM - Recent Tracks widget (using jQuery and JSONp): http://wordpress.org/extend/plugins/lastfm-recent-tracks-widget/
 
 
  
 
=== Twitter ===
 
=== Twitter ===
Line 48: Line 41:
 
* Twitter JSON/JSONP API URL: http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html
 
* Twitter JSON/JSONP API URL: http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html
 
* Creating a live Twitter status update with YQL and JavaScript: http://www.bukisa.com/articles/206910_creating-a-live-twitter-status-update-with-yql-and-javascript
 
* Creating a live Twitter status update with YQL and JavaScript: http://www.bukisa.com/articles/206910_creating-a-live-twitter-status-update-with-yql-and-javascript
 
  
 
=== Facebook ===
 
=== Facebook ===
Line 57: Line 49:
 
* New Facebook Javascript API: http://blog.toppingdesign.com/2010/04/26/new-facebook-javascript-api/
 
* New Facebook Javascript API: http://blog.toppingdesign.com/2010/04/26/new-facebook-javascript-api/
 
* JavaScript-Based Authentication: http://developers.facebook.com/docs/authentication/javascript<ref>Facebook Connect JavaScript SDK: http://github.com/facebook/connect-js</ref><ref>Facebook JavaScript Client Library: http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library</ref><ref>Old JavaScript SDK: http://developers.facebook.com/docs/reference/oldjavascript/</ref><ref>Building a Better Photo Uploader (with JSONp): http://www.facebook.com/note.php?note_id=178492968919</ref>
 
* JavaScript-Based Authentication: http://developers.facebook.com/docs/authentication/javascript<ref>Facebook Connect JavaScript SDK: http://github.com/facebook/connect-js</ref><ref>Facebook JavaScript Client Library: http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library</ref><ref>Old JavaScript SDK: http://developers.facebook.com/docs/reference/oldjavascript/</ref><ref>Building a Better Photo Uploader (with JSONp): http://www.facebook.com/note.php?note_id=178492968919</ref>
 
  
 
=== Yahoo ===
 
=== Yahoo ===
Line 66: Line 57:
 
* YQL console: http://developer.yahoo.com/yql/console/
 
* YQL console: http://developer.yahoo.com/yql/console/
 
<ref>Cross-domain communications with JSONP, Part 1 -- Combine JSONP and jQuery to quickly build powerful mashups: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp1/index.html</ref><ref>Cross-domain communications with JSONP, Part 2 -- Building mashups with JSONP, jQuery, and Yahoo! Query Language: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp2/index.html</ref><ref>YQL and JSONP-X (aka. json-p-x, jsonpx, json-px): http://paul.donnelly.org/2009/07/08/yql-and-jsonp-x/</ref><ref>Mashups with JSONP, jQuery and YQL: http://projects.ischool.washington.edu/tabrooks/343INFOAutumn09/JSONP/jsonpJqueryYQL.htm</ref>
 
<ref>Cross-domain communications with JSONP, Part 1 -- Combine JSONP and jQuery to quickly build powerful mashups: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp1/index.html</ref><ref>Cross-domain communications with JSONP, Part 2 -- Building mashups with JSONP, jQuery, and Yahoo! Query Language: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp2/index.html</ref><ref>YQL and JSONP-X (aka. json-p-x, jsonpx, json-px): http://paul.donnelly.org/2009/07/08/yql-and-jsonp-x/</ref><ref>Mashups with JSONP, jQuery and YQL: http://projects.ischool.washington.edu/tabrooks/343INFOAutumn09/JSONP/jsonpJqueryYQL.htm</ref>
 
  
 
=== Google ===
 
=== Google ===
  
 
* '''Google web search widget (via JSONp): http://bcmoney-mobiletv.com/google/'''
 
* '''Google web search widget (via JSONp): http://bcmoney-mobiletv.com/google/'''
* Google Search AJAX API: http://code.google.com/apis/ajaxsearch/
+
* Google Search AJAX API: http://code.google.com/apis/websearch/ (formerly http://code.google.com/apis/ajaxsearch/)
 
* Google Feed API — Now with instant gratification: http://googleajaxsearchapi.blogspot.com/2010/05/google-feed-api-now-with-instant.html
 
* Google Feed API — Now with instant gratification: http://googleajaxsearchapi.blogspot.com/2010/05/google-feed-api-now-with-instant.html
 
 
  
 
=== Wikipedia ===
 
=== Wikipedia ===
Line 80: Line 68:
 
* '''Wikipedia encyclopedia article search widget (via YUI + JSONp): http://bcmoney-mobiletv.com/widgets/wikipedia/'''
 
* '''Wikipedia encyclopedia article search widget (via YUI + JSONp): http://bcmoney-mobiletv.com/widgets/wikipedia/'''
 
* MediaWiki API docs: http://en.wikipedia.org/w/api.php
 
* MediaWiki API docs: http://en.wikipedia.org/w/api.php
 +
  
  
Line 86: Line 75:
  
 
* '''JSONPify''' - a simple way to access feeds and web services from a client based web application: http://jsonpify.com/
 
* '''JSONPify''' - a simple way to access feeds and web services from a client based web application: http://jsonpify.com/
 +
 +
 +
== Resources ==
 +
 +
* JSON-P: http://json-p.org
 +
* Security risks with JSONP?: https://security.stackexchange.com/questions/23438/security-risks-with-jsonp/23439#23439
 +
  
 
== Tutorials ==
 
== Tutorials ==
  
* Cross-domain communications with JSONP, Part 2: Building mashups with JSONP, jQuery, and Yahoo! Query Language: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp2/
+
* JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript: http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html
 +
* Remote JSON - JSONP: http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
 
* Making Media API Calls with Dynamic Script Tags (JSONp): http://support.brightcove.com/en/docs/making-media-api-calls-dynamic-script-tags
 
* Making Media API Calls with Dynamic Script Tags (JSONp): http://support.brightcove.com/en/docs/making-media-api-calls-dynamic-script-tags
 +
* Cross-domain communications with JSONP, Part 2: Building mashups with JSONP, jQuery, and Yahoo! Query Language: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp2/
 +
* How to access cross-domain data with AJAX using JSONP, jQuery and PHP: http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/
 +
* Cross Domain JSONP  (Json with padding) with Jquery and Java Servlet or JAX-WS : http://reddymails.blogspot.ca/2012/05/solving-cross-domain-problem-using.html
 +
* Mixing extJS/JSON front-end & Java Spring/JDBC back-end: http://netbeans.dzone.com/articles/mixing-extjs-json-p-and-java
 +
* Getting Started with JSON-P: http://java.dzone.com/articles/getting-started-json-p-0?mz=62823-enterprise-integration
  
  
Line 105: Line 107:
 
* Mocking Facebook Connect Javascript API: http://www.ajaxlines.com/ajax/stuff/article/mocking_facebook_connect_javascript_api.php
 
* Mocking Facebook Connect Javascript API: http://www.ajaxlines.com/ajax/stuff/article/mocking_facebook_connect_javascript_api.php
 
* '''MEGAUPLOADから簡単にダウンロード (download MegaUpload videos easily): http://hail2u.net/blog/coding/fast-megaupload.html'''
 
* '''MEGAUPLOADから簡単にダウンロード (download MegaUpload videos easily): http://hail2u.net/blog/coding/fast-megaupload.html'''
 
+
* Block script/CSS/plug-in loads that are over http, and occur within https pages, aka "mixed content errors": https://bugs.chromium.org/p/chromium/issues/detail?id=81637 (prevents calling regular HTTP endpoints for JSONP from a HTTPS site and vice-versa)
  
  
Line 111: Line 113:
  
 
<references />
 
<references />
 
 
  
 
== See Also ==
 
== See Also ==
  
[[JSON]] | [[AJAX]] | [[jQuery]] | [[JavaScript]] | [[XSS]]
+
[[JSON]] | [[AJAX]] | [[jQuery]] | [[JavaScript]] | [[XSS]] | [[CORS]]

Latest revision as of 15:33, 26 September 2018

JSON with Padding (commonly abbreviated JSONP) is a JSON extension wherein a prefix is specified as an input argument of the call itself. This padding prefix is typically the name of a callback function, but may also be a variable assignment, an if statement, or any other Javascript statement prefix. The original proposition appears to have been made in the MacPython blog in 2005 [17] and is now used by many Web 2.0 applications such as Dojo Toolkit Applications, Google Toolkit Applications[18] and Web Services. Further extensions of this protocol have been proposed by considering additional input arguments as, for example, is the case of JSONPP[1] supported by S3DB web services.

Because JSONP makes use of script tags, calls are essentially open to the world. For that reason, JSONP may be inappropriate to carry sensitive data.[20]

Including script tags from remote sites allows the remote sites to inject any content into a website. If the remote sites have vulnerabilities that allow JavaScript injection, the original site can also be affected.[2]


EXAMPLES

BC$ MobileTV

oEmbed - JSON endpoint:

http://bcmoney-mobiletv.com/1744/oembed/json

oEmbed - special JSONp endpoint (direct):

http://bcmoney-mobiletv.com/1744/oembed/json&callback=displayResults

YouTube

Flickr

Last.fm

Twitter

Facebook

Yahoo

[7][8][9][10]

Google

Wikipedia



Tools

  • JSONPify - a simple way to access feeds and web services from a client based web application: http://jsonpify.com/


Resources


Tutorials


External Links


References

  1. Almeida, Jonas (June 11, 2008). "JSON, JSONP, JSONPP?". S3DB: http://sites.google.com/a/s3db.org/s3db/documentation/mis/json-jsonp-jsonpp. Retrieved April 26, 2009.
  2. wikipedia: JSONP#JSONP
  3. Facebook Connect JavaScript SDK: http://github.com/facebook/connect-js
  4. Facebook JavaScript Client Library: http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library
  5. Old JavaScript SDK: http://developers.facebook.com/docs/reference/oldjavascript/
  6. Building a Better Photo Uploader (with JSONp): http://www.facebook.com/note.php?note_id=178492968919
  7. Cross-domain communications with JSONP, Part 1 -- Combine JSONP and jQuery to quickly build powerful mashups: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp1/index.html
  8. Cross-domain communications with JSONP, Part 2 -- Building mashups with JSONP, jQuery, and Yahoo! Query Language: http://www.ibm.com/developerworks/web/library/wa-aj-jsonp2/index.html
  9. YQL and JSONP-X (aka. json-p-x, jsonpx, json-px): http://paul.donnelly.org/2009/07/08/yql-and-jsonp-x/
  10. Mashups with JSONP, jQuery and YQL: http://projects.ischool.washington.edu/tabrooks/343INFOAutumn09/JSONP/jsonpJqueryYQL.htm

See Also

JSON | AJAX | jQuery | JavaScript | XSS | CORS