Content Security Policy Recommendations for WTB

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. 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request