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 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.
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!