Search code examples
node.jsgoogle-analyticspugcontent-security-policymatomo

Content Security Policy: Page settings prevented loading of resource when having Google and Matomo analytics in the same node.js application

I'm very new with node.js, but I was told to add matomo analytics into node.js application that already has google analytics. The purpose is to have them both at least in the beginning.

With the below I get error message : Content Security Policy: Page settings prevented loading of resource from https://cdn.matomo.cloud/<mySite>.matomo.cloud/container_<myContainer>.js ("script-src").

My code in index.pug:

doctype html
html(lang="fi")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
        meta(name="host", content="Azure")

        link(rel="icon", href="omatalous/public/media/favicon.ico")
        <!-- Azure -->
         title Oma talous -laskuri

        if enableAnalytics
            <!-- Global site tag (gtag.js) - Google Analytics -->
            - var src = 'https://www.googletagmanager.com/gtag/js?id=' + gaTrackingId;
            script(async src=src)
            script.
                window.gaTrackingId = '#{gaTrackingId}';
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', window.gaTrackingId, {
                    'page_title' : 'Intro'
                });

        block styles
            link(rel="stylesheet", href='omatalous/public/core.min.css')

        - var src = 'https://cdn.matomo.cloud/<mySite>.matomo.cloud/container_<myContainer>.js'
        script(async src=src)
        script.
            var _mtm = window._mtm = window._mtm || [];
            _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src='https://cdn.matomo.cloud/<mySite>.matomo.cloud/container_<myContainer>.js'; s.parentNode.insertBefore(g,s);

How can I get rid of this error message ? Edit: Console logs from Chrome: enter image description here

Solution

  • Found the solution from here: https://content-security-policy.com/script-src/. So I just needed to copy the matomo script into a file and insert https://mySite.matomo.cloud into this already existing string: connectSrc: "'self' https://www.google-analytics.com https://stats.g.doubleclick.net https://<mySite>.matomo.cloud"