A Lame and Generic JS Proxy

I'm not sure what to call this. "LameProxy" maybe? Or simply: "poor design." In this post I will attempt to circumvent the browser restrictions imposed by the same origin policy.

The Problem

I suspect anyone who has attempted to learn or work with ajax and the various Javascript frameworks out there have come across this problem. CROSS-DOMAIN calls is a big NO-NO. Or at least it's a restricted out-of-the-box.

To understand the problem, I recommend the following JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls, specially the tidbit about Why you need a Proxy.

For the lazy folks out there, the modern web-browser blocks XHR, XMLHTTPRequest Calls, or simply ajax calls to any other server than the one that generated the web-page. Thus, if I create a web-site SanAngelesTimes.com I will not be able to pull data from WhoDatDer.com using standard JS, Prototype, Dojo, or JQuery (or so I believe).

You can however get around this by developing or using a proxy. For instance, I can write a proxy on SanAngelesTimes.com that I can access via JS. This proxy could then fetch data from another site and return it in some form I find useful. However, for every site that you manage you will also have to write a proxy for it.

A Lame Solution!

Now I expect to get some heat from this because XSS vulnerabilities are a big issue -- but I am too naive to realize it. You can use the <script text="text/javascript" src="some_cross_domain_js"></script> tags to pull javascript from another server right? A very common solution to this issue is providing JSON objects that users can pull with the script tags.

However, what if I just want to pull simple HTML that's exposed via a URI. How do I display that off-site HTML on my web-page? How do I pull data from another domain that doesn't expose its data as JSON?

Well folks, you can try out Yurlp's Proxy (but I wouldn't recommend it for anything REAL yet).

Here's a very very simple guide on how to use it:

Fetch the HTML from another domain and display it

<script text="text/javascript" src="http://js.yurlp.com/_proxy/html/SOME-URL"></script>

For example:
<script text="text/javascript" src="http://js.yurlp.com/_proxy/html/http://www.goer.org/HTML/examples/simple.html"></script>

Will write the contents of that web-page where the tags were placed.

Fetch data from a URL and return it as a JSON object
<script text="text/javascript" src="http://js.yurlp.com/_proxy/json/A_VARIABLE_NAME/SOME-URL"></script>

And in this example:
<script text="text/javascript" src="http://js.yurlp.com/_proxy/json/remotetext/http://www.goer.org/HTML/examples/simple.html"></script>

Will return a javascript String variable named remotetext that is set to the value returned by the remote site.

Fetch data from a URL and pass it to a method, a callback
<script text="text/javascript" src="http://js.yurlp.com/_proxy/callback/A_METHOD_NAME/SOME-URL"></script>

Let's "alert" (a standard JS method) the contents of a remote site:
<script text="text/javascript" src="http://js.yurlp.com/_proxy/callback/alert/http://www.goer.org/HTML/examples/simple.html"></script>

You could develop your own method to process the data string returned from the script.