Content-Security-Policy
Introduction
Content Security Policy (CSP) adds a security layer that prevents certain types of attacks, like Cross-Site Scripting (XSS). Since Auvious Widget is hosted on your website, it is directly affected by this layer and if not configured correctly, it will not work properly.
The Content Security Policy is defined using the following syntax:
<policy-directive>; <policy-directive>
Then there are commonly two ways to apply CSP in your web site:
- Option 1: By configuring your web server to respond with HTTP Response Header 'Content-Security-Policy' e.g.
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com 'unsafe-inline'; style-src 'self' https://example.com
- Option 2: Using a meta tag inside your html code e.g.
<html>
<head>
<title>CSP Example</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com 'unsafe-inline'; style-src 'self' https://example.com"/>
</head>
<body>
....
</body>
</html>
This guide's purpose is not to explain thorougly CSP, but to explain how it should be configured in order for Auvious Widget to work correctly. For more complete information,tutorials and specific details please consult the official MDN Documentation for CSP
Directives Used
Below are the directives that need to be configured in order for Auvious to work correctly
| Directive | Description |
|---|---|
| script-src | specifies valid sources for JavaScript |
| connect-src | restricts urls that can be loaded from JavaScript |
| img-src | specifies valid sources of images and favicons. |
| style-src | specifies valid sources for stylesheets |
| child-src | specifies valid sources for nested browsing contexts (iframes) and web workers |
| frame-src | specifies valid sources for nested browsing contexts (iframes) (if absent, fallbacks to child-src) |
Below are the directive values that Auvious Widget requires to be configured:
| Directive | Value | Description |
|---|---|---|
| script-src | https://{auvious-url} | Allows Auvious Javascript sources |
| connect-src | https://{auvious-url} wss://{auvious-url} https://sentry.auvious.com | Allows Auvious Api Access |
| style-src | https://{auvious-url} 'unsafe-inline' | Allows Auvious stylesheets |
| img-src | https://{auvious-url} | Allows Auvious image,icons etc... |
| frame-src | https://{auvious-url} | Allows Auvious video room iframes |
| child-src | blob: | Used to allow sources for web workers |
Replace {auvious-url} with the value from the table below according to the auvious region site you use. If you don't know which region you use, then it's probably the default one.
| Region | Value |
|---|---|
| Europe West 1 (default) | auvious.video |
| US Central 1 | us.auvious.video |
| Australia SouthEast 1 | au.auvious.video |
Note that the above is just what Auvious requires. If you use Auvious through Genesys, Talkesk or Nice, then you should also consult with their most current documentation for additional directives and values. It's also a good practice to configure a report url so that you'll be able to detect any issues that your website users encounter.
If you're having problems you can always contact Auvious support by email, and we'll provide you with more details about your specific use case.