What is a CSP?
CSP stands for Content Security Policy. CSP is a website security layer that tells a browser whether it can load data from a domain that doesn't match the website's domain. For example, suppose your current domain is shopnow.com, and you are trying to load data from a Wayvia API with the domain wayvia.com. In this case, the CSP will tell your browser/user agent whether resources from wayvia.com should be loaded or not.
Many websites have strict CSPs that tell browsers to block loading their resources from different domains as a security measure, to keep out unknown/unapproved entities and data. In order to properly integrate Wayvia functionality into your website while maintaining this security, you'll need to ensure you're allowing data to load from Wayvia's domains via your CSP.
Wayvia vs. PriceSpider domains
During our transition from PriceSpider to Wayvia, some implementations may still reference pricespider.com. To avoid issues, we recommend allowing both *.wayvia.com and *.pricespider.com in your CSP. Whitelisting pricespider.com will not cause problems even if your scripts already use wayvia.com only.
Wayvia recommendations:
Ideally, all sub-domains of a domain would be allowed through wildcards. This will prevent having to manually specify every subdomain that needs to talk to Wayvia-related services, and keeps things much cleaner. Moreover, if any of the sub-domains change or if new services are introduced with new sub-domain name(s), no action is necessary to accommodate this in the CSP post-implementation.
1) Allow all services that end with wayvia.com / pricespider.com and mapbox.com - RECOMMENDED!
<meta http-equiv="Content-Security-Policy"
name="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data: wss:
wayvia.com
*.wayvia.com
pricespider.com
*pricespider.com
mapbox.com
*.mapbox.com
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js;
;">
2) Allow specific domains in default-src - NOT RECOMMENDED
<meta http-equiv="Content-Security-Policy"
name="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data: wss:
cdn.wayvia.com
cdn.pricespider.com
check.wayvia.com
check.pricespider.com
embeddedcloud.wayvia.com
embeddedcloud.pricespider.com
locate.wayvia.com
locate.pricespider.com
wwwassets.wayvia.com
wwwassets.pricespider.com
wtbevents.wayvia.com
wtbevents.pricespider.com
wtbstream.wayvia.com
wtbstream.pricespider.com
wtbng.wayvia.com
wtbng.pricespider.com
usw-wtbng.wayvia.com
usw-wtbng.pricespider.com
euw-wtbng.wayvia.com
euw-wtbng.pricespider.com
omni.wayvia.com
omni.pricespider.com
usw-omni.wayvia.com
usw-omni.pricespider.com
euw-omni.wayvia.com
euw-omni.pricespider.com
api.mapbox.com
https://*.tiles.mapbox.com
events.mapbox.com
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js;
;">
3) Allow specific domains via respective fetch directives - NOT RECOMMENDED
<meta http-equiv="Content-Security-Policy" name="Content-Security-Policy" content="default-src 'self';
script-src 'self'
'unsafe-eval'
cdn.wayvia.com
cdn.pricespider.com
check.wayvia.com
check.pricespider.com
locate.wayvia.com
locate.pricespider.com
wtbevents.wayvia.com
wtbevents.pricespider.com
wtbng.wayvia.com
wtbng.pricespider.com
usw-wtbng.wayvia.com
usw-wtbng.pricespider.com
euw-wtbng.wayvia.com
euw-wtbng.pricespider.com
omni.wayvia.com
omni.pricespider.com
usw-omni.wayvia.com
usw-omni.pricespider.com
euw-omni.wayvia.com
euw-omni.pricespider.com
https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js;
img-src 'self'
embeddedcloud.wayvia.com
embeddedcloud.pricespider.com
wwwassets.wayvia.com
wwwassets.pricespider.com
data:
blob: ;
connect-src
'self'
wtbstream.wayvia.com
wtbstream.pricespider.com
wtbng.wayvia.com
wtbng.pricespider.com
usw-wtbng.wayvia.com
usw-wtbng.pricespider.com
euw-wtbng.wayvia.com
euw-wtbng.pricespider.com
omni.wayvia.com
omni.pricespider.com
usw-omni.wayvia.com
usw-omni.pricespider.com
euw-omni.wayvia.com
euw-omni.pricespider.com
https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com
wss: ;
font-src
'self'
cdn.wayvia.com;
style-src
'self'
'unsafe-inline'
cdn.wayvia.com
cdn.pricespider.com;
https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com ;
worker-src blob: ;
child-src blob: ;
">
Notes:
If a WTB is configured to include a local section, it will ask to load a map and other features critical to the local shopping experience. To display a map, WTB needs to load all the scripts, stylesheets, images/tiles and other resources from the map service provider. Wayvia has Mapbox, Google and Leaflet-based map services, and a WTB can use any one of them (Mapbox is the default). To load the map, we need to allow scripts, images and resources from their respective domains. The CSP policy to load a map from Mapbox is here: https://docs.mapbox.com/mapbox-gl-js/guides/browsers-and-testing/#csp-directives
- WTB also loads some scripts from the cdnjs.cloudflare.com content delivery network.
Consequences of choosing specific domains instead of .wayvia.com and .pricespider.com:
If you must allow specific domains instead of allowing all domains with wildcards, you may need to update your CSP policy in the future if there is a domain name change on Wayvia's side or if new services are introduced.