'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.