How to Implement OpenID Connect Authentication Flow Inside of an iFrame

Goran Lisak
Nerd For Tech
Published in
3 min readApr 2, 2020

--

Implementing authentication inside of an iframe seems very convenient and user-friendly at first, but it is often discouraged due to security risks. A lot of popular authentication providers will not even render the authentication page inside of an iframe, but still there are providers who will allow the login flow to be implemented inside of an iframe and use-cases in which it is acceptable.

In this article I will mostly focus on technical implementation and not the fact weather you should avoid iframe or not. We will cover two main objectives in this article:

1. How to display authentication page inside of an iframe
2. How to break out of an iframe after successful authentication

The starting point

I’m writing this article as an extent to my previous article How To Implement OpenID Authentication with openid-client and Passport in Node.js

I will try to be very general when it comes to implementation, so even if you are using a different technology, you should be able to follow along.

How to display authentication page inside of an iframe

--

--