Seadragon Ajax and cross-site scripting

November 25, 2008

When loading Deep Zoom Images with the Seadragon Ajax Library, you have to be aware of the browser’s cross-site scripting security restrictions. There are three main options:

1. Host the DZI on the same domain as your page

A DZI consists of an XML file (with either the .xml or .dzi extension) and a folder full of image files (typically jpgs or pngs), e.g. foo.xml and foo_files. Make sure to upload the complete set, maintaining the folder structure.

Most web servers don’t know what a .dzi is, so make sure to use the .xml extension. Alternatively, you can add “application/xml” as a MIME type for .dzi (if you can modify your server settings).

2. Manually pull the XML out of the DZI and pass it directly into Seadragon.Viewer.openDzi()

See the Seadragon.Viewer reference for more info. This is the technique we used for the Seadragon Ajax Gallery. This is also how the Seadragon Ajax Embed works.

3. Put a proxy on your server

This way your page is making an in-domain request, and your server, which does not have cross-site scripting restrictions, grabs the information from the external domain. Let Seadragon Ajax know about the proxy with Seadragon.Config.proxyUrl.

Here’s an example proxy script, in PHP:

header('Content-Type: text/xml');
$url = $_GET['url'];
if(strpos($url, 'http') === 0) // exclude local files
  $data = file_get_contents($url);
  echo $data;

It should be similar for other languages.



  1. Right on. It’s worth noting the importance of using Seadragon.Config.proxyUrl if you end up going with option 3. You don’t want to do something like this:


    Because then, Seadragon Ajax will go through the proxy for each of the tile images also, e.g.:

    <img src=”proxy.php?url=http://example.com/image_files/8/0_0.jpg” />

    This is inefficient and unnecessary; you don’t need a proxy to get images on a different domain. So when you set Seadragon.Config.proxyUrl, the proxy is only used for XML requests.

    So a better way of doing the above example:

    Seadragon.Config.proxyUrl = “proxy.php?url=”;


  2. You can use this:
    viewer.openDzi(xmlUrl, xmlString);
    and read the xmlString using Ajax JSONP

    ref: http://www.seadragon.com/ajax/0.8/doc/Seadragon.Viewer.html

  3. So Seadragon Ajax can be used in a PHP site?

  4. Yes, Seadragon Ajax works fine with PHP… it doesn’t matter what your server is written with.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: