Yotpo is a useful platform built-in into Magento that helps merchants to easily collect and display customer reviews, photos and videos, improving customers’ trust; therefore boosting sales.

Although, Yotpo is fully integrated and configured to work with Magento it is not error free after a clean installation; being the most common issue related to Content Security Policies (CSP).

CSP are a security tool to mitigate site attacks such as: card skimmers, session hijacking, clickjacking, and more. Requiring the server to previously whitelist in the HTTP headers the external sources for scripts, styles and other resources.

When a SCP security issue occurs a developer might see an error message appearing the browser developer console, being very similar to the following one:

[Report Only] Refused to load the script ‘https://xxxx’ because it violates the following Content Security Policy directive: “xxxx”.

For fixing this error, the first thing we need to do is to add a etc/config.xml and configure the SCP endpoints for admin and storefront.

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Store:etc/config.xsd”>

   <default>

       <csp>

           <mode>

               <storefront>

                   <report_only>1</report_only>

               </storefront>

               <admin>

                   <report_only>1</report_only>

               </admin>

           </mode>

       </csp>

   </default>

</config>

Next, we need to create etc/csp_whitelist.xml that will have the main configuration to the whitelist resources for the different CSP policies. Usually, for Yotpo make sure to add all the following policies:

<?xml version=”1.0″?>

<csp_whitelist xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd”>

   <policies>

       <policy id=”script-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”connect-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”frame-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”form-action”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”img-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”style-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

           </values>

       </policy>

       <policy id=”font-src”>

           <values>

               <value id=”yotpo_main” type=”host”>yotpo.com</value>

               <value id=”yotpo_main_www” type=”host”>www.yotpo.com</value>

               <value id=”yotpo_p” type=”host”>p.yotpo.com</value>

               <value id=”yotpo_staticw2″ type=”host”>staticw2.yotpo.com</value>

               <value id=”yotpo_w2″ type=”host”>w2.yotpo.com</value>

               <value id=”gstatic” type=”host”>*.gstatic.com</value>

           </values>

       </policy>

   </policies>

</csp_whitelist>

With this, we are expliciting whitelisting the external sites ot be allowed to provide resources to our site, helping to prevent malicious scripts from unknown sources attempting to:

• Send credit card info to an attacker’s website.
• Make users click on elements that are not supposed to be on page.

Do noy forget that for installed 3rd parties modules, you might need to check with the vendor/developer for getting more information on what dns you should whitelist.