Grow your CSS skills. Land your dream job.

Last updated on:

Cross Domain GET Forwarding

When you do an AJAX request on a website, the URL you request from needs to reside on the same domain as where the request was made from. This is a security restriction imposed by the browser. There is a way to sneak around this by using a bit of a "man in the middle" approach.

PHP, being a server-side language, has the ability to pull content from any URL. So a PHP file can become the man in the middle. The contents of the PHP file can be set up to accept a URL as a parameter and then return the contents of that URL.

<?php

    echo file_get_contents($_GET['url']);
    // WARNING: You REALLY should write something to whitelist or otherwise limit what the function will accept, or it could be a security danger to your server (people could read any file).

?>

With that in place, we can do an AJAX request directly to that URL, passing it the URL we actually want the data from as a parameter. See how we are passing "http://google.com" as data below.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
    $(function() {
       $.ajax({
            type: "GET",
            dataType: 'html',
            data: 'url=http://google.com',
            url: 'get.php',
            success: function(data){
                // Yah! Do something cool with data
            },
            error: function(){
                // Boo! Handle the error.
            }
        }); 
    });
</script>

This is an extremely simple example. If you are interested in a more robust version, check out the Simple PHP Proxy.

Comments

  1. Fine, until someone exploits it to read any file on your hard drive and find loopholes pretty quickly.

    This is a major flaw, and this snippet should be removed.

  2. Joram

    James Padolsey made a cool Cross Domain AJAX Mod for jQuery. It uses YQL, which allows us to make cross domain GET Requests.

    http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".