Opening hyperlinks from KML file to YouTube freezes, but OK with right button

<Placemark>
<name>Loch</name>
<description><![CDATA[
<a target=video href="https://www.youtube.com/watch?v=qZY8RYvksnM">YouTube</a>
]]></description>
<Point><coordinates>-3.7073069,57.168615</coordinates></Point>
</Placemark>

If I right click on this hyperlink and “open in new window” it’s fine. If I left click on it YouTube opens but freezes, it never completes loading. Closest cause I could find is this which relates to ESRI and also Google Earth but has the same symptoms:

It seems this is the problem below, how can I fix it?


Cookie “SIDCC” will be soon rejected because it has the “SameSite”
 attribute set to “None” or an invalid value, without the “secure” attribute. 
To know more about the “SameSite“ attribute, read 
https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

I’ve realised that I can host my KML file on CesiumION, this doesn’t fix the problem. But if I could also host my small html file on Cesium it would as there’s no direction to a different website. Is that possible?

Hi @DataVerse,

Thanks for the information. Yes, my first suggestion would be to try hosting the dataset on Cesium ion. However, I am still somewhat unclear on what issue you are facing here and how it relates to CesiumJS. Can you provide instructions on how I can reproduce this error?

-Sam

Go to Terra-DV 3D Display and click any of the marker flags. Click on the “video” hyperlink and it’ll fail. Right click / open in new window and it works.

It’s a problem with a script from out site running on your site calling a third site and getting into cookie problems as a result.

Hosting the KML file on Cesium ION doesn’t help. But if I could host our html file there it might. But I don’t think that’s possible.

Any suggestions most welcome :slight_smile:

Hi @DataVerse,

I went through the steps that you outlined and did not receive any errors. I was able to successfully open your application, select a marker, and view the video. As I mentioned above, I am still unclear how this error relates to the CesiumJS application. The text boxes that you are displaying are written in standard HTML and CSS, so they should be simple to modify (add stylized texts, links, etc.).

Best,
Sam

That’s interesting. Can I ask what browser you used? I’ll have a few friends try it. Thanks for helping.

Were you running this on a computer on the Cesium domain? It’s still not working for me.

A bit more info. We have verified beyond doubt that Youtube isn’t running because JavaScript is disabled in the new browser window. If we direct the hyperlink on our KML file to a simple test file Terra-DV we can see that JavaScript is disabled.

We believe this to be a Cesium issue as Cesium is somehow processing the hyperlink in such a way that JavaScript is disabled on the new webpage. I’ve no idea how that’s even possible, but it’s what’s happening. Right clicking on the link and opening in a new window is fine.

My colleague has the same problem and we’ve both tried multiple browsers, he’s even on a Mac and I’m on Windows.

Any help you can offer is much appreciated. I’ve been trying to sort this for several days now as it’s a bit of a roadblock for our further development.

My friend suggested it might be due to our having a free rather than commercial licence. We intend to upgrade once development is complete. But I didn’t think this was the case.

Hi @DataVerse,

I am using Google Chrome on a Windows 11 laptop.

CesiumJS is a JavaScript library, so it does seem strange that we would somehow be disabling JavaScript.

To the best of my knowledge, this has nothing to do with the issue that you are facing.

Best,
Sam

Hi Sam,
I’m Dave and I am working with John @Dataverse
I have tried with Google Chrome on a windows 11 test VM Chrome Version 100.0.4896.127 (Official Build) (64-bit). With the original code I still see the issue. I have a workaround (somewhat ugly) which now seems to work in latest and older versions of Edge, Chrome, Firefox and Safari. I note that the information popup is displayed in your code inside an iframe with class cesium-infoBox-iframe. This iframe has a sandbox attribute set to sandbox=“allow-same-origin allow-popups allow-forms”. My understanding of the issue is that it is probably iframe sandbox related and opening another window from inside the sandbox is somehow inheriting the sandbox restrictions! I should point out that this is a difficult topic to research and all browsers differ slightly in their behaviour with Safari perhaps differing the most!! I will show you my workaround… Its basically to intercept the anchor clicks in the iframe and to handle them programatically BUT also to modify the sandbox properties on the iframe CRUCIALLY it seems adding in particular 2 flags: “allow-scripts allow-popups-to-escape-sandbox” the 2nd of which I understand is a new(ish) one! Here’s my workaround code:

window.onload = function() {
        let ifr = document.querySelector('.cesium-infoBox-iframe');
        if (ifr) {
            ifr.setAttribute("sandbox", "allow-same-origin allow-popups allow-forms allow-scripts allow-popups-to-escape-sandbox");  
           
            var hooked = false;
            let observer = new MutationObserver(function(mutationsList) { 
                if (ifr.contentWindow.document.body) {
                    if (!hooked) {
                        hooked = true;
                        ifr.contentWindow.document.body.addEventListener('click', function (event){ 
                            let a = event.target.href;
                            if (!a) {
                                return;
                            }
                            event.preventDefault();
                            setTimeout(function() {
                                window.open(a, "tdvvideotab");
                            }, 5);
                        });
                    }
                }
                else {
                    hooked = false;
                }
            });
            observer.observe(ifr, { childList: true, subtree: true, attributes: true });               
        }
    };