Chrome "object" tag does NOT propagate the "dragover" event to the embedded Webpage

Other events like "dragstart" and "click" do propagate even in Chrome, but not "dragover". It works perfectly well in Firefox, but unfortunately there are still people using this bugged malware-infected browser just because "it's google", so I have to find a solution. Any workarounds?

Update: it is not only "dragover" which is not forwarded to the embedded webpage, but also "dragenter", "dragleave" and "drop". However, both "drag" and "dragend" events work, so it is possible to manually dispatch the other events. But that may be not easy in some cases (e.g. I have to keep the "touch" events in mind as well and they use the same dispatch-trick), prepare for a few wasted days, "thanks" to google, unbelievable how bad it has become in the last 15 years. First their search engine became useless trash, now their browser too.

Update2: since I can't upload .zip files here, here is the minimal example which works fine in FF, but doesn't work in Chrome.

create test.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"/>
  </head>
  <body>
  <div><object data="aaa/google.html " width="900" height="700" type="text/html"/></div>
  </body>
</html>

create new folder "aaa" and enter it
create google.html inside it

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>Google</title>
  </head>
  <body id="body">
    <div id="container">
      <textarea id="txtarea" rows="5" ondragover="console.log('dragover')" ondragenter="console.log('dragenter')" ondragleave="console.log('dragleave')" ondrop="console.log('drop'); return false"></textarea>
      <div id="buttons">
        <img id="google" src="google.jpg" draggable="true"/>
      </div>
    </div>
  </body>
</html>

create google.jpg inside it, I used this one https://i.sstatic.net/MBg6CRCp.jpg

Now open test.html, open developer console and try to drag the image on the text area. What should happen and what happens in Firefox: you get all the messages ("dragenter", "dragover", "dragleave", "drop") and then since the default drop is cancelled by return, the text area remains empty. What happens in Chrome: you get NONE of the messages and the text area is filled with the address of the image, which means that NONE of the events have been forwarded to the embedded webpage!

Solution

I can't get the HTML document in the <object> to work either.

Could you use an <iframe> as an alternative?

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iY29udGVudC10eXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9VVRGLTgiLz4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgbWluaW11bS1zY2FsZT0xLCB1c2VyLXNjYWxhYmxlPW5vIi8+CiAgICA8c2NyaXB0PgogICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgZSA9PiB7CiAgICAgICAgY29uc3QgdHh0YXJlYSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0eHRhcmVhJyk7CgogICAgICAgIHR4dGFyZWEuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ292ZXInLCBlID0+IHsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcmFnb3ZlciAnOwogICAgICAgIH0pOwogICAgICAgIHR4dGFyZWEuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ2VudGVyJywgZSA9PiB7CiAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgICBlLnRhcmdldC52YWx1ZSArPSAnZHJhZ2VudGVyICc7CiAgICAgICAgfSk7CiAgICAgICAgdHh0YXJlYS5hZGRFdmVudExpc3RlbmVyKCdkcmFnbGVhdmUnLCBlID0+IHsKICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcmFnbGVhdmUgJzsKICAgICAgICB9KTsKICAgICAgICB0eHRhcmVhLmFkZEV2ZW50TGlzdGVuZXIoJ2Ryb3AnLCBlID0+IHsKICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcm9wICc7CiAgICAgICAgfSk7CiAgICAgIH0pOwogICAgPC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGltZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHNyYz0iZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQRDk0Yld3Z2RtVnljMmx2YmowaU1TNHdJaUJsYm1OdlpHbHVaejBpZFhSbUxUZ2lQejRLUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0F4TUNBeE1DSStDaUFnUEdOcGNtTnNaU0JqZUQwaU5TSWdZM2s5SWpVaUlISTlJalVpSUdacGJHdzlJbTl5WVc1blpTSWdMejRLUEM5emRtYysiIGRyYWdnYWJsZT0idHJ1ZSIvPgogICAgPGRpdiBpZD0iY29udGFpbmVyIj4gICAgIAogICAgICA8dGV4dGFyZWEgaWQ9InR4dGFyZWEiIHJvd3M9IjUiPjwvdGV4dGFyZWE+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=" width="400" height="300"></iframe>

Here id the HTML document what I present in the iframe:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"/>
    <script>
      document.addEventListener('DOMContentLoaded', e => {
        const txtarea = document.getElementById('txtarea');

        txtarea.addEventListener('dragover', e => {
          e.target.value += 'dragover ';
        });
        txtarea.addEventListener('dragenter', e => {
          e.preventDefault();
          e.target.value += 'dragenter ';
        });
        txtarea.addEventListener('dragleave', e => {
          e.preventDefault();
          e.target.value += 'dragleave ';
        });
        txtarea.addEventListener('drop', e => {
          e.preventDefault();
          e.target.value += 'drop ';
        });
      });
    </script>
  </head>
  <body>
    <img width="50" height="50" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9Im9yYW5nZSIgLz4KPC9zdmc+" draggable="true"/>
    <div id="container">     
      <textarea id="txtarea" rows="5"></textarea>
    </div>
  </body>
</html>