-
Notifications
You must be signed in to change notification settings - Fork 371
FAQs
Adal uses iframes to renew tokens silently in the background. AAD returns the token back to the redirect_uri specified in the token request (this redirect_uri must be registered with AAD). Since the response is a 302, it results in the html corresponding to the redirect_uri getting loaded in the iframe. Usually, it's the app's root/default page. This causes an app's reload. In other cases, if the app's root page requires authentication, it might lead to nested iframes or xframe deny error.
Since, adal cannot cancel the 302 issued by AAD, it cannot prevent the redirect_uri from getting loaded in the iframe. But, there are workarounds for this that one can use to avoid the entire app reloading again or other errors caused because of this:
-
Specify a different html for the iframe:
Set
redirect_uriproperty on config to a simple page, that does not require authentication. You have to make sure that it matches with theredirect_uriregistered in AAD portal. This will not affect user's login experience as Adal saves the start page when user begins the login process and redirects back to the exact location after login is completed.Here is an example of template html you can use. You will need to make some modifications for this to work with your specific app:
`
<html ng-app="todoApp">
<body>
<script src="../../App/Scripts/angular.js"></script> //replace this with the path to angular.js
<script src="../../App/Scripts/adal.js"></script> //replace this with the path to adal.js
<script src="../../App/Scripts/adal-angular.js"></script> //replace this with the path to adal-angular.js
<script type="text/javascript">
angular.module('todoApp', ['AdalAngular'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
adalProvider.init(
{
clientId: 'clientid', // replace this with your app's client id
},
$httpProvider
);
}]);
console.log("frame loaded");
</script>
</body>
</html>
`
- Conditional initialization in your main app.js file: If your app is structured similar to our sample single-page app where there is one central Javascript file (app.js in the sample) that defines the app's initialization, routing and other stuff, you can use an if...else based on whether the app is loading in an iframe or not. Something like this:
`
'use strict';
if (window !== window.parent) {
angular.module('todoApp', ['AdalAngular'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) {
adalProvider.init(
{
clientId: 'clientId',
},
$httpProvider
);
}]);
console.log("Frame loaded");
}
else {
// existing code
}
`
Q2. Adal goes into infinite loop when renewing token and create nested iframes. How can I resolve it?
The root cause for this is same as Q1. Please try one of the solutions suggested above.
Q3. I get this error "Refused to display ... in a frame because it set 'X-Frame-Options' to 'DENY'. What can I do?
The root cause for this is same as Q1. Please try one of the solutions suggested above.