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 following options exist to allow Squish to work with websites disabling the execution of inline JavaScript code or the eval function.

Option 1 - Disable CSP in Google Chrome via Extension

The third party extension Always Disable Content-Security-Policy can be used to disable CSP in Google Chrome. (Other, similar extensions may exist.)

It is necessary to install this extension in the Google Chrome profile of Squish. In order to do that start up Chrome via Squish, then navigate to the extension's URL (see above) and follow the installation procedure. After installation shut down Google Chrome again.

Since Squish 7.0 an extension that disables this is part of Squish.

Option 2 - Disable CSP in Firefox via Setting

CSP can be disabled in Firefox's settings by entering about:config in the URL bar of a Firefox tab, and then searching for security.csp.enable and setting its value to false.

It is necessary to make this configuration change in the Firefox profile of Squish. In order to do that start up Firefox via Squish, then perform the above mentioned change to the setting security.csp.enable.

Option 3 - Configure/disable CSP on the Web Server

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

Squish requires that the automated web page/application creates HTTP connections to Squish on 127.0.0.1, with variable Ports. If the existing CSP prevents these connections a connect-src directive is required, for example: connect-src http://127.0.0.1:*