How do I get around Cross-domain scripting issues when using the HTML5 WebViewer

[kk...@pdftron.com]

Q: My WebViewer is hosted on a different server/domain as my xod document files. 

How can I get around the cross-domain scripting errors when using the HTML5 WebViewer? (CORS? JSONP?)

--------

A: To get around the cross-domain issue, there are a couple of things you can do.

1. Use iframes to prevent cross-domain requests

-Host your xod documents and the WebViewer on the same host. (Since the WebViewer is making requests to a resource on the same server, no cross-domain issue here)

-Your application will use the WebViewer in an iframe.

*This is the technique that our Cloud API uses: our server generates a URL to a hosted web document, users can then embed the URL in their own web page in an iframe.

2. Enable CORS support on your storage server

-configure your storage server to support CORS (http://enable-cors.org/)

-The WebViewer uses CORS by default when the xod files are hosted on a different domain. You do not need to make any changes to or configure the WebViewer.

EDIT: Amazon S3 now supports CORS! http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

EDIT2: If you are using Amazon CloudFront, see the following instruction to set up CORS. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors

3. Using your application server as a proxy

-Host the WebViewer on your application server, and fetch the XOD data from the same server

-your application server would relay the requested data from the storage server to the client

-this way means extra bandwidth used on your server.

As for JSONP... Our WebViewer uses byte range requests to fetch parts from XOD file when needed. This allows us to display the document immediately (without waiting for the whole XOD document to be downloaded). Using JSONP as is would require the whole file to be downloaded before it can be displayed, therefore, we do not support it.

[ch...@cwfent.com]

This posts seems to answer a question I had (sorry about that other post). I'd like to host my xod's on a different server/domain. I added the cors header on the server holding the xods and verified it was there (just by using CURL from the webviewer machine):

curl -I http://yadda.com/xx.xod
HTTP/1.1 200 OK
Date: Sun, 30 Jun 2013 12:33:29 GMT
Server: Apache
Last-Modified: Sat, 29 Jun 2013 20:54:44 GMT
Accept-Ranges: bytes
Content-Length: 9708419
Access-Control-Allow-Origin: *
Content-Type: text/plain

So the "Access-Control-Allow-Origin: *" is there but the Webviewer will still not show the document. I still get a "Access id denied" error out of CoreControls, it's coming from:

this.W.open("GET",this.url,u);

Is there something else I should be doing?

TIA

On Monday, June 4, 2012 10:02:47 PM UTC-4, Kevin Kuo wrote:

Q: My WebViewer is hosted on a different server/domain as my xod document files. 

How can I get around the cross-domain scripting errors when using the HTML5 WebViewer? (CORS? JSONP?)

--------

A: To get around the cross-domain issue, there are a couple of things you can do.

1. Use iframes to prevent cross-domain requests

-Host your xod documents and the WebViewer on the same host. (Since the WebViewer is making requests to a resource on the same server, no cross-domain issue here)

-Your application will use the WebViewer in an iframe.

*This is the technique that our Cloud API uses: our server generates a URL to a hosted web document, users can then embed the URL in their own web page in an iframe.

2. Enable CORS support on your storage server

-configure your storage server to support CORS (http://enable-cors.org/)

-The WebViewer uses CORS by default when the xod files are hosted on a different domain. You do not need to make any changes to or configure the WebViewer.

-note that if you use Amazon S3 for storage, you will not be able to do this. (S3 does not support CORS headers)

[Kevin Kuo]

Does your server allow the OPTIONS verb? (like GET, or POST)

Also, try adding added this in the header response

1. Access-Control-Allow-Methods:
   GET

If you're still having trouble, send me a link to a XOD file on your server and I'll try to provide more info.

[ch...@cwfent.com]

Thanks for trying to help me figure this out.

The server is a vanilla Apache server and supports options get and post. Here is a example of trying to run from a remote server:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="silverlight/Silverlight.js"></script>
<script type="text/javascript" src="flash/swfobject.js"></script>
<script type="text/javascript" src="flash/FABridge.js"></script>
<script type="text/javascript" src="flash/FlashUtils.js"></script>
<script type="text/javascript" src="WebViewer.js"></script>
<title></title>
<body>
<div id="viewer" style="width:auto;height:800px;"></div>
<script type="text/javascript">
    $(function() {
        var viewerElement = document.getElementById('viewer');
        var myWebViewer = new PDFTron.WebViewer({
            type: "html5,flash,Silverlight",
            initialDoc: "http://sections.lcni5.com/xods/fromxps.xod"
        }, viewerElement);
   });
</script>
</body>
</html>

If I try to view that example in the browser then I get the viewer but no document. The viewer just gives me that same "access denied" error on the same line. I get in the access log:

"OPTIONS /xods/fromxps.xod?_=-22, HTTP/1.1" 200 - "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0"

If I then just use CURL on the same machine to the same document:

curl -I http://sections.lcni5.com/xods/fromxps.xod
HTTP/1.1 200 OK
Date: Tue, 02 Jul 2013 18:00:54 GMT
Server: Apache
Last-Modified: Tue, 02 Jul 2013 17:44:30 GMT
Accept-Ranges: bytes
Content-Length: 948532
Access-Control-Allow-Origin: *
Content-Type: text/plain

In the log that curl request is logged as:

"HEAD /xods/fromxps.xod HTTP/1.1" 200 - "-" "curl/7.15.5 (i686-redhat-linux-gnu) libcurl/7.15.5 OpenSSL/0.9.8b zlib/1.2.3 libidn/0.6.5"

If I use wget to pull the file down, I get a "GET" request in the log

"GET /xods/fromxps.xod HTTP/1.0" 200 948532 "-" "Wget/1.11.4 Red Hat modified"

Anything you can tell me would be appreciated!

TIA

[Kevin Kuo]

Looks like browsers are rejecting the CORS response headers from your server.

Here is an example of a working CORS request:

Method: OPTIONS

Request Headers:

1. Accept:
   */*
2. Accept-Encoding:
   gzip,deflate,sdch
3. Accept-Language:
   en-US,en;q=0.8
4. Access-Control-Request-Headers:
   origin, range, x-requested-with
5. Access-Control-Request-Method:
   GET
6. Cache-Control:
   no-cache
7. Connection:
   keep-alive
8. Host:
   pdfnet.s3.amazonaws.com
9. Origin:
   http://www.pdftron.com
10. Pragma:
    no-cache
11. Referer:
    http://www.pdftron.com/webviewer/demo/html5/ReaderControl.html?...(omitted)
12. User-Agent:
    Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Response Header:

1. Access-Control-Allow-Credentials:
   true
2. Access-Control-Allow-Headers:
   origin, range, x-requested-with
3. Access-Control-Allow-Methods:
   GET, HEAD
4. Access-Control-Allow-Origin:
   http://www.pdftron.com
5. Content-Length:
   0
6. Date:
   Tue, 02 Jul 2013 18:52:19 GMT
7. Server:
   AmazonS3
8. Vary:
   Origin, Access-Control-Request-Headers, Access-Control-Request-Method
9. x-amz-id-2:
   816ZuFupohifZYCjvDywwcCWBqR6X+h+ypNQUwNstktw1+BnaX4QOOyjn2kyz/On
10. x-amz-request-id:
    82B8C6E442EDA56E

Try adding the highlighted response headers to your server responses.

[ch...@cwfent.com]

Thanks Kevin, we finally got it, in the end we had to add:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "origin, range, x-requested-with"
Header set Access-Control-Allow-Methods "GET, HEAD"

After that it worked like a charm!

[ch...@cwfent.com]

I might have spoke too soon, with those headers I can view in FF but IE9 does not work, I get the same access defined. Is there still something I'm missing to get IE to work?

Thanks

[Kevin Kuo]

Unfortunately, IE9 does not fully support CORS.

(It does have XDomainRequest that can be used to do cross domain requests; however it only supports text responses. This is a problem for reading binary XOD files.)

You will have to fallback to using the Silverlight/Flash viewer or use a server-side proxy.

[ch...@cwfent.com]

Flash will work when the doc is remote? I've been trying to mess around with it and I'm getting strange results. A made a little viewer on the server with the xod and it works fine for HTML5 but if I look at it in IE9 it does try to load the viewer in FLASH but everything is greyed out and there is no document (a console trace just reports "Object Error"). If I call that same viewer/document in a iframe on the the other server then I get something like the HTML 5 viewer, no slider and no full screen (which is the worse part), but the other things work.

Thanks

[ch...@cwfent.com]

I still haven't had any luck with flash, Sliverlight works but with flash I just get the error of:

ReferenceError: 'createHttpAjaxPartRetriever' is undefined

Any idea?

[Support]

it sounds like you are missing the HttpAjaxPartRetriever.js file. This is typically included in the WebViewer.min.js file. You want something like the following in your html.

<!-- WebViewer Production -->
<script src="../../WebViewer.min.js" type="text/javascript"></script>
<!--WebViewer Development -->
<!--       
    <script src="../../flash/swfobject.js"></script>
    <script src="../../flash/FABridge.js"></script>
    <script src="../../flash/HttpAjaxPartRetriever.js"></script>
    <script src="../../silverlight/Silverlight.js"></script>
    <script src="../../WebViewer.js"></script>
-->

The other possiblity is that the flash code has gotten ahead of the javascript loading. This is handled automatically in _createFlash() in WebViewer.js.

If the above doesn't help, then we would need more details regarding your situation. For example is this occurring with our original samples (if so which sample?), or have you made custom changes, and what are they?

In the meantime, you can switch the flash player to streaming mode, which doesn't use any javascript (pure flash).