使用Office JS API插入内联图片触发CSP错误是否可忽略？

• 调用Office.context.mailbox.item.body.setAsync方法，传入参数{ "coercionType": "html" }插入带外部URL的内联图片时，控制台会抛出CSP错误
• 错误暂不影响实际功能：图片可正常显示在预览页，也能成功发送给收件人
• 复现场景：Windows系统Chrome浏览器打开网页版Outlook，Outlook 365桌面客户端无此错误，一次性购买版本的Office Outlook表现暂不明确

报错日志：

VM15:1 Refused to connect to 'https://loremflickr.com/cache/resized/65535_51377258275_023a2ab94b_320_240_nofilter.jpg' because it violates the following Content Security Policy directive: "connect-src blob: data: *.res.office.com *.res.office365.com *.fluidpreview.office.net *.cdn.office.net *.services.web.outlook.com *.res.outlook.com login.live.com spoprod-a.akamaihd.net shellprod.msocdn.com *.bing.com *.office.net *.office.com *.office365.com *.officeapps.live.com *.skype.com *.skypeassets.com *.spoppe.com *.onedrive.com my.microsoftpersonalcontent.com substrate.office.de *.office365-net.de *.office.de browser.pipe.aria.microsoft.com *.gateway.messenger.live.com dev.virtualearth.net *.trouter.skype.com *.trouter.io wss://*.trouter.skype.com wss://*.trouter.skype.com:443 wss://*.trouter.io:443 media.licdn.com *.facebook.com onerm.olsvc.com *.qas.binginternal.com *.qas.bing.net wss://*.qas.bing.net:443 wss://*.platform.bing.com wss://*.botframework.com:443 wss://augloop.office.com wss://*.augloop.office.com outlook.live.com graph.microsoft.com *.graph.microsoft.com graph.microsoft.de *.googleapis.com *.office.microsoft.com api.box.com api.dropboxapi.com *.users.storage.live.com www.onenote.com *.storage.msn.com asgsmsproxyapi.azurewebsites.net wss://*.pushd.svc.ms wss://*.pushs.svc.ms wss://*.pushb.svc.ms wss://*.pushp.svc.ms wss://*.svc.ms nleditor.osi.officeppe.net api.tenor.com pptservicescast.officeapps.live.com *.sharepoint-df.com *.sharepoint.com *.sharepoint.de wss://*.delve.office.com:443 wss://*.loki.delve.office.com:443 wss://*.loki.delve.office.com *.delve.office.com *.loki.delve.office.com web.vortex.data.microsoft.com *.events.data.microsoft.com *.online.lync.com *.infra.lync.com *.safelinks.protection.outlook.com wss://*.cortana.ai *.cortana.ai 'self' attachment.outlook.live.net *.adnxs.com api.taboola.com tlx.3lift.com jill.fc.yahoo.com stage-jill.fc.yahoo.com api.msn.com ris.api.iris.microsoft.com arc.msn.com wss://augloop-dogfood.officeppe.com wss://*.augloop-dogfood.officeppe.com wss://augloop-gcc.office.com wss://*.augloop-gcc.office.com".
'https://loremflickr.com/cache/resized/65535_51377258275_023a2ab94b_320_240_nofilter.jpg' because it violates the document's Content Security Policy.

错误触发原因 #

这个CSP错误是Outlook网页版的前端页面本身的安全规则限制导致的：网页版Outlook在你插入HTML内容后，会尝试在前端上下文预加载外部图片做渲染校验，但第三方图片域名不在Outlook前端允许的connect-src白名单里，所以抛出这个错误。但这个校验只是前端侧的非阻断性检查，不会限制你把带外部图片的HTML内容写入邮件正文，所以功能暂时不受影响。
桌面端Outlook 365没有这个错误，是因为桌面客户端的渲染逻辑、安全规则和网页版不同，没有预拉取外部图片的步骤。

能不能忽略这个错误？ #

• 短期可以忽略：只要微软不调整API的校验规则，你的使用方式不会出问题
• 长期存在风险：如果微软后续收紧setAsync接口的内容校验规则，把前端的CSP限制同步到接口的参数校验逻辑中，这种插入外部URL图片的方式就会直接失效。另外还有一个兼容性问题：很多用户的邮件客户端会默认拦截外部图片，导致收件人看不到你插入的图片，需要手动放行才能查看。

更稳妥的替代方案 #

如果要彻底规避风险，建议使用官方推荐的两种插入内联图片的方式：

1. 把图片转成base64编码后直接内嵌到HTML的img标签的src属性里，不需要依赖外部URL
2. 先把图片作为隐藏附件添加到邮件中，再通过cid的方式在HTML的img标签里引用附件，这种方式兼容性最好，所有邮件客户端都支持，也不会触发任何安全校验错误

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