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

Eben-Ezer Tres MSFT I have tried your suggestion by adding 'self' to frame-src. That didn't help.

Here is my config file details:

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

<system.webServer> 

	<httpProtocol> 

        <customHeaders> 

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

        </customHeaders> 

    </httpProtocol> 

    <defaultDocument> 

        <files> 

            <remove value="index.htm" /> 

            <remove value="iisstart.htm" /> 

            <remove value="default.aspx" /> 

            <remove value="Default.asp" /> 

            <remove value="Default.htm" /> 

        </files> 

    </defaultDocument> 

</system.webServer> 

</configuration>

I tried deleting, publishing and reinstalling the app. Also i tried restarting the IIS. Nothing worked.

Answer 2

Hi @Praveen Patel G

Dear Chris Bears.  Good day! Thank you for posting to the Microsoft Community. We are happy to help you!Given your question about creating a HTML web page, and the current forum channel you're posting focuses on Microsoft 365 for Business, especially Exchange Online builds. Therefore, in order to get further dedicated technical support and assistance, to help you better and not waste more time, it is recommended to publish a new thread on the Microsoft Q&A forum with a Microsoft 365 tag https://learn.microsoft.com/en-us/answers/tags/ . Dedicated support engineers there specialize in work related to HTML and will provide you with further assistance with your current goals/deployments.

In the same time i have do some research also via this link: https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow 

i think try to modify your CSP directive to explicitly allow the "mailto:" scheme. Here's what you can do:

1. Update your CSP header value to include the "mailto:" scheme. You can adjust your CSP directive to allow the "mailto:" scheme as follows:

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

By adding mailto: to the frame-src directive, you explicitly permit the loading of resources using the "mailto:" scheme within frames.

2. Ensure that your CSP settings are correctly applied within your application configuration files. Make sure that the updated CSP header is being delivered by your web server to the client's browser.
3. After making these changes, restart your web server, refresh your web application in the Microsoft Teams tab, and then try clicking on the email address link. This should allow the "mailto:" scheme to work within your web application without triggering the CSP violation error.

By explicitly adding the "mailto:" scheme to the CSP directive, you are instructing the browser to allow resources with that scheme to be loaded within your application. if the above step does not work, please contact the dedicated team, they have more knowledge and focus on that kind of issue.

It is recommended to publish a new thread on the Microsoft Q&A forum with a Microsoft 365 tag https://learn.microsoft.com/en-us/answers/tags/ . Dedicated support engineers there specialize in work related to HTML and will provide you with further assistance with your current goals/deployments.  Thanks in advance for your understanding! Your patience and cooperation will be highly appreciated. Hope you all the best! Sincerely,

Eben | Microsoft Community Moderator

Answer 3

Hello Praveen Patel G

Good day. Thank for posting in the community.

We've received your query and you can expect to receive response from one of our community moderator accordingly.

At this point, we appreciate your patience and cooperation. Thank you.

Sincerely,

Community moderator