Merge pull request #2460 from Sune1337/feature/iframe-attributes

Support custom iframe attributes for silent signin

Author: pamapa

docs/oidc-client-ts.api.md

@@ -131,6 +131,8 @@ export interface IdTokenClaims extends Mandatory<OidcStandardClaims, "sub">, Man
 
 // @public (undocumented)
 export interface IFrameWindowParams {
+    // (undocumented)
+    iframeAttributes?: Record<string, string>;
     // (undocumented)
     silentRequestTimeoutInSeconds?: number;
 }
@@ -1120,6 +1122,7 @@ export interface UserManagerSettings extends OidcClientSettings {
     accessTokenExpiringNotificationTimeInSeconds?: number;
     automaticSilentRenew?: boolean;
     checkSessionIntervalInSeconds?: number;
+    iframeAttributes?: Record<string, string> | undefined;
     iframeNotifyParentOrigin?: string;
     iframeScriptOrigin?: string;
     includeIdTokenInSilentRenew?: boolean;
@@ -1157,6 +1160,8 @@ export class UserManagerSettingsStore extends OidcClientSettingsStore {
     // (undocumented)
     readonly checkSessionIntervalInSeconds: number;
     // (undocumented)
+    readonly iframeAttributes?: Record<string, string>;
+    // (undocumented)
     readonly iframeNotifyParentOrigin: string | undefined;
     // (undocumented)
     readonly iframeScriptOrigin: string | undefined;

src/UserManager.ts

@@ -45,7 +45,7 @@ export type SigninPopupArgs = PopupWindowParams & ExtraSigninRequestArgs;
 /**
  * @public
  */
-export type ExtraSignInSilentArgs = { 
+export type ExtraSignInSilentArgs = {
     // forceIframeAuth bypasses refresh token usage and forces iframe-based silent authentication
     forceIframeAuth?: boolean;
 };
@@ -313,6 +313,7 @@ export class UserManager {
         const logger = this._logger.create("signinSilent");
         const {
             silentRequestTimeoutInSeconds,
+            iframeAttributes,
             ...requestArgs
         } = args;
         // first determine if we have a refresh token, or need to use iframe
@@ -346,7 +347,7 @@ export class UserManager {
             verifySub = user.profile.sub;
         }
 
-        const handle = await this._iframeNavigator.prepare({ silentRequestTimeoutInSeconds });
+        const handle = await this._iframeNavigator.prepare({ silentRequestTimeoutInSeconds, iframeAttributes });
         user = await this._signin({
             request_type: "si:s",
             redirect_uri: url,

src/UserManagerSettings.ts

@@ -17,6 +17,7 @@ export const DefaultPopupTarget = "_blank";
 const DefaultAccessTokenExpiringNotificationTimeInSeconds = 60;
 const DefaultCheckSessionIntervalInSeconds = 2;
 export const DefaultSilentRequestTimeoutInSeconds = 10;
+export const DefaultIFrameAttributes = undefined;
 
 /**
  * The settings used to configure the {@link UserManager}.
@@ -46,6 +47,11 @@ export interface UserManagerSettings extends OidcClientSettings {
     /** The script origin to check during 'message' callback execution while performing silent auth via iframe (default: window.location.origin) */
     iframeScriptOrigin?: string;
 
+    /**
+     * Defines additional attributes to add to iframe used by silent login.
+     */
+    iframeAttributes?: Record<string, string> | undefined;
+
     /** The URL for the page containing the code handling the silent renew */
     silent_redirect_uri?: string;
     /** Number of seconds to wait for the silent renew to return before assuming it has failed or timed out (default: 10) */
@@ -112,6 +118,7 @@ export class UserManagerSettingsStore extends OidcClientSettingsStore {
 
     public readonly silent_redirect_uri: string;
     public readonly silentRequestTimeoutInSeconds: number;
+    public readonly iframeAttributes?: Record<string, string>;
     public readonly automaticSilentRenew: boolean;
     public readonly validateSubOnSilentRenew: boolean;
     public readonly includeIdTokenInSilentRenew: boolean;
@@ -142,6 +149,7 @@ export class UserManagerSettingsStore extends OidcClientSettingsStore {
 
             iframeNotifyParentOrigin = args.iframeNotifyParentOrigin,
             iframeScriptOrigin = args.iframeScriptOrigin,
+            iframeAttributes = args.iframeAttributes,
 
             requestTimeoutInSeconds,
             silent_redirect_uri = args.redirect_uri,
@@ -178,6 +186,7 @@ export class UserManagerSettingsStore extends OidcClientSettingsStore {
 
         this.iframeNotifyParentOrigin = iframeNotifyParentOrigin;
         this.iframeScriptOrigin = iframeScriptOrigin;
+        this.iframeAttributes = iframeAttributes;
 
         this.silent_redirect_uri = silent_redirect_uri;
         this.silentRequestTimeoutInSeconds = silentRequestTimeoutInSeconds || requestTimeoutInSeconds || DefaultSilentRequestTimeoutInSeconds;

src/navigators/IFrameNavigator.ts

@@ -16,8 +16,9 @@ export class IFrameNavigator implements INavigator {
 
     public async prepare({
         silentRequestTimeoutInSeconds = this._settings.silentRequestTimeoutInSeconds,
+        iframeAttributes = this._settings.iframeAttributes,
     }: IFrameWindowParams): Promise<IFrameWindow> {
-        return new IFrameWindow({ silentRequestTimeoutInSeconds });
+        return new IFrameWindow({ silentRequestTimeoutInSeconds, iframeAttributes });
     }
 
     public async callback(url: string): Promise<void> {

src/navigators/IFrameWindow.test.ts

@@ -42,6 +42,21 @@ describe("IFrameWindow", () => {
         });
     });
 
+    describe("attributes", () => {
+        let frameWindow: IFrameWindow;
+
+        beforeAll(() => {
+            frameWindow = new IFrameWindow({ iframeAttributes: { "allow": "local-network-access *", "another_attr": "another_value" } });
+        });
+
+        it("should have custom attributes", () => {
+            const allow = frameWindow["_frame"]!.getAttribute("allow");
+            const anotherAttr = frameWindow["_frame"]!.getAttribute("another_attr");
+            expect(allow).toBe("local-network-access *");
+            expect(anotherAttr).toBe("another_value");
+        });
+    });
+
     describe("close", () => {
         let subject: IFrameWindow;
         const parentRemoveChild = vi.fn();

src/navigators/IFrameWindow.ts

@@ -5,13 +5,14 @@ import { Logger } from "../utils";
 import { ErrorTimeout } from "../errors";
 import type { NavigateParams, NavigateResponse } from "./IWindow";
 import { AbstractChildWindow } from "./AbstractChildWindow";
-import { DefaultSilentRequestTimeoutInSeconds } from "../UserManagerSettings";
+import { DefaultIFrameAttributes, DefaultSilentRequestTimeoutInSeconds } from "../UserManagerSettings";
 
 /**
  * @public
  */
 export interface IFrameWindowParams {
     silentRequestTimeoutInSeconds?: number;
+    iframeAttributes?: Record<string, string>;
 }
 
 /**
@@ -24,15 +25,16 @@ export class IFrameWindow extends AbstractChildWindow {
 
     public constructor({
         silentRequestTimeoutInSeconds = DefaultSilentRequestTimeoutInSeconds,
+        iframeAttributes = DefaultIFrameAttributes,
     }: IFrameWindowParams) {
         super();
         this._timeoutInSeconds = silentRequestTimeoutInSeconds;
 
-        this._frame = IFrameWindow.createHiddenIframe();
+        this._frame = IFrameWindow.createHiddenIframe(iframeAttributes);
         this._window = this._frame.contentWindow;
     }
 
-    private static createHiddenIframe(): HTMLIFrameElement {
+    private static createHiddenIframe(iframeAttributes: Record<string, string> | undefined): HTMLIFrameElement {
         const iframe = window.document.createElement("iframe");
 
         // shotgun approach
@@ -43,6 +45,12 @@ export class IFrameWindow extends AbstractChildWindow {
         iframe.width = "0";
         iframe.height = "0";
 
+        if (iframeAttributes) {
+            for (const attr in iframeAttributes) {
+                iframe.setAttribute(attr, iframeAttributes[attr]);
+            }
+        }
+
         window.document.body.appendChild(iframe);
         return iframe;
     }