Created attachment 414425 [details]
Duplicate events log screenshot

We noticed duplicate events being fired when securitypolicyviolation listener is being registered as the first script in the page

How to reproduce:

 Create a jsp page adding this headers to the top 
 <% response.addHeader("Content-Security-Policy", "default-src 'self' 'unsafe-inline';"); %>

 Add this listener as the first element in the head tag
    <script>
        var eventsArray = [];
        document.addEventListener("securitypolicyviolation", function(event) {
            eventsArray.push(event);
            console.warn(eventsArray);
        });
    </script>

 Add a script tag somewhere in the head that generates a violation :
 <script src="http://forbidden1.com"></script>

 Add an img element in the body that generates a violation:
 <img src="http://forbidden2.com" alt="I break the rules" />

 Create a fetch request that generates a violation, call it after page is loaded:
 fetch("http://forbidden3.com").then(noop).catch(noop);


What happens:
Script and img tags generate duplicate violatons caught by the added listener (see above), fetch violation is behaving as expected.
I attached the screenshot with events from console. Seems like it happens at DOM render time and then again at parse time but not sure.

This cannot be reproduced if console is open.
Also if events are logged duplicates do not propagate to console.
I had to push the events to the array and then to log the array.

Even though events fired 5 times I saw only one log of the events array where I saw 5 events in it where img and script violation had duplicates.
Only difference between duplicates was timestamp where one was happening at very early stage(timestamp was about 26 where the next duplicate had timestamp about 200)
This only happens on Safari 13 and 14, and is not reproducible on any other major browser. Tested on chrome, ff, edge, opera, etc...