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 ; 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 ; 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 |
| media-src | specifies valid sources for audio and video |
| 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} | Allows Auvious stylesheets |
| img-src | https://{auvious-url} | Allows Auvious image,icons etc... |
| frame-src | https://{auvious-url} | Allows Auvious video room iframes |
| media-src | https://{auvious-url} | Allows the widget's notification sound |
| child-src | blob: | Used to allow sources for web workers |
child-src is used for web workers rather than the newer worker-src. worker-src falls back to child-src when absent, and child-src has the broader browser support — notably on Safari. Adding worker-src is not necessary. However, if your policy already defines worker-src for your own workers, the fallback to child-src no longer applies — you must add blob: to your worker-src as well.
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 |
| Middle East Central 2 | me.auvious.video |
| Asia South 1 | in.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 load the widget from npm and bundle it into your own application (see Versioning & integrity), the widget's own JavaScript is served from your origin, so script-src no longer needs the Auvious host for the widget itself — but it still does if you use the co-browse entry point, which is loaded from our URL. The other directives still apply — the widget continues to call our API, open media connections and fetch runtime assets.
If you configure the widget with your own URLs — for example launcher-image-url, queue-video-url, notification-sound-url, or a custom assetPath — those hosts need their own entries in the relevant directive too. The table above covers only the assets Auvious serves by default.
Note also that connect-src above includes https://sentry.auvious.com. If you block it the widget still works, but we receive no client-side diagnostics from your site, which makes it considerably harder for us to help when something goes wrong.
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.