'mailto:' scheme doesn't work in web application embedded in MS365 web app

Question

'mailto:' scheme doesn't work in web application embedded in MS365 web app

I have created a simple HTML web page with the following code:

<a href="mailto:<your-email-address>" title="">email-address</a>

I have hosted this app on localhost. With the help of ngRok i have integrated my website on Microsoft teams tab app. Now I am able to see my application in Microsoft 365 as well. If I open app, it loads successfully. But After clicking on my email address,

I see a console error: Framing '' violates the following Content Security Policy directive: "frame-src ". The request has been blocked. Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'mailto:' must be added explicitly.

Here is my CSP on config file:

<add name="Content-Security-Policy" value="default-src: 'self'; frame-src mailto:;" />

I tried adding mailto: to frame-ancestor as well. That didn't help.

Answer 1

Hello Praveen Patel G,
This issue occurs because Microsoft 365 and Teams run your tab inside an iframe with a strict Content Security Policy (CSP) that does not allow non-network schemes like mailto: to be framed or navigated directly. Adding mailto: to your own CSP won’t override the CSP enforced by Teams or Microsoft 365.
Microsoft Teams and other M365 apps use strict Content Security Policy (CSP) settings (e.g., frame-src 'self' https: data: blob:). Because mailto: links are not allowed as navigation targets inside a sandboxed iframe, clicking them attempts to escape the iframe — which the CSP blocks.

Use microsoftTeams.executeDeepLink()

• Instead of a raw mailto: link, use the Teams SDK to trigger the mail client: microsoftTeams.app.initialize().then(() => { document.getElementById('emailLink').addEventListener('click', () => { microsoftTeams.executeDeepLink('mailto:someone@example.com'); }); }); This method works within Teams and respects its security model. Reference Document-
  https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-application?tabs=format1%2Cteamsjs-v2%2Cformat2%2Cspecific%2Cformat3%2Cformat4%2Cformat5