Mats Bryntse
27 February 2015

Testing X-Domain Websites With Siesta in Chrome

If you ever tried testing a URL on a different domain, protocol or port, you have most likely seen some […]

If you ever tried testing a URL on a different domain, protocol or port, you have most likely seen some error in the browser console. The error is a result of various rules enforced by the browser as defined by the Same Origin Policy. Try to open www.google.com in one of your tests and you will see the errors yourself. These warnings are expected when using Siesta since it is a web application based on pure JavaScript. This means it’s bound by all the rules that regular web pages are. But for testing purposes, there are ways to work around these rules. We need to do (at least) two things to be able to test a site on another domain.

Disabling Web Security in Chrome

Let’s say you wanted to run a test targeting www.google.com from your own localhost. A simple Harness setup would look like this:

var Harness = Siesta.Harness.Browser

Harness.configure({
    separateContext : true
})

Harness.start(
    {
        hostPageUrl : '//google.com',
        url         : 'x-domain.t.js'
    }
)

Note that we set separateContext to true since the test will navigate between different pages. To allow Siesta to access an iframe pointing to a remote site, you can launch Chrome with a special command line switch. If you have a Mac, this is what you’d write on the console.

open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

This flag tells Chrome to not enforce the Same Origin Policy. For more information about Chrome command line switches, please see this resource.. You may need to also specify a valid directory for the “–user-data-dir” switch, once this issue will be resolved.

For Windows the command line may look like:

c:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-web-security --user-data-dir=c:\new_profile
Note, that this command will create a new Chrome profile in the “c:\new_profile” directory and you will need to install the “X-Frame-Options” extension in the new profile.

Disabling X-Frame-Options in Chrome

After opening Chrome with this flag, running the test will produce the following warning.

Screen Shot 2015-02-27 at 16.07.34

This error is a result of Google setting the X-Frame-Options response header to SAMEORIGIN. This means “The page can only be displayed in a frame on the same origin as the page itself”, and you can read more about this setting here. To bypass this security feature, we simply install the “Ignore X-Frame Headers” extension for Chrome. Now we can run the test again, and the full Google page displays normally in the Siesta iframe.

You can see a small video I made showing how this works, I hope you find these tricks useful when testing your own applications. Enjoy!

Mats Bryntse

Siesta Testing