Outlook Add-in配置CSP后tel拨号报frame-src错误如何解决

你修改meta标签不生效的核心原因有三个：

1. Content Security Policy规则的生效优先级是HTTP响应头 > 页面meta标签，Outlook Add-in运行时默认会下发自带的CSP响应头，直接覆盖你在页面里写的meta配置，无论你改多少种meta写法都不会生效。
2. 默认CSP规则里的frame-src *通配符仅匹配http/https/ws/wss这类网络协议，不会自动匹配tel:这类自定义系统协议，必须显式声明允许。
3. 你的Add-in页面默认是嵌套在Outlook的iframe中运行的，直接点击a标签默认会在iframe上下文里尝试加载tel链接，这才会触发frame-src的拦截校验。

1. 配置HTTP响应头形式的CSP规则 #

本地调试用Visual Studio自带的IIS Express时，直接修改项目根目录的web.config文件（没有则新建），在配置中添加自定义CSP响应头，不要在页面meta里写CSP规则：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://appsforoffice.microsoft.com; style-src 'self' 'unsafe-inline'; frame-src 'self' tel:;" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

注意：配置里必须显式加入Office.js的CDN域名https://appsforoffice.microsoft.com到script-src规则中，否则会拦截Office依赖库的加载。

2. 修复现有代码问题 #

你贴的JS代码存在语法错误，且缺少必要的链接配置，修正后的初始化逻辑如下：

// Global variables
let item;
let myEntities;

// The initialize function is required for all add-ins.
Office.initialize = function () {
    const mailbox = Office.context.mailbox;
    // Obtains the current item.
    item = mailbox.item;
    // Reads all instances of supported entities from the subject 
    // and body of the current item.
    myEntities = item.getEntities();
    
    window.addEventListener('DOMContentLoaded', (event) => {
        // 增加判空逻辑，避免无号码场景脚本报错
        if (myEntities.phoneNumbers && myEntities.phoneNumbers.length > 0) {
            const a = document.getElementById("tel-link");
            a.href = "tel:" + encodeURIComponent(myEntities.phoneNumbers[0].originalPhoneString);
            // 强制在顶层窗口上下文打开tel链接，避免iframe内加载触发CSP拦截
            a.target = "_top";
        }
    });
}

核心改动点：

• 删除了原有语法错误的孤立JSON.stringify代码行
• 增加电话号码存在性判断，避免无号码场景下脚本报错中断
• 给拨号链接添加target="_top"属性，让浏览器顶层上下文直接处理tel协议唤起拨号，不在iframe内加载链接
• 把href赋值逻辑移到DOMContentLoaded回调里，保证DOM元素加载完成后再操作，避免拿不到元素报错

3. 调试验证注意事项 #

• 修改完web.config后需要重启IIS Express，完全关闭重新打开Outlook里的Add-in面板，CSP响应头的修改必须全量刷新页面才会生效
• 不要试图用frame-src *的通配符绕过校验，如报错提示所说，*不会匹配tel这类非网络协议，必须显式写tel:到规则中

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