How do we allow webReader to function correctly while using CSP for increased security?

Using Content Security Policy (CSP) is a great way to enhance your website's security by controlling which resources are allowed to load. To ensure webReader functions correctly alongside your existing CSP rules, you need to add specific permissions for ReadSpeaker resources.

You can add these permissions to your CSP policy either via an HTTP header (sent from your web server) or using a <meta> tag in your HTML's <head> section.

HTTP Header Example: Content-Security-Policy: default-src 'self'; connect-src *.readspeaker.com; script-src-elem *.readspeaker.com; ... [other directives]
Meta Tag Example: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src *.readspeaker.com; script-src-elem *.readspeaker.com; ... [other directives]">

Below you will find a reference of what needs to be allowed for webReader to function correctly. Note: You should merge the required ReadSpeaker directives with your existing CSP directives, not replace them entirely.

Recommended Approach (Using Wildcards):

The simplest and most robust method is to allowlist ReadSpeaker's domain using wildcards. This approach is less likely to break if specific subdomains change due to updates or regional variations.

 connect-src *.readspeaker.com;
 script-src-elem *.readspeaker.com;
 style-src-elem 'unsafe-inline' *.readspeaker.com;
 font-src 'self' data:;
 img-src *.readspeaker.com;
 style-src-attr 'unsafe-inline';
 form-action *.readspeaker.com;
 frame-src *.readspeaker.com;

Alternative Approach (Specific Subdomains):

If your security policy strictly prohibits wildcards, you can specify the exact subdomains. However, be aware that these subdomains can vary based on the geographic region of the data center (e.g. EU, US, JP, etc.) and the specific voice technologies used. The list may also change over time. Below is an example for the EU datacenter using certain voices:

 connect-src wrapi-eu.readspeaker.com cdn-eu.readspeaker.com app-eu.readspeaker.com rstts-eu.readspeaker.com vttts-eu.readspeaker.com vtdnntts-eu.readspeaker.com media-eu.readspeaker.com;
 script-src-elem cdn-eu.readspeaker.com;
 style-src-elem 'unsafe-inline' cdn-eu.readspeaker.com;
 font-src 'self' data:;
 img-src cdn-eu.readspeaker.com;
 style-src-attr 'unsafe-inline';
 form-action app-eu.readspeaker.com;
 frame-src app-eu.readspeaker.com rstts-eu.readspeaker.com vttts-eu.readspeaker.com vtdnntts-eu.readspeaker.com;

You would need to adjust this list based on your specific ReadSpeaker setup. Due to the potential for changes, using the wildcard approach (*.readspeaker.com) is generally recommended if possible.

Notes:

Hashes/SRI: Using CSP hashes or Subresource Integrity (SRI) is generally not practical for webReader scripts, as their content can change with updates or configuration adjustments, which would cause the service to fail.
General CSP Info: For more details on CSP itself, refer to the MDN Web Docs on Content Security Policy.