Recording and spy problems caused by Content Security Policy (CSP) in the website

Last edited on

Symptoms

The basic symptom is that Squish for Web will not function correctly, recording will not record anything, picking will not work and replaying tests will run into a lookup error or not start up the browser at all.

In some browsers executing the command startBrowser() may fail and the resulting error message may contain a hint that the website uses the Content Security Policy (CSP) in a way that breaks Squish. When using ‘Launch AUT’ in the Squish IDE, similar information may be found in the ‘Runner/Server Log’ tab of the Squish IDE.

The error message from the browser startup will include some text like ‘Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive’. The actual message may vary, but it will include the words ‘Content Security Policy’.

Check if Content Security Policy is the cause

Since these symptoms can be rather generic it is necessary to verify that it really is the use of Content Security Policy that is causing these problems before applying any of the workarounds below. In case the error message already includes a reference to Content Security Policy this part can be skipped.

The easiest way to check whether the Content Security Policy prevents Squish from working is to launch the browser with the website to automate from the Squish IDE using Launch AUT. Once the browser is started open up the Developer Tools from the browsers menu and from there the Console (or Web Console). How to do this differs between browsers, in Google Chrome you can access this from the Other Tools submenu or a shortcut, in Edge you can use the F12 shortcut and in Safari you need to enable the Develop menu in the preferences.

Once the Console is open try to pick an element using the Squish IDE, this should produce an error message in the Console window. The following screenshot demonstrates how this looks like in Google Chrome after picking the input field on the page:

Browser Console showing CSP error
Browser Console showing CSP error

The error message will say something like ‘Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’". Either the ‘unsafe-inline’ keyword…' or ‘Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’".'. If you notice that either ‘unsafe-inline’ or ‘unsafe-eval’ is being mentioned as not allowed then Squish will not work correctly.

Making such websites work with Squish

There are two options to allow Squish to work with websites disabling the execution of inline JavaScript code or the eval function:

  1. Modify the Content Security Policy settings on the web server to include the unsafe-inline and unsafe-eval flags for the scripts-src directive

  2. When available use a browser extension that filters the Content Security Policy flags. For example for Chrome this extension can be used: https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden. For Chrome it is necessary to install this extension in the profile that Squish uses. In order to do that start up Chrome via Squish, then navigate to the page and follow the installation procedure. After installation shut down Chrome again.