Running iframe-based flows in the OAuth 2.0 Flow Simulator

Traditionally, OAuth 2.0 applications rely on iframes to silently obtain tokens in the background while the application remains running in the foreground. With the ongoing efforts to block third-party cookies, these flows become increasingly unreliable. Use the new version of the Flow Simulator to visualize the effects of third-party cookie blocking in Brave and Safari.

24 November 2020 OAuth 2.0 & OpenID Connect OAuth 2.0, OIDC, Online Courses, Flow Simulator

The new version of the Flow Simulator supports demo scenarios and assignments for the Mastering OAuth 2.0 and OpenID Connect course. This article gives a short walkthrough on how to use the Flow Simulator to see the effects of third-party cookie blocking in the Brave browser.

Setting the scene

The effect of third-party cookie blocking only becomes visible when the browser already has an existing session with the Security Token Service (STS). To ensure that this is indeed the case, first run a full Authorization Code flow, where the Flow Simulator exchanges an authorization code for the requested tokens. If that works as expected, we are ready to inspect an iframe-based flow.

Running an iframe-based flow

Version 0.3.0 of the Flow Simulator supports running a flow in an iframe and listening for the result with the Web Messaging API. Setup a new flow, and make sure you enable the toggle to run the flow in a frame. For now, make sure you leave the user interaction parameter (prompt) unset..

With that configuration, initialize the flow and move to the second step. As you can see, the second step is stuck waiting for a response. If you click the button to display the frame, you will probably see an error page from the STS. That’s because we did not instruct to avoid any user interaction on this flow.

Running a silent flow in an iframe

Let’s do it right this time. Start a new flow with the same settings and configure the user interaction parameter with the value none. This instructs the STS to return a result or error message without displaying any pages.

As you can see below, the second step of the flow returns an error message, stating that there was no active session. That’s because this example is from the Brave browser, which blocks third-party cookies. To verify that, you can run a new top-level flow without using an iframe, which will carry cookies and reuse your existing session.

For comparison, the screenshot below illustrates the result of the same scenario executed in Google Chrome. As you can see here, the silent flow in the iframe works as intended because Chrome does not block third-party cookies (yet).

Summary

The new version of the Flow Simulator now supports running flows in an iframe. This tool is perfect for demonstrating the consequences of third-party cookie blocking on silent Oauth 2.0 flows.

To learn more about OAuth 2.0 and OpenID Connect, check out the Mastering OAuth 2.0 and OpenID Connect course.