How to resolve "X-Frame-Options: deny" issue during silent token refresh with iframe?

I am using silent refresh to renew the token in my application, which involves loading an iframe pointing to the Identity Server's endpoint. However, when the iframe tries to load the URL https://localhost:9443/, I get the following error in the browser console:

Refused to display 'https://localhost:9443/' in a frame because it set 'X-Frame-Options' to 'deny'.


Here is the setup I'm working with:

**Identity Server 7.0.0:** WSO2 IS running on https://localhost:9443/
**Frontend Framework:** Angular 18 with angular-oauth2-oidc for authentication
**Silent Refresh:** Using the library's built-in silentRefresh() method


this is the config :

export const authConfig: AuthConfig = {
issuer: 'https://localhost:9443/oauth2/token',
redirectUri: window.location.origin,
clientId: '6wgRGIKSFcB61WSDSsf0n1fysGIa',
dummyClientSecret : "fNksWZHkxXQMv14GZ9oVYJaYyOrEJchcFuPsurYxGloa",
strictDiscoveryDocumentValidation: false,
responseType: 'code',
scope: 'openid profile roles',
showDebugInformation: true,
silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
useSilentRefresh: true,
sessionChecksEnabled: true,
timeoutFactor: 0.75,
clearHashAfterLogin: true,
logoutUrl: 'https://localhost:9443/oidc/logout',
skipIssuerCheck: true,
};


the silent-refresh.html

<html>
<body>
<script>
parent.postMessage(location.hash, location.origin);
</script>
</body>
</html>


the service

this
.oauthService
.silentRefresh()
.then(info => console.debug('refresh ok', info))
.catch(err => console.error('refresh error', err));

Continue reading...