內容安全政策：修復Yotpo政策錯誤

Yotpo是內建在Magento中很實用的一個平台，幫助商家可以很輕鬆的收集與顯示客戶評論、照片和影片，提高了客戶的信任度，進而促進銷售。

雖然Yotpo已與Magento完全整合並配置共同運作，但在全新安裝後，並非完全無誤。內容安全政策Content Security Policies（CSP）是最常見的問題。

CSP為一種安全工具用來減緩網站攻擊，像是信用卡盜錄器、連線劫持、點擊劫持等等。要求伺服器在HTTP標題中將腳本、樣式與其他資源的外部資源列入白名單。

當發生CSP安全問題時，開發者可能會看到與下方非常相似的錯誤訊息，出現在瀏覽器的開發者控制台：

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

為了要修復此錯誤，首先我們需要增加一個 etc/config.xml 以及為管理員和店面配置CSP端點。

<?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>

接下來，我們需要建立etc/csp_whitelist.xml來對不同CSP政策的白名單資源做主要配置。請確保Yotpo增加以下所有政策：

<?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>

有了這個，我們確實將外部網站納入白名單來允許向我們的網站提供資源，可協助防止未知來源的惡意腳本嘗試：

• 寄送信用卡訊息到攻擊者網站。
• 讓使用者點擊到不該顯示在頁面上的元素。

別忘記已安裝的第三方模組，您可能需要與供應商及開發者確認，來得到更多有關於需將哪些dns列入白名單的資訊。

以上是有關修復Yotpo錯誤的相關內容。對於網站而言，內容安全是很重要的一個環節。希望此篇文章有幫助到各位，喜歡歐斯瑞文章的讀者們，記得追蹤我們的粉絲團及IG，還有訂閱電子報，就不會錯過最新的文章分享囉！若有任何問題，也歡迎隨時與我們聯繫。