12 jsonp
Upcoming SlideShare
Loading in...5
×
 

12 jsonp

on

  • 799 views

 

Statistics

Views

Total Views
799
Views on SlideShare
799
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

12 jsonp 12 jsonp Presentation Transcript

  • CROSS-DOMAIN AJAXWITH JSONPThe unofficially official kludge that defeatssame-origin policy
  • Pop quiz …•  How do you get jQuery into your project?•  Other JavaScript/jQuery libraries?•  Is this legal?<img src="http://otherSite.com/images/usher.jpg" />!
  • The same origin policy keeps JavaScriptfrom becoming an XSS monster
  • For security, we cant have any oldweb page changing data from any oldweb service•  The same-origin policy is built into browsers to prevent that.
  • "Same-origin" means same protocol, domain, and port•  From the W3C•  Say you have a page at http://www.tic.com and try to run a service on … URL Outcome Reasonhttp://www.tic.com/dir2/other Successhttp://www.tic.com/dir/inner/another Successhttps://www.tic.com/secure Failure Different protocolhttp://www.tic.com:81/dir/etc Failure Different porthttp://service.tic.com/dir/other Failure Different host
  • But some So how do theyweb servers provide the data when the browsersWANT to wont allow it?provide JSONdata to othersites andJavaScript.
  • You cant run scripts but you candownload resources from a foreign webserver So heres the trick … download a "script" from the site hosting the web service that "happens" to have data in it Extract the returned data – voila!
  • We can process JSONP responses with$.getJSON()•  JSON with Padding•  If the server is set up to respond with JSONP, youre good to go•  The $.getJSON() request gets the script and unwraps it, leaving the raw JSON data.•  Sound kludgey to you?
  • What is the padding?•  Can be anything as long as it looks like an executable JavaScript call. •  Wrap the response in a function call •  Set a variable •  Whatever you want it to be, really. :-)•  The JSONP standard proposed isfunctionName({JSONDataGoesHere});!
  • Lets do this with Flickr
  • Conclusion•  Browsers are written to forbid cross-domain scripting•  To bypass that, servers can write their scripts to handle JSONP requests•  We can make JSONP requests on the client-side with $.getJSON()
  • Lab•  Flickr tutorial – pp. 383 – 387•  Google maps tutorial – pp. 397 - 400