Question

Sorry, this looks longer than it probably is but I thought I should include all the information!

I’m using a simple Ajax script to dynamically bring content into a <div> on a page. The first request to load some new content into the div works fine, but if I’ve got an Ajax “back” link within the content which has just loaded, it seems to throw an error.

Even stranger, it works on my office network, but it fails If I’m on a home or VPN network. If it fails, this error pops up in the JavaScript debugger:

Line: 12
Char: 11
Error: Permission Denied
Code: 0
URL: http://www.example.com/about.php

The code really isn’t that complex, it’s just a slightly hacked around version of the stuff on the W3 website, but the fact that the return call is “denied” is confusing me. Would it be something within the server IIS configuration to stop scripting attacks? (Random thought?)

Any help appreciated 😉

First – the Ajax script

var myHttpRequest = false;
if(window.XMLHttpRequest)
     myHttpRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
     myHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
function loadContent(source, content)
{
     if(myHttpRequest)
     {
          var data = document.getElementById(content);
          myHttpRequest.open("GET",source);
            data.innerHTML = '<div class=\"loading_image\"><img src=\"images/loading.gif\" width=\"54px\" height=\"55px\" alt="loading" /></div>';
          myHttpRequest.onreadystatechange = function()
          {
               if(myHttpRequest.readyState==4)
                    data.innerHTML = myHttpRequest.responseText;
                    $('#col2_2_content').supersleight();
          }
          myHttpRequest.send(null);
     }
}

Then this is a truncated example of the page which calls the Ajax content and has the col2_2_content Div where everything gets inserted. The file ajax.js is referenced in the head section.

<div id="col2_2_content">
    <div class="mugshot_container">
        <img src="images/mugshot_dh.jpg" onClick="loadContent('about/dh.php?ajax=yes', 'col2_2_content');"/>
    </div>
</div>

And this is the code from about/dh.php which is inserted via Ajax, along with the PHP formatting to decide what should be returned. (It’s designed to be called directly too – in which case it gets a header/footer wrapped around).

<?php
$home_url = "http://www.example.com/url/";
$content = "
    <p>Some Text</p>
    <p><a onClick=\"loadContent('$home_url/about/about-main.php?ajax=yes',  'col2_2_content');\">Back</a></p>
";
if (isset($_REQUEST['ajax']) ) {
    echo $content;
} else {
    include_once 'about-header.php';
    echo $content;
    include_once 'about-footer.php';
}
?>

Answer 1

You got yourself in cross-domain request situation. AJAX requests basically can be made only to the server that served the page. So if your script page is loaded from http://website.com/url, you can make any call to http://website.com/ but any call to http://url.com would fail.

Having said that, it is possible to call http://s1.example.com from http://s2.example.com if you run document.domain = "example.com".

But if you really need to access data across domains, there’s few ways to do that. Simplest one I know is to use <script> tag to do the query. You can edit your document to add <script> tag with any src you like and browser will go there and fetch the script for you. So if you control http://url.com, you can just make it create a javascript instead of HTML page and this script would be loaded and executed. This method is used to make JSONP work.

Cross-site scripting might work without security issues in the local network because IE doesn’t put that much restrictions in that case. I doubt though it will work in any other browser even in your LAN.