If you looked really carefully after upgrading to Magento 2.3.5 or later, then you would have noticed that your Browser Console would have started reporting errors such as this:
Screenshot of Console Error
Extract of Browser Console Error
The Content Security Policy 'font-src 'self' 'unsafe-inline';
form-action geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com secure.authorize.net test.authorize.net 'self' 'unsafe-inline';
frame-ancestors 'self' 'unsafe-inline';
frame-src geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com secure.authorize.net test.authorize.net www.paypal.com www.sandbox.paypal.com 'self' 'unsafe-inline';
img-src widgets.magentocommerce.com www.googleadservices.com www.google-analytics.com t.paypal.com www.paypal.com www.paypalobjects.com fpdbs.paypal.com fpdbs.sandbox.paypal.com *.vimeocdn.com s.ytimg.com 'self' 'unsafe-inline';
script-src assets.adobedtm.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com www.googleadservices.com www.google-analytics.com secure.authorize.net test.authorize.net www.paypal.com www.sandbox.paypal.com www.paypalobjects.com t.paypal.com s.ytimg.com video.google.com vimeo.com www.vimeo.com js.authorize.net jstest.authorize.net cdn-scripts.signifyd.com www.youtube.com js.braintreegateway.com 'self' 'unsafe-inline' 'unsafe-eval';
style-src getfirebug.com 'self' 'unsafe-inline';
object-src 'self' 'unsafe-inline';
media-src 'self' 'unsafe-inline';
manifest-src 'self' 'unsafe-inline';
connect-src geostag.cardinalcommerce.com geo.cardinalcommerce.com 1eafstag.cardinalcommerce.com 1eaf.cardinalcommerce.com centinelapistag.cardinalcommerce.com centinelapi.cardinalcommerce.com 'self' 'unsafe-inline';
child-src 'self' 'unsafe-inline';
default-src 'self' 'unsafe-inline' 'unsafe-eval';
base-uri 'self' 'unsafe-inline';'
was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header.
During this video, I’ll go over what those errors mean and how to safely resolve them.
[After this short message…]
What is a Content Security Policy?
Content Security Policy (CSP) is a powerful tool to mitigate against Cross Site Scripting (XSS) and related attacks, including card skimmers, session hijacking, clickjacking, and more. Web servers send CSPs in response HTTP headers (namely Content-Security-Policy and Content-Security-Policy-Report-Only) to browsers that whitelist the origins of scripts, styles, and other resources.
Together, CSPs and built-in browser features help prevent:
- Loading a malicious script from an attacker’s website
- A malicious inline script from sending credit card info to an attacker’s website
- Loading a malicious style that will make users click on an element that wasn’t supposed to be on a page
Why these appear after upgrading to Magento 2.3.5?
As of version 2.3.5, Magento supports CSP headers and provides ways to configure them. Albeit, they cannot be configured from the backend. Magento also provides default configurations at the application level and for individual core modules that require extra configuration. Policies can be configured for adminhtml and storefront areas separately to accommodate different use cases. Magento also permits configuring unique CSPs for specific pages.
CSP can work in two modes:
report-only: In this mode, Magento reports policy violations but does not interfere. This mode is useful for debugging. By default, CSP violations are written to the browser console. This is the default behaviour and why you are seeing what you see now.
restrict mode: In this mode, Magento acts on any policy violations. Therefore, an image or javascript widget would not load on your website. This would not show an error in your browser console - But you would be able to identify the blocked resource from the Network Tab of your browser.
Content Security Policy Module
A short while ago, I built a CSP Module to help whitelist 3rd party assets so that you can address these CSP errors. It follows the guidelines set out in the Official Magento Documentation. After downloading the Project from the Digital Startup GitHub, you might need to update 2 files before uploading it to your own Magento 2 project:
csp_whitelist.xmlto whitelist additional 3rd party assetsconfig.xml: to add a reporting URL (if you require) and switch from report only mode (0) to restrict mode (1) [Optional Step]
Alternatively, you could upload the files and leave in report only mode to jot down the URLs that still trigger warnings. Then revisit the csp_whitelist.xml file to tweak changes.
You should find that I covered much of the common 3rd party URLs such as Social Media and CDNs - However, we all have different requirements so I may have missed something.
Should you chose to add a record, simply copy and paste the structure from an existing line (like so) and paste underneath. Just be sure to edit the “id” to something unique as well as update the URL that you want to add. After making your changes, you should recompile and clear your cache for the changes to take affect.
Download the project
You can download the Content Security Policy Module here: GitHub Project. Be sure to following any instructions in the Readme file.
References
- Content Security Policies (Official Magento Documentation)
- Content Security Policies (Credit to Magento Stack Exchance)
- Digital Startup GitHub Module