Seadragon Ajax and cross-site scripting
November 25, 2008When 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.
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:
viewer.openDzi(“proxy.php?url=http://example.com/image.dzi”);
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=”;
viewer.openDzi(“http://example.com/image.dzi”);
=)
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
So Seadragon Ajax can be used in a PHP site?
Yes, Seadragon Ajax works fine with PHP… it doesn’t matter what your server is written with.