gtm.js?id=xxx CSP error on checkout page

[viktoryaboa9a2]

I have error 'Refused to execute inline script because it violates the following Content Security Policy directive...' in console.

I tried to solve this in the following ways

1.

In .phtml

<script type="text/x-magento-init"> {"*": { "gtmLoader": { "gtmId": "<?= $viewModel->getGtmId(); ?>" } } } </script>

in js

define(['jquery'], function ($) {
"use strict";

return function (config) {
    window.dataLayer = window.dataLayer || [];
    $(document).trigger('gtm:beforeInitialize');
    (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src='https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', config.gtmId);

    $(document).trigger('gtm:afterInitialize');
};});

2.

<?php $scriptString = <<<script
(function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src='https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', '{$containerCode}');
script;
?><?= $secureRenderer->renderTag('script', [], $scriptString, false) ?>

But in both cases I have an error for gtm.js?id=xxx

Please tell me what I'm doing wrong

[prashantsi69f6]

Hello,

The error you're experiencing is due to the Content Security Policy (CSP) restriction imposed by modern browsers to prevent malicious scripts from executing. The 'Refused to execute inline script' error is occurring because the Google Tag Manager (GTM) script is being loaded as an inline script, which is not allowed by your site's CSP policy.

The issue is likely caused by the fact that GTM is trying to load the gtm.js script directly in the page, which is being blocked by the CSP policy.

I would recommend using the CSP Whitelisting module (https://www.scommerce-mage.com/magento-2-csp-whitelisting.html) to resolve this issue. This module allows you to easily whitelist specific scripts and sources, including GTM, to ensure that they are executed correctly.

With this module, you can add the necessary directives to your CSP policy to allow the GTM script to execute, without having to modify your page's code or compromise your site's security.

Alternatively, you can also try to configure GTM to load the script from a specific source, rather than loading it inline. However, the CSP Whitelisting module provides a more straightforward and efficient solution to this issue.

I hope this helps!