SOLVED

Iframe-Embedded url teams Tab App not working

%3CLINGO-SUB%20id%3D%22lingo-sub-3283064%22%20slang%3D%22en-US%22%3EIframe-Embedded%20url%20teams%20Tab%20App%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3283064%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20embed%20url%20in%20Iframe%20but%20it%20giving%20me%20frame%20violation%20error.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22suvi15_0-1649767516801.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F363299iBC0B3898F5EFD19F%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22suvi15_0-1649767516801.png%22%20alt%3D%22suvi15_0-1649767516801.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EPlease%20not%20url%20already%20been%20modified%20for%26nbsp%3B%3CSPAN%3EContent-Security-Policy%3A%20frame-ancestors%20teams.microsoft.com%20*.teams.microsoft.com%20*.skype.com%20as%20per%20Tab%20Requisite%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Ftab-requirements%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Ftab-requirements%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3Eam%20i%20missing%20anything.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3ETeams%20Tab%20App%20running%20in%20teams%20environment%20host%20as%20ngrok%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3283064%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3285586%22%20slang%3D%22en-US%22%3ERe%3A%20Iframe-Embedded%20url%20teams%20Tab%20App%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3285586%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20found%20the%20solution%20for%20this%20issue...%20normally%20when%20we%20create%20Custom%20Team%20Tab%20Application%20we%20host%20the%20application%20somewhere%20lets%20say%20in%20azure%20then%20we%20need%20to%20specify%20that%20domain%20in%20frame-ancestor.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3284199%22%20slang%3D%22en-US%22%3ERe%3A%20Iframe-Embedded%20url%20teams%20Tab%20App%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3284199%22%20slang%3D%22en-US%22%3EHi%20Prasad%2C%3CBR%20%2F%3EI%20read%20article%20which%20you%20shared%20and%20it%20mentioned%20that%3CBR%20%2F%3E%22The%20frame-ancestors%20directive%20obsoletes%20the%20X-Frame-Options%20header.%20If%20a%20resource%20has%20both%20policies%2C%20the%20frame-ancestors%20policy%20SHOULD%20be%20enforced%20and%20the%20X-Frame-Options%20policy%20SHOULD%20be%20ignored.%22%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3284120%22%20slang%3D%22en-US%22%3ERe%3A%20Iframe-Embedded%20url%20teams%20Tab%20App%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3284120%22%20slang%3D%22en-US%22%3EHi%20Prasad%2C%3CBR%20%2F%3EIn%20Custom%20Team%20Tab%20Application%20in%20which%20we%20host%20application%20lets%20say%20in%20Azure...%20so%20that%20azure%20website%20url%20needs%20to%20be%20added%20in%20X-Frame-options%20or%20Team%20url%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3283112%22%20slang%3D%22en-US%22%3ERe%3A%20Iframe-Embedded%20url%20teams%20Tab%20App%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3283112%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F711566%22%20target%3D%22_blank%22%3E%40suvi-15%3C%2FA%3E%26nbsp%3B-%3C%2FP%3E%0A%3CP%3EThe%20X-Frame-Options%20HTTP%20response%20header%20can%20be%20used%20to%20indicate%20whether%20or%20not%20a%20browser%20should%20be%20allowed%20to%20render%20a%20page%20in%20a%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3E%3C%2FCODE%3E%2C%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3E%3CIFRAME%3E%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FCODE%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3Bor%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BCODE%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bobject%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FCODE%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B.%20Sites%20can%20use%20this%20to%20avoid%20clickjacking%20attacks%2C%20by%20ensuring%20that%20their%20content%20is%20not%20embedded%20into%20other%20sites.%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BFor%20More%20Information%3A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BA%20href%3D%22%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FX-Frame-Options%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FX-Frame-Options%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FX-Frame-Options%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FX-Frame-Options%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FA%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%20data-contrast%3D%22auto%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BThanks%2C%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BPrasad%20Das%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%20data-contrast%3D%22auto%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B-------------------------------------------------------%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%20data-contrast%3D%22auto%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BIf%20the%20response%20is%20helpful%2C%20please%20click%20%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B**Mark%20as%20Best%20Response**%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B%20and%20like%20it.%20You%20can%20share%20your%20feedback%20via%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BA%20href%3D%22%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fforms.office.com%2FPages%2FResponsePage.aspx%3Fid%3Dv4j5cvGGr0GRqy180BHbR7iCOpS5_b9Nqmwx43u5rtZUOThVR081SllSR05aSDQxQ0tUMDVPTVIxTi4u%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fforms.office.com%2FPages%2FResponsePage.aspx%3Fid%3Dv4j5cvGGr0GRqy180BHbR7iCOpS5_b9Nqmwx43u5rtZUOThVR081SllSR05aSDQxQ0tUMDVPTVIxTi4u%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%20data-contrast%3D%22auto%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BMicrosoft%20Teams%20Developer%20Feedback%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FA%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BSPAN%20data-contrast%3D%22auto%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3Blink.%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FSPAN%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2Flingo-body%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FIFRAME%3E%3C%2FCODE%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

Hi,

 

I am trying to embed url in Iframe but it giving me frame violation error.

suvi15_0-1649767516801.png

Please not url already been modified for Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com as per Tab Requisite https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements

am i missing anything.

Teams Tab App running in teams environment host as ngrok 

4 Replies

@suvi-15 -

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

For More Information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Thanks, 

Prasad Das

-------------------------------------------------------

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link.

Hi Prasad,
In Custom Team Tab Application in which we host application lets say in Azure... so that azure website url needs to be added in X-Frame-options or Team url?
Hi Prasad,
I read article which you shared and it mentioned that
"The frame-ancestors directive obsoletes the X-Frame-Options header. If a resource has both policies, the frame-ancestors policy SHOULD be enforced and the X-Frame-Options policy SHOULD be ignored."
best response confirmed by suvi-15 (Contributor)
Solution

Hi,

 

I found the solution for this issue... normally when we create Custom Team Tab Application we host the application somewhere lets say in azure then we need to specify that domain in frame-ancestor.