Teams tab app not loading content correctly in desktop client

Question

We are developing a custom Microsoft Teams tab app using an Azure-hosted web application.

The app loads correctly in the Teams web client, but in the desktop client it only shows a blank screen. The app manifest is valid, and the domains are listed in the validDomains property.

F12 developer tools show an error related to CSP (Content Security Policy), but the same app works fine in the web client.

Answer 1

Hi Andrus Shirnavana,

Thank you for posting your question in the Microsoft Q&A forum. 

Based on your description, I understand that your custom Teams tab app (web-based) works in the web client but shows a blank screen in the desktop client. After conducting research, here are some insights I’ve gathered that may help clarify the issue and guide you toward a resolution:

1. CSP and X-Frame-Options headers
   The Teams desktop client enforces stricter iframe rules than the web client. If your Azure-hosted app does not explicitly allow embedding from Teams domains via CSP headers, it may fail to render.
   You should include a Content-Security-Policy header with the frame-ancestors directive that allows:

      frame-ancestors 'self' https://teams.microsoft.com https://*.cloud.microsoft;
   

   This configuration is documented in Requirements for Building Tabs.
   Avoid using X-Frame-Options: DENY or SAMEORIGIN, as these will block iframe embedding in Teams.
2. Login pages inside iframe are blocked
   Microsoft security policy disallows rendering login pages (e.g., login.microsoft.com) inside iframes to prevent clickjacking. This is a known cause of blank screens in the desktop client even when authentication succeeds.
   Recommended workaround: Use SSO for tab app. You can see this article for more information: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-overview
3. Nested iframes are unsupported
   Teams tab apps themselves are loaded as iframes. If your app contains another iframe inside it (nested iframe), it may not render properly.
   This behavior is clarified in this thread discussion: https://learn.microsoft.com/en-us/answers/questions/1180852/loading-a-web-app-as-iframe-in-teams-tab-applicati
4. Workaround
   If iframe embedding isn’t feasible due to policy restrictions, you can guide users to open the tab in a browser using the “Open in browser” banner.
   This workaround is documented in Websites not loaded in new Teams.

Let me know if you’d like help reviewing your manifest or CSP headers. Happy to assist further!

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".      

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.