How to Whitelist Fibr in Your Website’s Content Security Policy (CSP)?

What is CSP?

A content security policy (CSP) is an additional security feature that some websites have implemented. It allows website developers to have more control over the types of content and resources that are allowed to load on their websites.

Sometimes, a website's content security policy settings can prevent Fibr from performing certain actions, such as loading the website in the editor.

How to know if you're facing a CSP issue

The fastest way to identify a content security policy (CSP) issue is to look for unexpected changes on your website. With Fibr, if the Fibr Studio Chrome extension keeps loading/crashing or the changes that you have published for a campaign don't get reflected on your website, it is then imperative that you check for CSP.

To confirm if CSP problems cause these issues, follow these steps:

  1. Right-click on the page.

  2. Select "Inspect" from the menu.

  3. Click on the "Console" tab at the top of the developer tools window.

If there are any CSP-related errors, you'll likely see something similar to the following displayed in the console:

Setting up your CSP for Fibr

Important Note: If an existing content security policy (CSP) is in place, you should only add the necessary Fibr domains to that existing CSP. Do not create a new CSP to add the Fibr domains. Modifying the existing CSP is the appropriate approach here.

To solve these errors, you'll need to allow-list the following domains on your content security policy:

default-src: self, https://*.fibr.shop
script-src: self, https://*.fibr.shop
img-src: self, https://*.fibr.shop
frame-src: self, https://*.fibr.shop
child-src: self, https://*.fibr.shop
⁠frame-ancestors: self, https://*.fibr.shop
style-src: self, https://*.fibr.shop

Last updated