X-Frame-Option DENY error when AAD sign-in in office add-in

Question

I'm working on build Office add-in with Adal.js for AAD integration. And my add-in requires some permissions.

When I open add-in in OneNote and try to call login from adal.js, it request login.microsoftonline.com and gives X-Frame-Option Deny error.
I think it's because office add-in running in iFrame, how can I workaround this?

login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&cl…nt-SKU=Js&x-client-Ver=1.0.13&nonce=ced03385-f1ca-4206-bb23-6c3e8338a0d2:1 Refused to display 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_…ient-SKU=Js&x-client-Ver=1.0.13&nonce=ced03385-f1ca-4206-bb23-6c3e8338a0d2' in a frame because it set 'X-Frame-Options' to 'DENY'.

Answer 1

Authenticating with OAUTH flow within an office web add-ins is a known issue.The better explanation of the problem can be found here.

Due to the popularity of clickjacking on the internet, it is common to prevent login pages from being display inside frames. The X-FRAME-Options meta tag in HTML makes it easy for providers to implement this safeguard on a widespread or domain/origin-specific basis. Pages that are not “frameable” will not load consistently in an Office add-in

Therefore you need to rely on a popup mechanism. In one word, the authentication flow will be made on a popup to avoid iFraming problems.

The link above is a little bit outdated because it states that popup is a necessary evil. Microsoft awares of this problem proposed recently the dialogAPI to overcome this problem.

Let us get back to our Adal.js problem. I believe that you should stop using adal.js because it was not meant to be used in our add-in web context. Even if they implemented a popup technique. They do not use the dialogAPI when available.

You should try to take benefit of this dialogAPI when available otherwise you will hit many problems (deactivated popup, security regions etc.).

Your best option is to implement your own flow mechanism or use Office-js-helpers as explained in this response