Question

I have this file uploader inside an iframe, but when I embed it to another website it doesn’t allow me, Firebug displays this error:

Permission denied for <http://www.mywebsite.com> to get property Window.document from <http://www.myotherwebsite.com>.

Which comes to this line:

$('iframe', top.document).css('border', '1px green solid'); 

I’m trying to style the iframe with a border once the upload has completed.

I saw other questions, the solution is to make a server-side proxy and I don’t know how to make a proxy for it to work and allow the jQuery the execute.

Cheers.

Bounty added.

Answer 1

A server-side proxy may help you overcome this problem. While a browser can only make an AJAX call to it’s server using the same domain, a server itself can make a call to any other server without restriction.

Let’s say you need to make an AJAX request to Yahoo’s Weather API. Since you cannot make a request from http://www.example.com to http://www.yahoo.com because of the same domain policy, the workaround is to make a call first to your server, and then have your server make the request to Yahoo. Below is an example of a proxy that does just that:

REQUEST: http://www.example.com/weather.php?zip=97015

<? // Yahoo Weather proxy

$zip_code = $_REQUEST["zip"];

// default to Portland, OR for testing
if($zip_code == null || $zip_code == '')
    $zip_code = "97206";

// delegate request to the other server, circumventing the same-domain policy.
$request = "http://weather.yahooapis.com/forecastrss?p=".$zip_code;

$response = file_get_contents($request);

// Retrieve HTTP status code
list($version,$status_code,$msg) = explode(' ',$http_response_header[0], 3);


// Check the HTTP Status code
switch($status_code) {
    case 200:
            // Success
            break;
    case 503:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 503. That means: Service unavailable. An internal problem prevented us from returning data to you.');
            break;
    case 403:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 403. That means: Forbidden. You do not have permission to access this resource, or are over your rate limit.');
            break;
    case 400:
            // You may want to fall through here and read the specific XML error
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 400. That means:  Bad request. The parameters passed to the service did not match as expected. The exact error is returned in the XML response.');
            break;
    default:
            die('Your call to Yahoo Web Services returned an unexpected HTTP status of:' . $status_code);
}


echo $response;
?>

Now, in your case, you want to style the iframe when the file is done uploading. A simple solution would be to poll the parent document’s server and have the proxy poll your upload server until the file is found. Once the file is found, the response can be used to invoke the JQuery code that changes the iframe styling.

In order for the proxy concept to work, each website that you embed the uploader into will need to have it’s own same-domain proxy deployed that will check your upload site for the existence of the file and then return that response back to the client.

The parent document will also somehow need to know the name of the file being uploaded. Because of the same domain policy, you may not be able to determine the filename, which presents a challenge when using the proxy to check for the existence of the file. How do you know what you’re checking for?