Using iframes with Chromium 110/120

2 min

In Chromium version 110 and later, BrightScript-JavaScript Objects are only supported within iframes in BrightSignOS version 9.0.191 or greater. This change impacts developers who have been embedding content in iframes that rely on these BrightSign-specific objects.

Apps with iframe Content Control

If your application embeds content within an iframe and you have control over the content inside that iframe, you’ll need to adjust your approach. Instead of using BrightSign objects directly inside the iframe, you should send messages from the iframe to the parent window using the postMessage() method. The parent window, which contains the BrightSign objects, can then handle these messages and execute the necessary actions.

Below is an example in which the iframe sends a message to the parent window using window.parent.postMessage(). The parent window listens for messages using the message event listener, and upon receiving a message, it can interact with the BrightSign objects to perform the desired actions.

iframe content:

<!-- Inside the iframe -->
<script>
    // Create a message to send to the parent window
    const message = { action: 'exampleCommand', data: 'example data' };

    // Send the message to the parent window
    window.parent.postMessage(message, '*'); // The '*' wildcard allows any origin. Use specific origin for security.
</script>

Parent window:

<!-- Parent window containing BrightSign objects -->
<script>
    window.addEventListener('message', (event) => {
        // Make sure to validate the origin of the message for security
        if (event.origin !== 'https://your-trusted-origin.com') {
            return;
        }

        const message = event.data;

        if (message.action === 'exampleCommand') {
            // Use the BrightSign object to perform the necessary action
            // Example: brightSignObject.someFunction(message.data);
            console.log('Received message:', message);
        }
    });
</script>

Apps Displaying Public URLs

If your app loads public URLs within an iframe, avoid using BrightSign objects within the iframe. Public content can be unpredictable and potentially insecure. Using BrightSign objects in such scenarios could expose your app to vulnerabilities if the content is compromised or maliciously altered. Avoid embedding BrightSign objects in these cases and instead use Node-style @brightsign objects whenever possible. These objects align with modern JavaScript development practices, provide enhanced security, and let you maintain compatibility and security across different environments and Chromium versions.