{"id":1716,"date":"2021-04-25T11:59:12","date_gmt":"2021-04-25T11:59:12","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/fixed-content-security-policy-warnings-in-magento-2\/"},"modified":"2025-05-22T10:37:23","modified_gmt":"2025-05-22T05:07:23","slug":"fixed-content-security-policy-warnings-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/fixed-content-security-policy-warnings-in-magento-2\/","title":{"rendered":"Fixed: Content Security Policy Warnings in Magento 2"},"content":{"rendered":"\n

CSP, i.e., Content Security Policy<\/a> is a robust tool introduced to prevent attacks on your Magento 2 store that aims to offer an additional layer of defence to detect and fight against Cross-Site Scripting (XSS) and related attacks, including card skimmers, session hijacking, clickjacking, and more. As of version Magento 2.3.5<\/a>, it supports CSP headers and provides ways to configure them.<\/p>\n\n\n\n

One can disable Magento 2 content security policy<\/a> also. However, disabling CSP results in more possibilities of attacks on the store. Instead of blocking all third-party APIs completely, you can use the below solution and allow your selected third-party API as per your requirement.<\/p>\n\n\n\n

CSP is implemented in Magento 2.3.5<\/a> with an aim to offer an additional layer of defence to detect and mitigate cross-site scripting and its related data injection attacks.<\/p>\n\n\n\n

Method to Fix Content Security Policy Warnings in Magento 2:<\/h2>\n\n\n\n

You can use this solution to solve the warning shown below:<\/p>\n\n\n\n

\"CSP<\/figure>\n\n\n\n

1. Create a csp_whitelist.xml<\/strong> file in Vendor\\Extension\\etc<\/strong><\/strong><\/p>\n\n\n\n

<? xml version = \"1.0\"?>\n<csp_whitelist xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n               xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Csp\/etc\/csp_whitelist.xsd\">\n    <policies>\n        <policy id=\"script-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"uniqueId\" type=\"host\">accounts.google.com<\/value>\n            <\/values>\n        <\/policy>\n    <\/policies>\n<\/csp_whitelist><\/pre>\n\n\n\n
You can add a domain to the whitelist for a policy like script-src, style-src, font-src and others by adding a csp_whitelist.xml to your custom module\u2019s etc folder.<\/p>\n\n\n\n
We have to pass a unique random id to the value field.<\/p>\n\n\n\n
In the value tag, enter the domain which is mentioned in the warning.<\/p>\n\n\n\n
2. Create a config.xml<\/strong> file in Vendor\\Extension\\etc<\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Store:etc\/config.xsd\">\n    <default>\n        <csp>\n            <mode>\n                <storefront>\n                    <report_only>0<\/report_only>\n                <\/storefront>\n                <admin>\n                    <report_only>0<\/report_only>\n                <\/admin>\n            <\/mode>\n        <\/csp>\n    <\/default>\n<\/config><\/pre>\n\n\n\n
Content Security Policy works in two modes:<\/p>\n\n\n\n
    \n
  1. report \u2013 only<\/strong> \u2013 Magento reports the policy violations but does not act upon it. It is mainly used for debugging. CSP works in this mode by default.<\/li>\n\n\n\n
  2. restrict mode<\/strong> \u2013 Magento acts in the case of policy violations.<\/li>\n<\/ol>\n\n\n\n
    Here, we will use the default mode with zero value.<\/p>\n\n\n\n
    It\u2019s an example of \u2018script-src\u2019 warning, you can use the below solution for such kind of similar warnings as per the above path and method.<\/p>\n\n\n\n
    1. style-src:<\/strong><\/p>\n\n\n\n
     <policy id=\"style-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/accounts.google.com\/gsi\/style<\/value>\n            <\/values>\n <\/policy><\/pre>\n\n\n\n
    2. frame-src:<\/strong><\/p>\n\n\n\n
     <policy id=\"frame-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/accounts.google.com<\/value>\n            <\/values>\n <\/policy><\/pre>\n\n\n\n
    3. connect-src:<\/strong><\/p>\n\n\n\n
     <policy id=\"connect-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/accounts.google.com\/gsi\/status<\/value>\n            <\/values>\n <\/policy><\/pre>\n\n\n\n
    4. img-src:<\/strong><\/p>\n\n\n\n
     <policy id=\"img-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"meetanshi-image\" type=\"host\">https:\/\/meetanshi.com\/media.png<\/value>\n            <\/values>\n <\/policy><\/pre>\n\n\n\n
    5. font-src:<\/strong><\/p>\n\n\n\n
     <policy id=\"font-src\">\n            <values>\n                <value id=\"uniqueId\" type=\"host\">https:\/\/domain.com<\/value>\n                <value id=\"uniqueId\" type=\"host\">*.gstatic.com<\/value>\n            <\/values>\n <\/policy><\/pre>\n\n\n\n
    You can solve any kind of CSP warning by following the above method.<\/p>\n\n\n\n
    Ways to Add Whitelisted Resources to Custom Code<\/h3>\n\n\n\n
    The following table describes each type of CSP to configure it for your custom code\/extension\/theme<\/p>\n\n\n\n
    Also, I\u2019d be grateful if you can help me spread the word about the post among Magento Community via social media.Thank You!<\/p>\n\n\n\n
    CSP Code & Description<\/th><\/tr>
    CSP Code<\/strong><\/th>Description<\/strong><\/th><\/tr><\/thead>
    default-src<\/td>The default policy.<\/td><\/tr>
    base-url<\/td>Defines which URLs can appear in a page\u2019s <base> element.<\/td><\/tr>
    child-src<\/td>Defines the sources for workers and embedded frame contents.<\/td><\/tr>
    connect-src<\/td>Defines the sources that can be loaded using script interfaces.<\/td><\/tr>
    font-src<\/td>Defines which sources can serve fonts.<\/td><\/tr>
    form-action<\/td>Defines valid endpoints for submission fromtags.<\/td><\/tr>
    frame-ancestors<\/td>Defines the sources that can embed the current page.<\/td><\/tr>
    img-src<\/td>Defines the sources from which images can be loaded.<\/td><\/tr>
    manifest-src<\/td>Defines the allowable contents of web app manifests.<\/td><\/tr>
    media-src<\/td>Defines the sources from which images can be loaded.<\/td><\/tr>
    object-src <\/td>Defines the sources for the <\/object><\/td><\/tr>
    script-src <\/td>Defines the sources for JavaScript elements.<\/td><\/tr>
    style-src <\/td>Defines the sources for stylesheets.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    That\u2019s it.<\/p>\n\n\n\n
    Also, I\u2019d be grateful if you can help me spread the word about the post among Magento Community via social media.<\/p>\n\n\n\n
    Thank You!<\/p>\n","protected":false},"excerpt":{"rendered":"
    CSP, i.e., Content Security Policy is a robust tool introduced to prevent attacks on your Magento 2 store that aims to offer an additional layer of defence…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1716","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1716"}],"version-history":[{"count":9,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1716\/revisions"}],"predecessor-version":[{"id":14364,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1716\/revisions\/14364"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}