I'm embedding a website I've created within an iframe in a Microsoft Teams tab (although the same issue applies outside of Teams). This website contains various content, including links to third-party sites. Some of these third-party sites, like learn.microsoft.com, use the X-Frame-Options header to prevent being embedded inside iframes. When a user clicks on one of these links from within my embedded site, Teams obviously doesn't allow the content to load and shows an 'ugly' error message. Instead I'd like to handle this gracefully, either by opening it in a new window or simply display a 'friendly' error message with a back button. However I can't find any way of doing this.
Please note the src of the iframe is being programmatically set by me upon page load (and this is to the homepage of my website), but the problem happens when the user clicks on one of the links to learn.microsoft.com.
Here's what I've tried so far:
Service Worker: I tried intercepting the fetch requests with a service worker to detect the presence of the X-Frame-Options header and handle it accordingly. However requests that are blocked due to X-Frame-Options don't seem to pass through the service worker.
Iframe Error Event: I tried to listen for the error event on the iframe, expecting it to fire when content loading is blocked. However the error event does not trigger in this case.
Is there any way to handle the 'Refused to display x.com in a frame because it set 'X-Frame-Options' to 'sameorigin'?
Embedding my website in Teams isn't supposed to replace using it normally in the browser so ideally I wouldn't have to do things that would affect the normal browser experience (like opening different origin links in a new window by default - which would get around the issue in Teams)
Any help is much appreciated!