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 PriceSpider API with the domain pricespider.com. In this case, the CSP will tell your browser/user agent whether resources from pricespider.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 PriceSpider functionality into your website while maintaining this security, you'll need to ensure you're allowing data to load from PriceSpider's domains via your CSP.
PriceSpider 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 PriceSpider-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 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:
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.pricespider.com
check.pricespider.com
embeddedcloud.pricespider.com
locate.pricespider.com
wwwassets.pricespider.com
wtbevents.pricespider.com
wtbstream.pricespider.com
wtbng.pricespider.com
usw-wtbng.pricespider.com
euw-wtbng.pricespider.com
omni.pricespider.com
usw-omni.pricespider.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.pricespider.com
check.pricespider.com
locate.pricespider.com
wtbevents.pricespider.com
wtbng.pricespider.com
usw-wtbng.pricespider.com
euw-wtbng.pricespider.com
omni.pricespider.com
usw-omni.pricespider.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.pricespider.com
wwwassets.pricespider.com
data:
blob: ;
connect-src
'self'
wtbstream.pricespider.com
wtbng.pricespider.com
usw-wtbng.pricespider.com
euw-wtbng.pricespider.com
omni.pricespider.com
usw-omni.pricespider.com
euw-omni.pricespider.com
https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com
wss: ;
font-src
'self'
cdn.pricespider.com;
style-src
'self'
'unsafe-inline'
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. PriceSpider 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 *.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 PriceSpider's side or if new services are introduced.