Outlook Mac插件iframe加载页面报错：X-Frame-Options设为DENY

我开发了一款Outlook辅助插件，通过iframe加载页面，该功能在网页端（Safari、Chrome）、Windows端（网页版及Outlook客户端）均可正常运行，但在Mac版Outlook中使用时出现报错。

代码示例 #

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Contoso Task Pane Add-in</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">

        <!-- Office JavaScript API -->
        <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
        <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
        <script src="/src/taskpane/taskpane.js"></script>
    </head>
    
    <body>
        <div style="background-color: lavender;">
            <iframe src="https://login.microsoftonline.com" title="workspace" class="iframe" style="height: 800px; width: 100%"></iframe>
        </div>   
    </body>
</html>

报错信息 #

拒绝在框架中显示'https://login.microsoftonline.com'，因为它设置了'X-Frame-Options'为'DENY'。

原因分析 #

Mac版Outlook的WebView环境对跨域框架嵌入的安全限制更严格，login.microsoftonline.com明确设置了X-Frame-Options: DENY，禁止被嵌入任何iframe。其他环境可能因浏览器/客户端的安全策略差异暂时未触发限制，但这种嵌入方式本身违反了目标站点的安全规则，存在兼容性和安全风险。

解决办法 #

1. 使用Office.js对话框API替代iframe #

Outlook插件官方推荐用Office.context.ui.displayDialogAsync方法打开外部页面，这种方式不会触发跨域框架限制，符合插件安全规范。示例代码如下：

// 在taskpane.js中添加对话框逻辑
function openLoginDialog() {
    Office.context.ui.displayDialogAsync(
        "https://login.microsoftonline.com",
        { height: 80, width: 60 },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                console.error(asyncResult.error.message);
            } else {
                const dialog = asyncResult.value;
                // 监听对话框消息和关闭事件
                dialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginResult);
                dialog.addEventHandler(Office.EventType.DialogEventReceived, handleDialogClose);
            }
        }
    );
}

function processLoginResult(args) {
    // 处理登录成功后的回调数据，比如获取授权token
    console.log("登录回调信息：", args.message);
}

function handleDialogClose(args) {
    // 对话框关闭后的清理逻辑
    console.log("登录对话框已关闭");
}

同时修改HTML，替换iframe为触发按钮：

<div style="background-color: lavender; padding: 20px;">
    <button onclick="openLoginDialog()" class="btn btn-primary">打开登录页面</button>
</div>

2. 遵循官方认证流程 #

对于微软账号登录场景，应使用OAuth2.0授权码流程，而非直接嵌入登录页面。通过插件的认证机制引导用户完成授权，既符合安全规范，也能避免跨域嵌入的限制。

内容的提问来源于stack exchange，提问作者Alejandro Gonzalez