Content Security Policy¶

A Content Security Policy (CSP) is a policy with which a website specifies the sources from which the browser can load content. If your website sends such a policy, then the browser loads the widget of Myra EU CAPTCHA only if the policy permits the addresses of the service.

Necessary permissions¶

The widget uses two addresses. The table that follows gives the directives that must contain these addresses:

Directive	Address	Function
`script-src`	`https://cdn.eu-captcha.eu`	Loads the `verify.js` file into the protected page.
`frame-src`	`https://cdn.eu-captcha.eu`	Loads the `check.html` file into the hidden iframe in which the verification occurs.
`connect-src`	`https://api.eu-captcha.eu`	Requests a value for the Private Access Token procedure before the verification. Currently, only Safari supports this procedure.

Note

frame-src is as necessary as script-src. The verify.js file makes the iframe at run time. Thus a missing permission does not become apparent during the integration, but in operation.

Example of a policy¶

The header that follows permits everything that the widget needs:

Content-Security-Policy: script-src 'self' https://cdn.eu-captcha.eu; frame-src 'self' https://cdn.eu-captcha.eu; connect-src 'self' https://api.eu-captcha.eu

The default-src directive applies as a fallback for all directives that your policy does not give individually. If your policy contains only default-src, then add the two addresses there.

Effect of a missing permission¶

A missing permission has a different effect for each directive:

Missing directive	Effect
`script-src`	The browser does not load `verify.js`. No widget shows on the page, and the form does not contain an `eu-captcha-response` field.
`frame-src`	The `verify.js` file loads, but the iframe stays empty. The widget does not make a token.
`connect-src`	The widget continues to operate. In Safari, the Private Access Token procedure does not occur.

Warning

The browser blocks the file before it sends the request. Therefore the request shows in the network area of the developer tools without a status code. This result looks like a malfunction of the CDN, although the service is reachable and answers. Refer to The API is not reachable.

The widget sets its size and the position of the Myra logo with style attributes on the elements that it makes. If your policy contains a style-src or style-src-attr directive without the 'unsafe-inline' value, then the widget shows in the wrong position or in the wrong size. The verification itself continues.

Examine the policy¶

To examine the policy of your website, do the steps that follow:

► Open the protected page in a browser.
► Open the developer tools of the browser.
► In the console, examine if a message gives one of the three addresses.
► In the network analysis, examine the Content-Security-Policy response header of the page.
➔ The messages of the console give the directive that refused the access.

Note

A policy is either in the Content-Security-Policy response header or in a <meta http-equiv="Content-Security-Policy"> element in the <head> area of the page. The two forms operate together: the browser applies each policy individually, and thus the permission must be in each of them.

Refer to The widget is not detected and How it works.