Ensure that you adhere to the following prerequisites while building your Teams personal and channel or group tab:
Allow your tab pages to be discovered in an iFrame, using X-Frame-Options and Content-Security-Policy HTTP response headers.
- Set header:
Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com
- For Internet Explorer 11 compatibility, set
- Alternately, set header
X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. This header is deprecated but still accepted by most browsers.
- Set header:
Login pages don't render in iFrames, as a safeguard against clickjacking. Your authentication logic needs to use a method other than redirect. For example, use token-based or cookie-based authentication.
It is recommended that you set the intended use for your cookies rather than rely on default browser behavior. For more information, see SameSite cookie attribute.
Browsers same-origin policy restriction prevents webpages from making requests to different domains than the served web page. So, you can redirect the configuration or content page to another domain or subdomain. Your cross-domain navigation logic needs to allow the Teams client to validate the origin against a static
validDomainslist in the app manifest when loading or communicating with the tab.
Style your tabs based on the Teams client's theme, design, and intent. Tabs work best when they're built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location.
app.initialize(), otherwise your page will not be displayed.
If you choose to have your channel or group tab to appear on Teams mobile client, the
setConfig()configuration must have a value for the
Microsoft Teams tab doesn't support the ability to load intranet websites that use self-signed certificates.
Tools to build tabs
|Microsoft Edge (recommended) or Google Chrome||A browser with developer tools.|
|Visual Studio 2019, ASP.NET and web development, or .NET Core cross-platform development workload||.NET. You can install the free community edition of Visual Studio 2019.|
|Git||Git to use the sample apps repo from GitHub.|
|Microsoft Teams||Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place.|
|ngrok||Ngrok is a reverse proxy software tool. Ngrok creates a tunnel to your locally running web server's publicly available HTTPS endpoints. Your server's web endpoints are available during the current session on your computer. When the computer is shut down or goes to sleep, the service is no longer available.|
|Developer Portal for Teams||Web-based portal to configure, manage, and distribute your Teams app including to your organization or the Teams store.|
Build your Teams tab
Now let's build your tab. But first select your choice of tab to build:
Submit and view feedback for