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>'
}); 
1 Like

Welcome, @adnroy!

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