Blocked script execution error when embedding <iframe> in CesiumJS InfoBox (version 1.131.0)

CesiumJS
1

Hello,

I’m developing a digital twin application using CesiumJS and I’m facing a persistent issue with the InfoBox security. I’m trying to display external content within the InfoBox using an <iframe>, but I keep getting the following error in the console:

Blocked script execution in '...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

Context Details:

  • CesiumJS Version: 1.131.0

  • Goal: Display content from an external URL (e.g., a dashboard or a YouTube video) inside an InfoBox that appears when a pin is clicked.

  • Implementation: I am creating an entity (pin) and setting its description property with HTML that contains an <iframe>.

Attempts to Fix: I have tried several solutions based on the documentation and community discussions, but none have worked:

  1. Cesium.Viewer Configuration: I added an infoBox property to the viewer configuration to explicitly allow scripts.

    JavaScript

    const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: {
        sanitize: false,
        sandbox: "allow-scripts allow-same-origin allow-popups"
    },
    // ... other configurations
});

    This did not resolve the issue.

  2. Adding the sandbox Attribute Directly to the <iframe>: I tried adding the sandbox="allow-scripts allow-same-origin allow-popups" attribute directly to the <iframe> tag within the HTML string for the entity’s description.

    HTML

    <iframe src="..." sandbox="allow-scripts allow-same-origin allow-popups"></iframe>

    This solution also did not work, which leads me to suspect that the main InfoBox iframe itself is blocking the scripts, not the iframe I created.

My Questions:

Is there a definitive way to configure the InfoBox so that an embedded iframe can run scripts correctly? Is there a configuration change or a method I might be missing? Are there any other security limitations of Cesium or modern browsers that I should be aware of?

I would greatly appreciate any advice or solutions from the community. Thank you very much!

2

Hi @Muhammad_Nizar,

I’m still not entirely sure what you’re trying to achieve but why do you need to use an <iframe> with the InfoBox? Here’s a sandcastle example that modifies the InfoBox simply to display external content, as you seem to want to do.

Alternatively, you could always define your own UI element if InfoBox is too restrictive. The @cesium/widgets package is mostly intended to be for fast start-up, but you’re welcome to design your own UI components.

Side note: I don’t see any sanitize or sandbox fields in the InfoBox (or InfoBoxViewModel) docs, so I think those fields aren’t doing anything at all.

Best,
Matt