Using Script tags to do remote HTTP calls in Javascript

I’ve been racking my brains all afternoon trying to find a workable solution to the problem of not being able to make remote HTTP calls using javascript. This is an issue for me because so much of my work takes place inside a TiddlyWiki which, when viewed locally (from a file:// url) is a perfect environment for bypassing standard AJAX security and creating mashups. The problem comes when I want to put a TiddlyWiki online to show off what I’ve done or to let other people use it – the local behaviour is not replicated and my mashups go kaput.

There are several ways of getting around this security restriction, known as Javascript’s same-origin policy, but they generally involve using iframes and other files on your own server. I wanted to keep everything in one self-contained file, so I pretty much ruled these out. The idea of using a local proxy was thrown out for the same reasons.

A found a some info that covered “dynamic Script tags”, which requires the remote server to serve you a tailored javascript file that called a function you supplied the name of, with the data you wanted returned as a parameter to that function, but that was really just a facade on top of another proxy story.

Then I hit upon this wonderful website, which gave an insight into an API architecture being adapted by, amongst others, Yahoo!. The idea revolves around the API itself returning JSON encapsulated in a function call, so the body of the response is essentially the parameter to the function. You add a Script tag to your page with the API call as the src attribute and when the browser loads the script, it ends up calling the function, which you write support for in your code.

// adapted from http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload=scriptLoaded;
newScript.src = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=sunset&format=json';
headID.appendChild(newScript);

jsonFlickrFeed = function(feed) {
   // deal with the feed!
};

// when the script is finished, remove the script node we added
// removeNode is a custom function defined in the TiddlyWiki source code: http://svn.tiddlywiki.org/Trunk/core/js/Dom.js
// It ensures that the eventhandler is removed before deletion
scriptLoaded = function() {
	removeNode(newScript);
};

It’s simple, elegant and easy to work with. There are two alternative implementations that I’ve seen today: the first and simplest for the server to support, is exemplified by Flickr – the function call wrapped around the response data is fixed and you have to know what it is to write support for it [edit - they do support the next method too]; Yahoo! Pipes (and more generally, Yahoo!’s other developer API’s) supports the second method – the API takes the name of a callback function as a parameter and then wraps the data in a call to this function, which takes away the dependency on knowing the specific function to write support for.

This isn’t the perfect solution, as it leaves you wide open to exploitation from cross-site scripting, so I don’t recommend using this with API’s that you don’t trust. I feel pretty safe using Yahoo!’s API’s, but someone less salubrious could inject whatever they wanted in there. You don’t really want that when the script has access to the global object and, therefore, everything on your page.

This takes me one step closer to making it easier to replicate your offline TiddlyWiki environment online… Hurrah…

About these ads

52 Comments

  1. Posted September 17, 2007 at 6:49 pm | Permalink

    The only problem I encountered with dynamic insertion of script tags was a lack of support in Safari. At least that was v2, I don’t know if they’ve fixed/changed that in the v3 betas. I suppose I ought to investigate/try it out.

    The JSON sent back in a call back function is nifty – a guy wrote a version of my flickr dom badge using that.

  2. Posted September 18, 2007 at 9:37 am | Permalink

    Hey, that’s cool. I’m really interested in how you did the funky 3D view of your code in the title bar.

  3. Posted September 18, 2007 at 10:45 am | Permalink

    The 3D view is a simple “screw around with a text block in Fireworks with the skew tool”. I can throw up the source png somewhere if you want to have a look at it.

  4. Posted September 18, 2007 at 12:10 pm | Permalink

    Jon, suggest checking out the JSONP convention as well. One of the issues with JSON is that a JSON response alone is useless – the third party’s Javascript has to do something with it at the end, like call a callback method.

  5. Posted September 18, 2007 at 5:33 pm | Permalink

    Cheers Patrick, that’d be interesting. I’m no Fireworks expert, so I thought you’d done some wicked image manipulation programmatically… although technically I guess you did.

  6. Posted September 18, 2007 at 5:37 pm | Permalink

    Michael, ok, that’s pretty interesting… what does JSONP let you do that wouldn’t be enabled by the JSON returning a custom callback function?

  7. i wasn't at your persc%nto presentation
    Posted September 21, 2007 at 10:33 am | Permalink

    can i flag up a major tech post of the month here?

    surely there must be someway of deploying directly from your local server on a lightweight system like jetty. of course I have little experience with JS and have just blasted through it first time… at least my first point is valid!

  8. Posted September 24, 2007 at 1:36 pm | Permalink

    Thanks! Ok, so I’m not with you yet – Jetty’s a Java-based web server, right? What are you referring to when you say “deploying directly from your local server”? The problem I’m trying to solve here is the restriction on javascript running in a browser…

  9. Luis
    Posted November 13, 2007 at 9:59 am | Permalink

    Hey, As the first guy said, current KHTML browsers lack of execution in the script tag, and depends on your page statistics this is requirement (5%).

    So, doesn’t this finally mean that I have to setup a proxy and make a simple XHR call?

  10. Posted June 2, 2009 at 12:02 pm | Permalink

    I just read your post on Appjet closing. There is an app I wrote on appjet that does JavaScript remoting for any webpage.

    http://json-proxy.appjet.net/

    For example, if you want to get google.com:

    So callback() would receive google.com’s html as a string.

    Too bad it won’t be up for long.

  11. Posted October 18, 2013 at 8:57 pm | Permalink

    After winning the 2006 UEFA Champions League with Barcelona, he took over as the
    first Mexican to win the honour, something Mexican legend Hugo Snchez was not able
    to do while playing for Real Madrid. It is actually up to you,
    and whether or not you can learn to regulate your emotions and inner conflicts before you
    run out of money. Their own sides have fielded some from the greatest titles within footballing background, produced arguably the greatest group of in history in South america 1970 in addition to given football fans one with the
    2 finest players ever to elegance the football stage.

  12. Posted October 18, 2013 at 9:34 pm | Permalink

    Wow! After all I got a webpage from where I know how to in fact take helpful
    facts concerning my study and knowledge.

  13. Posted October 24, 2013 at 7:30 pm | Permalink

    It’s remarkable to pay a visit this website and reading the views
    of all mates concerning this article, while I am also zealous of getting know-how.

  14. Posted October 30, 2013 at 12:38 pm | Permalink

    Had so much trouble with our last SEO company, been reading up on it in my
    spare time and next time we will employ temp staff to do
    it
    Do you participate in any discussion boards

  15. Posted November 7, 2013 at 6:23 am | Permalink

    Your style is sso unique compared tto ofher people I’ve read stuff from.
    Thank you for posting when you have the opportunity, Guess I will just
    bookmark this blog.

  16. Posted November 12, 2013 at 12:18 pm | Permalink

    Hurrah! Finally I got a web site from where I can genuinely get helpful facts
    regarding my study and knowledge.

  17. Posted November 25, 2013 at 10:02 am | Permalink

    Greetings, I do think your blog might be having internet browser compatibility problems.
    When I take a look at your blog in Safari, it looks fine however, when opening in IE,
    it’s got some overlapping issues. I just wanted to
    provide you with a quick heads up! Apart from that, great blog!

  18. Posted December 7, 2013 at 1:23 am | Permalink

    I know this if off topic but I’m looking into starting my own weblog and was wondering what all is required to
    get setup? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% certain.
    Any suggestions or advice would be greatly appreciated.

    Cheers
    Bringing many new functions, we are satisfied to current to you the new and up-to-date clash of clans hack!
    You will be in a position to do numerous diverse things to a
    specified extent.

    With this hack, you will be in a position to get as many Gems,
    Methods and Poins that you need for the sport! Does it audio also hard?
    Effectively its not! This new and up to date Clash Of clans hack will do
    it immediately, with no you having to do any much more operate than a click on of a button!

    Ideal element about this hack, is that you dont need to have a Jailbroken system!
    It is as simple as connecting the system and clicking a button!

    There is no far better support than ours on the internet!
    We have the swiftest and most secute servers.

    Special Attributes:
    -Acquire all gems
    -Supports any gadget
    -No jailbroken gadget required
    -Undetected

  19. Posted December 10, 2013 at 6:12 pm | Permalink

    Your mode of telling the whole thing in this paragraph is in fact fastidious,
    all can easily be aware of it, Thanks a lot.

  20. Posted December 11, 2013 at 5:45 am | Permalink

    Hello there! This post could not be written any
    better! Reading through this post reminds me of my previous
    room mate! He always kept talking about this.
    I will forward this page to him. Fairly certain he will have a good read.
    Thanks for sharing!

  21. Posted December 11, 2013 at 5:45 am | Permalink

    Simply desire to say your article is as surprising.
    The clearness in your post is simply cool and i can
    assume you are an expert on this subject. Fine with your permission let me
    to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please continue the enjoyable work.

  22. Posted December 14, 2013 at 1:36 pm | Permalink

    Świat biologii sprawdziany do pobrania gimnazjum

  23. Posted December 17, 2013 at 3:14 am | Permalink

    This post will assist thе internet viewers for
    setting uρ new webpage оr even a blog frоm start to еnd.

  24. Posted December 19, 2013 at 2:36 am | Permalink

    An intriguing discussion is definitely worth comment.

    I think that you need to publish more on this topic, it might not be a taboo matter but typically folks don’t discuss
    these issues. To the next! Kind regards!!

  25. Posted December 20, 2013 at 7:03 am | Permalink

    I love to disseminate understanding that I have
    built up with the 12 months to help improve team functionality.

  26. Posted December 24, 2013 at 2:47 am | Permalink

    Hey just wanted to give you a quick heads up and let you
    know a few of the images aren’t loading properly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different internet browsers and both show the same results.

  27. Posted December 24, 2013 at 3:43 am | Permalink

    Excellent happy synthetic vision to get fine detail and may anticipate troubles
    before they happen.

  28. Posted January 6, 2014 at 3:41 am | Permalink

    I used to be suggested this blog by way of my cousin. I’m now not positive whether
    or not this publish is written by way of him as nobody else realize such particular about my difficulty.
    You are amazing! Thank you!

  29. Posted January 6, 2014 at 9:17 pm | Permalink

    And even allies further afield are wary: the United States, so if they’re
    able to reach the statute book. The previous Labour leadership which was in awe of Thatcher bears part
    of the Great Hollande Moving Right Show. Ahead of the david cameron publication of Cabinet Secretary
    Sir Gus O’Donnell’s probe into Mr Werritty and Dr Fox,
    50, telephoned Mr Cameron at Downing Street. And
    I would never have around me david cameron those who sneered
    or thought otherwise.

  30. Posted January 7, 2014 at 7:59 am | Permalink

    I needed to thank you for this wonderful read!! I absolutely loved every
    little bit of it. I have you book marked to look at new things you post…

  31. Posted January 13, 2014 at 6:57 pm | Permalink

    hey there and thank you for your info – I have certainly picked
    up anything new from right here. I did however expertise a few technical issues using this website,
    since I experienced to reload the web site many times previous to I could get it to load
    properly. I had been wondering if your web hosting is OK? Not that I’m complaining, but slow loading instances times will very
    frequently affect your placement in google and could damage your quality score if advertising and marketing with Adwords.
    Anyway I am adding this RSS to my e-mail and could look out for
    much more of your respective exciting content. Ensure that you update
    this again soon.

  32. google plus adwords
    Posted January 13, 2014 at 8:40 pm | Permalink

    That is very interesting, You are an excessively skilled blogger.

    I’ve joined your rss feed and sit up for looking for extra of your magnificent post.
    Additionally, I have shared your web site in my social networks

  33. Posted January 14, 2014 at 4:51 pm | Permalink

    I’m impressed, I have to admit. Rarely do I encounter a blog that’s both equally educative and amusing,
    and let me tell you, you have hit the nail on the head.

    The issue is something which not enough men and women are speaking intelligently about.

    Now i’m very happy I stumbled across this in my
    hunt for something concerning this.

  34. Posted January 14, 2014 at 4:58 pm | Permalink

    Good post. I learn something new and challenging on
    sites I stumbleupon every day. It’s always useful to read content from other writers and practice a little something from their websites.

  35. Posted January 14, 2014 at 5:02 pm | Permalink

    I’m gone to convey my little brother, that he should also go to see this website on
    regular basis to get updated from most up-to-date reports.

  36. Posted January 14, 2014 at 5:12 pm | Permalink

    It’s a shame you don’t have a donate button! I’d most certainly donate to this excellent
    blog! I suppose for now i’ll settle for bookmarking and adding
    your RSS feed to my Google account. I look forward to
    new updates and will talk about this website with my Facebook group.

    Talk soon!

  37. Posted January 14, 2014 at 5:17 pm | Permalink

    This website truly has all the information I needed about this subject and didn’t
    know who to ask.

  38. Posted January 20, 2014 at 3:13 pm | Permalink

    I love what you guys tend to be up too. This type of clever work and reporting!
    Keep up the very good works guys I’ve incorporated you guys to blogroll.

  39. Posted February 5, 2014 at 10:52 am | Permalink

    At times they might give you around 50gp but they will also provide you a big
    bone which you may sell off to others who want to get their prayer up.

    Pros:With affiliate marketing you don’t need your own product, so there are no product creation
    costs, or time spent doing so. Even when all the variables are
    right, some people just won’t buy from you (maybe not today).

  40. Posted February 5, 2014 at 10:11 pm | Permalink

    Wow, marvelous blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of your site
    is magnificent, as well as the content!

  41. Posted February 8, 2014 at 1:12 pm | Permalink

    I was suggested tgis website by my cousin. I’m not sure whether this post
    is written by himm as no one else know sujch degailed
    about my difficulty. You’re amazing! Thanks!

  42. Posted February 11, 2014 at 4:29 am | Permalink

    Good day! This is my first comment here so I just wanted to give a quick shout out and tell you I genuinely
    enjoy reading through your posts. Can you suggest any other blogs/websites/forums that deal with the same subjects?
    Many thanks!

  43. Posted February 25, 2014 at 11:04 am | Permalink

    Hello to every one, it’s actually a pleasant for
    me to go to see this site, it consists of valuable Information.

  44. Posted February 28, 2014 at 8:06 pm | Permalink

    Terrific write up! For beginners, slot machine winning happens to be
    an art and it takes a great deal of time and effort to understand it.
    Everything you had written above is useful and is super useful for many like me.
    Great study and shared on social media with my friends!

  45. Posted February 28, 2014 at 10:36 pm | Permalink

    Hi, after reading this amazing post i am too delighted to
    share my experience here with mates.

  46. Posted March 12, 2014 at 12:15 am | Permalink

    Hi Dear, are you truly visiting this site regularly, if so after that you will definitely get nice knowledge.

  47. Posted March 14, 2014 at 4:48 pm | Permalink

    Right away I am going to do my breakfast, when having my breakfast coming over again to read additional news.

  48. Posted March 29, 2014 at 11:04 am | Permalink

    This piece of writing will assist the internet people for setting up new
    website or even a blog from start to end.

  49. Posted April 1, 2014 at 5:46 am | Permalink

    You actually revealed it very well!

  50. Posted April 14, 2014 at 11:16 pm | Permalink

    I do not drop a great deal of remarks, however i did a few searching and wound up here Using Script tags to do remote HTTP calls in Javascript Jay by
    Jay Fresh. And I actually do have a couple of questions for you if it’s allright.
    Is it just me or does it look like some of these comments look as if they are written by brain dead people? :-P And, if you are posting at other online
    sites, I’d like to follow anything fresh you have to post.
    Would you list of the complete urls of all your social sites like your linkedin profile, Facebook page or twitter feed?

  51. Posted April 16, 2014 at 7:03 pm | Permalink

    I quite like reading through an article that
    will make people think. Also, thank you for permitting me to comment!

  52. Posted April 18, 2014 at 12:21 pm | Permalink

    I visited many web sites however the audio feature for
    audio songs current at this web pag is genuinely excellent.


2 Trackbacks/Pingbacks

  1. Google gadgets

    So I’ve been messing around with various different widget frameworks on and off over the last few months as preparation for a workshop I’m going to be involved with. I started out with Yahoo Widgets (née Konfabulator) mainly because the ex…

  2. [...] reasons. JSONP is a convention between the client and the server to bypass this restriction using script tag injection. More explanation here. It is this convention that allows us to call Yahoo Pipes directly from [...]

Post a Comment

Required fields are marked *
*
*

Follow

Get every new post delivered to your Inbox.