window.postMessage fails without error message in Azure Web App

Question

window.postMessage fails without error message in Azure Web App

81 views Asked by Avery Lytle At 17 January 2024 at 19:55

I have a .NET 4.8 project with an iframe inside of a main window. We use window.postMessage so that the frame can minimize a sidebar when a specific page is loaded.

This works just fine when hosted at our local data center, but not on Azure. We migrated to Azure and have the project running in App Services.

Does anyone know of a place to start to figure out why this would be blocked?

I don't get any error messages in the console and haven't found any logs to suggest this is being blocked by CORS, a firewall, or the application gateway.

This is the code that is called to close the sidebar and the event listener:

window.postMessage("<name of function>", window.document.referrer);

$window.on("<name of function>", _bind(this.<name of function>, this));

I've tried the following without success:

window.postMessage("<name of function>", window.location.origin);

localStorage.setItem('customEvent', '<name of script>');

const parentWindow = window.parent;
parentWindow.postMessage("<name function>", window.location.origin);

I also tried adding custom headers in the Startup.cs file, as well as web.config, without success.

Thank you!

Original Q&A

There are 1 answers

**Aslesha Kantamsetti** · Answer 1 · 2024-01-19T06:37:45+00:00

I deployed a .net 4.8 webform application with an iframe in the main page to Azure App Service, and it was successful.

I used the following codes to send message and minimize the sidebar.

Default.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication20.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        .sidebar {
            width: 250px;
            background-color: #111;
            padding-top: 20px;
            color: white;
            transition: 0.5s;
            z-index: 1;
        }
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            color: #f1f1f1;
        }
        .sidebar h2 {
            text-align: center;
            transition: 0.5s;
            margin: 0;
        }
        .sidebar p {
            text-align: center;
            color: #818181;
            margin-top: 10px;
            transition: 0.5s;
            margin: 0;
        }
        #content {
            flex: 1;
            overflow: hidden;
            padding: 20px;
            transition: margin-left 0.5s;
            position: relative;
        }
        iframe {
            width: 50%;
            height: 50%;
            display: block;
        }
        button {
            bottom: 5px;
            right: 5px;
            margin: 5px;
            padding: 5px 10px; 
            font-size: 20px;
        }
        #messageOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2;
        }
        #messageContainer {
            background: white;
            padding: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>Sidebar Content</h2>
        <p>This is your sidebar content.</p>
    </div>

    <div id="content">
        <iframe id="myIframe" src="PageInIframe.aspx" onload="iframeLoaded()"></iframe>
        <div id="messageOverlay">
            <div id="messageContainer"></div>
        </div>
    </div>
    <script>
        var sidebarMinimized = false;
        function toggleSidebar() {
            if (sidebarMinimized) {
                maximizeSidebar();
            } else {
                minimizeSidebar("Message sent to iframe and sidebar minimized");
            }
        }
        function minimizeSidebar(message) {
            var sidebar = document.querySelector('.sidebar');
            var sidebarHeading = document.querySelector('.sidebar h2');
            var sidebarContent = document.querySelector('.sidebar p');
            var messageContainer = document.getElementById('messageContainer');
            var messageOverlay = document.getElementById('messageOverlay');
            var iframe = document.getElementById('myIframe');
            sidebar.style.width = "5px"; 
            sidebarHeading.style.opacity = "0";
            sidebarContent.style.opacity = "0";
            var content = document.getElementById('content');
            content.style.marginLeft = "5px"; 
            messageContainer.innerHTML = "<h2>" + message + "</h2>";
            messageOverlay.style.display = "flex";
            iframe.contentWindow.onload = function () {
                iframe.contentDocument.body.innerHTML = "<h2>" + message + "</h2>";
            };
            sidebarMinimized = true;
        }
        function maximizeSidebar() {
            var sidebar = document.querySelector('.sidebar');
            var sidebarHeading = document.querySelector('.sidebar h2');
            var sidebarContent = document.querySelector('.sidebar p');
            var messageOverlay = document.getElementById('messageOverlay');
            var iframe = document.getElementById('myIframe');
            sidebar.style.width = "250px"; 
            sidebarHeading.style.opacity = "1";
            sidebarContent.style.opacity = "1";
            var content = document.getElementById('content');
            content.style.marginLeft = "250px";
            iframe.contentWindow.restoreOriginalContent();
            messageOverlay.style.display = "none";
            sidebarMinimized = false;
        }
        function iframeLoaded() {
           console.log("Iframe loaded!");
        }
    </script> 
    <button onclick="toggleSidebar()">Toggle Button</button>
</body>
</html>

PageInIframe.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageInIframe.aspx.cs" Inherits="WebApplication20.PageInIframe" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Inside Iframe</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <h2>This is a page inside the iframe</h2>
    <script>
        var originalContent = document.body.innerHTML;
        function sendMessageAndToggleSidebar() {
            var parentWindow = window.parent;
            if (parentWindow) {
                parentWindow.postMessage("ToggleSidebar", '*');
            }
        }
        function restoreOriginalContent() {
            document.body.innerHTML = originalContent;
        }
    </script>
</body>
</html>

I successfully deployed it to the Azure App Service using Visual Studio.

enter image description here

Azure App service Output :

enter image description here

After deployment, I can see the message and sidebar minimization without any issues,

enter image description here

and I have restored the sidebar.

enter image description here

TechQA.

window.postMessage fails without error message in Azure Web App

There are 1 answers

Related Questions in ASP.NET

Related Questions in AZURE

Related Questions in IFRAME

Related Questions in AZURE-WEB-APP-SERVICE

Related Questions in POSTMESSAGE

Popular Questions

Popular Tags

Trending Questions