Can't run scripts in infobox

Hey all,

I’m sure there’s an obvious reason for this that I’m missing, but I can’t seem to run javascript inside the infobox.

Here’s an example: I’m trying to embed a youtube video in an infobox. Instead, I get a black box with an error message. Pulling open js console reveals the error: “Blocked script execution in ‘Climbing Max Patch with Chef Boyardee - YouTube’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.”

Here’s the code for the iframe inside the infobox description:

<div style="height:315px;"><iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" width=100% height="315" src="https://www.youtube.com/embed/wo5rWeeZxvo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

It looks like I set the allow-scripts attribute for the infobox itself as well:

//set attributes for infobox

  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );

I’m having the same problem with any infoboxes with iframes in the description. Notable: this worked across all browsers when I launched the project last January, and has stopped working since then. What am I missing?

1 Like

So apparently something changed about how sandboxing works and you need to trigger a page navigation in order for it to take affect. Thankfully this is a one liner. Here’s the code:

Here’s a runnable demo:: Cesium Sandcastle

And the code so it shows up if anyone searched the forum:

var viewer = new Cesium.Viewer("cesiumContainer");

// This works
viewer.infoBox.frame.removeAttribute("sandbox");

// So does this if you want to limit other things but allow scripts
//viewer.infoBox.frame.setAttribute("sandbox", "allow-same-origin allow-popups allow-forms allow-scripts");

// In both cases, you need to do this to force a reload for the change to take affect.
viewer.infoBox.frame.src = "about:blank";

viewer.selectedEntity = new Cesium.Entity({
  id: 'YouTube video',
  description: '<div style="height:315px;"><iframe width=100% height="315" src="https://www.youtube.com/embed/wo5rWeeZxvo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>'
}); 
2 Likes

Welcome, @adnroy!

Thanks so much! Huge help, it’s working as it should now.

Hi,
I want to add a link to a URL into the InfoBox. I tried:
viewer.infoBox.frame.removeAttribute(“sandbox”);
But when I click the link the website does not load and I get the error message:

Blocked script execution in [URL] because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

I inspected the infoBox and the sandbox attribute is removed but it is still not working.

@Markus_Meyer

Welcome to the community! Thank you for bringing your question to us :grinning: :rocket:

You should be able to use standard HTML to add a URL to the InfoBox. Can you please share some more details on your current implementation?

-Sam

The URL in the InfoBox is implemented as a clickable link that opens the given website in a new tab. When I use right click → open in new tab, the website is loading fine. But when I use left click the scripts of the opened website are blocked and when I inspect the website I get the already mentioned error message in the console. This happens because the link is in the infoBox which is an iframe. When I implement my own InfoBox the links work fine, but it would be better to use the original InfoBox.

@Markus_Meyer

Thank you for providing some more information. I wonder if our InfoBox spec needs to be updated. I am not sure if there is a particular reason why the URL in the InfoBox is implemented as a clickable link that opens up a new tab. In the meantime, I am glad to hear that you have found a workaround.

-Sam

To make it clear: I want the URLs to be clickable links, so I implemented the URLs as links. So it is not the problem that the URLs are links, but that these links do not work because of blocked scripts on the websites when I use the links with left click.

1 Like

@Markus_Meyer understood :+1: