4,109 questions
Teams chatbot app, static tab website not loading
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(92.8, 14.000000000000002%, 18%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAH%3C/text%3E%3C/svg%3E)
Aashir Hussain
0
Reputation points
Hi, I created a chatbot application for my company. The chatbot is registered on Azure, and hosted on an EC2 Instance. It is installed on Teams, for which I created a manifest file and icons. This entire step is working.
The bot works as expected. I wanted to create a configuration page as a static tab for users to enter their creds into a page, so the credentials can be sent to the bot for pulling data (This is only for testing, and if it works we will connect our main portal for secure access). The website I created follows this page: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/configuration-page?tabs=teamsjs-v1
The website is hosted on Firebase for initial testing, as it provides a secure platform with SSL certifications and HTTPS links. The website does not load on the configuration page, and I keep getting the same errors, I will provide screenshots.
I have added the necessary domains to the CSP header, which resolved the issues stemming from my file, but not the issues that are originating from team's own files. The website loads into the console sources, so it's able to access and successfully pull the website from the link, but fails to display it in the static tab.
I will provide the website code, and screenshots of the console. If anything else is needed, please let me know.
Code:
index.txt I hope someone can help me figure out why this happening. Thank you Aashir
Microsoft Teams Development
Community Center Not monitored
46,174 questions
Microsoft Teams Microsoft Teams for business Other
10,904 questions
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(112.00000000000001, 24%, 20%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJM%3C/text%3E%3C/svg%3E)
JimmyYang-MSFT 58,641 Reputation points Microsoft External Staff2024-02-26T06:03:05.0566667+00:00 Hi @Aashir Hussain Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. According to your description, your question is not in our support scope. So I will remove teams tag from your thread. Thanks for your understanding!
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(214.4, 10%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EDR%3C/text%3E%3C/svg%3E)
Dinesh Rajagoni (Tata Consultancy Services Limi) 60 Reputation points Microsoft External Staff2024-02-29T07:31:07.0066667+00:00 Hi Aashir Hussain - Could you please ensure that the domain of your website is listed in the
validDomainsarray in your manifest file which is crucial for Teams to allow loading content from your website within the tab? Also, make sure that the Content Security Policy (CSP) headers on your website allow loading content within iframes. You may need to adjust the CSP settings to allow embedding the content in an iframe. -
Aashir Hussain 0 Reputation points
2024-02-29T16:15:53.0233333+00:00 Hi @Dinesh Rajagoni (Tata Consultancy Services Limi) thank you for your response. I have added every domain in the manifest that my webpage uses, which includes its own domain, and the domain of other services it uses. As for CSP, I initially got quite a few errors, so I added everything pertaining to Teams within the CSP. Here is the CSP code:
"key": "Content-Security-Policy", "value": "default-src 'self' teams.microsoft.com *.teams.microsoft.com teams.cloud.microsoft *.microsoft365.com *.office.com m365.cloud.microsoft outlook.live.com outlook.office.com outlook.office365.com outlook-sdf.office.com outlook-sdf.office365.com outlook.cloud.microsoft statics.teams.cdn.office.net s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net *.firebaseapp.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com https://statics.teams.cdn.office.net https://res.cdn.office.net; img-src 'self' data: statics.teams.cdn.office.net s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net; connect-src 'self' teams.microsoft.com *.teams.microsoft.com teams.cloud.microsoft *.microsoft365.com *.office.com m365.cloud.microsoft outlook.live.com outlook.office.com outlook.office365.com outlook-sdf.office.com outlook-sdf.office365.com outlook.cloud.microsoft s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net wss://*.firebaseapp.com https://jsonbin.io; frame-src 'self' teams.microsoft.com *.teams.microsoft.com statics.teams.cdn.office.net; font-src 'self' data:; child-src 'self'; form-action 'self'; object-src 'none'; base-uri 'self'; trusted-types dompurify gapi#gapi goog#html @1js/lpc-common-web#webpack @1js/midgard-bootstrapper#webpack @1js/midgard-trusted-types adaptivecards#markdownPassthroughPolicy adaptivecards#restoreContentsPolicy adaptivecards#deprecatedExportedFunctionPolicy '@1js/lpc-teams-bootstrapper#webpack' 'allow-duplicates';"If anything is incorrect here, I would appreciate any help. Thank you.
-
Dinesh Rajagoni (Tata Consultancy Services Limi) 60 Reputation points Microsoft External Staff
2024-05-16T05:38:25.1733333+00:00 Hi Aashir,
Your Content-Security-Policy (CSP) is quite comprehensive. Here’s a quick review with minor adjustments for clarity and best practices:
"key": "Content-Security-Policy", "value": "default-src 'self' teams.microsoft.com *.teams.microsoft.com *.microsoft365.com*.office.com outlook.live.com outlook.office.com outlook.office365.com outlook-sdf.office.com outlook-sdf.office365.com outlook.cloud.microsoft statics.teams.cdn.office.net s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net *.firebaseapp.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com https://statics.teams.cdn.office.net https://res.cdn.office.net; img-src 'self' data: statics.teams.cdn.office.net s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net; connect-src 'self' teams.microsoft.com *.teams.microsoft.com *.microsoft365.com *.office.com outlook.live.com outlook.office.com outlook.office365.com outlook-sdf.office.com outlook-sdf.office365.com outlook.cloud.microsoft s-ring.msedge.net fpc.msedge.net odinvzc.azureedge.net wss://*.firebaseapp.com https://jsonbin.io; frame-src 'self' teams.microsoft.com *.teams.microsoft.com statics.teams.cdn.office.net; font-src 'self' data:; child-src 'self'; form-action 'self'; object-src 'none'; base-uri 'self'; trusted-types dompurify gapi#gapi goog#html @1js/lpc-common-web#webpack @1js/midgard-bootstrapper#webpack @1js/midgard-trusted-types adaptivecards#markdownPassthroughPolicy adaptivecards#restoreContentsPolicy adaptivecards#deprecatedExportedFunctionPolicy '@1js/lpc-teams-bootstrapper#webpack' 'allow-duplicates';"Your CSP is well-configured for your needs. Ensure to test it thoroughly to catch any issues with content loading. Please let us know if you're still facing the issue.
Sign in to comment
Sign in to answer