Sending events to Google Analytics GA4 from local html

I am trying to send events to Google Analytics v4 property from a local application. I am testing with code inside a local html file (see code below).

If I deploy this file on a webhost, I can see incoming events in GA DebugView after loading page - as expected.

It does not work, if I open this file locally. If this code does not work locally, it also won't work in some electron app, right? Or have I misunderstood something? If it works on a webhost but not locally - does anything have to be configured differently in Google Analytics?

If executed locally, in developer console I get error messages like this:

Tag fired: {function: "__get", vtp_eventName: "scroll", vtp_settings: ["map", "streamId", "G-XXXXXXXXXX", "eventParameters", ["map", "percent_scrolled", ["macro", 19]]], vtp_deferrable: false, tag_id: 29}
Unallowed document protocol.
Event processing aborted.

index.html (... with replaced measurement ID as G-XXXXXXXXXX)

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX');
    </script>
    <script>
        function fire() {
            gtag('event', 'ACTION', {
                'event_category': 'CATEGORY',
                'event_label': 'LABEL',
                'value': 1
            });
        }
    </script>
</head>
<body>
    page loaded ...
    <button onclick="fire()">fire event!</button>
</body>
</html>