Passing Azure AD authorization token from the container Web app into the embedded (iFrame) one

Question

I have:

Web application with configured Azure authentication (Javascript with adal.js)
Second application that is embedded into the first one as an iFrame (Javascript)
Second application must be able to call another WebAPI with Azure Authentication deployed to Azure (possibly to another domain).

Question: is it possible to get an AAD authorization token (from the first (container) app into the second one? If yes, any guides/examples would be greatly appreciated.

score 2 · Answer 1 · answered Oct 27 '16 at 02:44

We can communicate two windows from local using Window.postMessage method. Below is a simple sample to simulate the process to acquire the token from parent page. You can modify it to verify the domain based on the security consideration:

ContainnerPage1.Html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <iframe src="InnerPage.html"></iframe>
    <script>
        var token = "abc";
        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {
            if (event.data === "accquireToken")
                event.source.postMessage(token,"*");
        }

    </script>
</body>
</html>

InnerPage.Html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>  

    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event) {
        alert(event.data)
    }

    function accquireToken() {
        window.parent.postMessage("accquireToken","*");
    }

    </script>

    <input id="Button1" type="button" value="Accquire Token" onclick="accquireToken()" />
</body>
</html>

Passing Azure AD authorization token from the container Web app into the embedded (iFrame) one

1 Answers1