I have a need to load an iframe from an external website once Okta authentication is successful.
How do I get here?
We have a web dashboard from a 3rd party provider which an access is filtered by IP addresses and no other authentication mechanism are possible. So I am thinking of standing up an IIS server with a public IP and use this IP to allow IIS server and load this dashboard as an iframe on IIS server. We would like the user to sign on Okta first before iframe should load from the same IIS page.
Issue 1:
With my limited coding knowledge, I have hard time figuring out where to insert iframe code in index.html page. A logical place to load an iframe would be after a successful Okta sign on, but every time I put any sort of html code in if statements, entire okta logon widget get disappeared. So I would like to be able to display iframe of the external website after a successful logon or if a logon session is still valid for logon OKTA users. I need help where to insert iframe.
Issue 2:
Is there a way to enforce MFA with sign-in widget? Or I can require MFA on the app itself and enforce it from there?
Thank you for any pointer and direction that I can try.
Going to help answer some of your issues to the best of my abilities:
Issue 1:
You’ll want to load your iFrame after the user successfully authenticates (+ MFA verification). In this tutorial, it would be replacing this line of code with your iFrame instead: document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in! :)";
Issue 2:
Yes MFA verification is built onto the sign-in widget, you just need to ensure your Sign On Policies reflect the user logging in.
Given I have a very narrow view of the architecture, but I figured it might be worth noting that iFrames are loaded from client-side, so the IP is going to register from the user-agent. You would probably need a reverse proxy and validate the authorization on the reverse proxy.
Thank you for your input. When you say replace, are you suggesting removing the line that you mentioned with something like ? I might need to add additional html tags before and after the iframe. I tried inserting html codes after mentioned line, but doing so always make the auth. widget disappeared from the page.
Iframe is loaded from the client side does make a lot of sense and therefore that approach will not help since the destination will be picking up client’s IP instead of the reverse proxy server and block it.
Now, I have gone to the route of using Apache server on Windows as a reverse proxy server. The idea is that if this works, then there might be a SAML code that I can use with Apache server for OKTA authentication.
Even with this approach, client → apache reverse proxy → protected url by IP filter, it still doesn’t work. The proxying part seems to do the job, but as soon as client received the proxied url and contents and upon refreshing of proxied contents, I got access denied error from protected URL. It seems that the client must have used it own IP when refreshing proxied contents due to the nature of the protected page where multiple timers and countdown dashboards are displayed in real time.
It looks like the client needs to be on VPN to access to protected URL which is external. Iframe approach has flaw as you mentioned and a reverse proxy can only proxy the initial page load. Since the page needs to get refreshed to show real time information, the client uses it own IP for subsequent requests and at that point the reverse proxy is no longer inline.
Thank you for putting some thoughts to it. If you can think of some other way to accomplish, I appreciate it.