Outlook Add In Development- Web version error trying to display website

Question

I am developing an outlook add in which just allows me to have a website available in outlook, in the desktop app it works fine, but in the web browser, for some reason this background element is in the foreground and eventually pops up an error, I can scroll down to the website for my plugin, but how do I prevent this error from appearing?

I've prepared a demo manifest file with google as the website, google doesn't load in the web browser version, but that's not the issue I'm concerned with, my website loads fine it's just under this erroring background div.

Manifest file:
test-manifest.xml

Desktop add in, working fine:

Web version, loaded with the error:

Web version, showing what would be the functional website tucked underneath the error:

Answer 1

Hello. That overlay isn’t random. The TaskPane initialization failure it's because your SourceLocation iframe is being blocked by the browser sandbox before the runtime can complete handshake with Office.js.

Open Outlook Web → F12 → Console. You’ll likely see Refused to display in a frame because it set X-Frame-Options to "sameorigin". That confirms the remote site (like Google) forbids iframe embedding.

The target site must explicitly allow embedding in Outlook’s iframe. Add this header to your web server response: Content-Security-Policy: frame-ancestors https://outlook.office.com https://outlook.live.com https://*.office365.com; Without it, Outlook Web sees the iframe as denied and raises the “Something went wrong” error you see.

Also, the SourceLocation in your manifest must be HTTPS, publicly reachable, and contain a valid Office.js loader page (even if all you do is embed another site inside it). Never point the manifest directly at the external website (like google.com). Wrap it in your own page, e.g. https://yourdomain.com/addin/index.html, then use an inner <iframe> for your content. That keeps Outlook’s CSP handshake clean.