Outlook addin "Refused to display ?? in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'"

[DunhamGitHub]

Note: This template is only for reporting bugs about samples in this repo. If you have a product bug to report about Office web Add-ins, please submit the issue at https://github.com/OfficeDev/office-js/issues. This will help us respond to your issue faster.

(DELETE THIS PARAGRAPH AFTER READING)

URL of sample

URL linking to the sample that has the bug.

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Goto your https://outlook.office365.com/mail/
2. Enter https://aka.ms/olksideload to sideload addins
3. Add manifest.xml containing task pane .html page
4. Open said addin

Expected behavior

No problem loading contents of an external .html file

Screenshots

Actual behavior

If applicable, add screenshots to help explain your problem.

Environment

• Platform [PC desktop, Mac, iOS, Office Online]: ______
• Host [Excel, Word, PowerPoint, etc.]: ______
• Office version number: ______
• Operating System: ______
• Browser (if using Office Online): ______

Additional context

Add any other context about the problem here.

[AlexJerabek]

Hi @DunhamGitHub,

Thank you for reporting this. @exextoc, could you please take a look?

[AlexJerabek]

Also, I'm going to move this to the office-js repo, where issue that aren't specific to samples are tracked.

[Swathy-Mothilal]

@DunhamGitHub Hey, thanks for reaching out. Could you please add more specific details of the scenario? Which platform and browser are you facing this issue in?

From the description, the error message you're encountering — "Outlook add-in 'Refused to display ?? in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'" — indicates that the web page or resource you're trying to load within an Outlook add-in cannot be embedded in an iframe due to the X-Frame-Options HTTP header being set to SAMEORIGIN. This header is preventing the page from being displayed unless it is hosted on the same domain as the page trying to display it. To resolve this issue, you can adopt the Content-Security-Policy (CSP) header with frame-ancestors to define which domains are allowed to embed your page.

For example, Add this header to your server response:

Content-Security-Policy: frame-ancestors 'self' https://outlook.office.com;

This will allow only your add-in (or the specified domain) to load content in an iframe. If you have multiple domains that need access, you can list them separated by spaces.

[DunhamGitHub]

@DunhamGitHub Hey, thanks for reaching out. Could you please add more specific details of the scenario? Which platform and browser are you facing this issue in?

From the description, the error message you're encountering — "Outlook add-in 'Refused to display ?? in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'" — indicates that the web page or resource you're trying to load within an Outlook add-in cannot be embedded in an iframe due to the X-Frame-Options HTTP header being set to SAMEORIGIN. This header is preventing the page from being displayed unless it is hosted on the same domain as the page trying to display it. To resolve this issue, you can adopt the Content-Security-Policy (CSP) header with frame-ancestors to define which domains are allowed to embed your page.

For example, Add this header to your server response:

Content-Security-Policy: frame-ancestors 'self' https://outlook.office.com;

This will allow only your add-in (or the specified domain) to load content in an iframe. If you have multiple domains that need access, you can list them separated by spaces.

I have set following in /etc/httpd/conf/httpd.conf

Header Always Set Content-Security-Policy "frame-ancestors 'self' https://outlook.office.com;"

I can load the Addin now.

Does that give my whole environment the same protection as my previous setting Header Always Append X-Frame-Options SAMEORIGIN? ...Only allowing https://outlook.office.com to load it into an iFrame?

[whoanuragverma]

Great to hear that you can load your addin now.

Yes, using the Content-Security-Policy header with the frame-ancestors directive provides the same protection as the X-Frame-Options SAMEORIGIN header, with additional flexibility. By specifying frame-ancestors 'self' https://outlook.office.com;, you are allowing your content to be embedded only by your own site and by https://outlook.office.com in an iframe. This effectively prevents other sites from embedding your content in an iframe.

You can read more here: CSP: frame-ancestors

[DunhamGitHub]

Today it does not work anymore!

Httpd setting: Header Always Set Content-Security-Policy "frame-ancestors 'self' https://outlook.office.com;"

Safari: Refused to load https://www... because it does not appear in the frame-ancestors directive of the Content Security Policy.
Firefox: Content-Security-Policy: The page’s settings blocked the loading of a resource (frame-ancestors) at <unknown> because it violates the following directive: “frame-ancestors 'self' https://outlook.office.com/”

[whoanuragverma]

This could be happening because sometimes browsers cache CSP header. Try clearing cache or use the incognito window to test.
Also check what URL are you using to access outlook from. For example: outlook.office.com and outlook.office365.com are two different URLs and both of them should be added in your CSP policy.

[DunhamGitHub]

Seems I had to add https://outlook.office365.com to the file /etc/httpd/conf/httpd.conf:

Header Always Set Content-Security-Policy "frame-ancestors 'self' https://outlook.office.com https://outlook.office365.com;"