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

Question

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

<a href="mailto:[email protected]" title="">[email protected]</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([email protected]), I see a console error:

Refused to frame '' because it violates the following Content Security Policy directive: "frame-src ". 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

The most likely/common explanation is that you have multiple CSP headers (or meta tags) defined. Check your response headers as there might be another header that is blocking your frame. You'll need to modify/remove that header.