The Newired overlay JavaScript needs to fetch various contents ( like CSS file, Fonts, etc...) from the content delivery server.
Additionally, the overlay needs to perform HTTP requests to the Newired Server (Portal)
All of these kind of requests can be denied in the target web application by the Content Security Policy.
Examples of usage:
Allow any content only from self domain.
Content-Security-Policy: default-src 'self'
Allow HTTP requests only from self domain and example.com
Content-Security-Policy: connect-src 'self' http://example.com
To make the Newired Overlay be able to run in the target web application using CSP it has to be configured to allow:
- HTTP requests to Newired Portal (needed only by Survey plugin)
- Download scripts, images, CSS, fonts, from Content Delivery Server (typically same as Newired Portal)
When CSP defined in a target web application is using more specific directives like connect-src, style-src, etc. then has to be extended to fulfill the following Overlay requirements.
Fetch Json files, JS bundles | connect-src <content-delivery> |
CSS Files | style-src <content-delivery> |
Fonts | font-src <content-delivery> |
Initialize Overlay | script-src unsafe-eval unsafe-inline |
Cross-Domain Storage | frame-src <content-delivery> <cross-domain-storage page> |
Survey Plugin (in order to send e-mails with answers) | connect-src <portal> |
keep in mind that in order to allow external content in the bubbles like images or videos is needed to allow these external sources into CSP directives too.
Lets have Newired Portal running on URL https://portal.example.com (Content Delivery Server is typically part of Portal). And additionally if there is the intention of serving some external images from photobank at https://photo-example.com.
Content-Security-Policy:
connect-src https://portal.example.com;
img-src data: https://portal.example.com https://photo-example.com;
style-src https://portal.example.com;
font-src data: https://portal.example.com;
script-src https://portal.example.com 'unsafe-eval' 'unsafe-inline';
frame-src https://portal.example.com;
Or using default-src
Content-Security-Policy: default-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://portal.example.com;
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article