如何修改Figma插件iframe中的CSP frame-ancestors配置？

问题根源 #

你的自有域名https://myHostname.com的CSP配置里设了frame-ancestors 'none'，这个规则会禁止任何页面把它嵌入iframe，而Figma插件的UI本身就运行在Figma的iframe环境里，所以触发了这个限制。

具体解决办法 #

• 修改自有域名的CSP规则
  去你的服务器、CDN或者托管平台的安全设置里，找到Content-Security-Policy的frame-ancestors配置项，改成允许Figma相关域名嵌入：

  frame-ancestors https://*.figma.com https://*.figmausercontent.com;
  

  要是需要同时允许自身域名嵌入，就改成：

  frame-ancestors 'self' https://*.figma.com https://*.figmausercontent.com;
  

• 换用Figma OAuth跳转方案（无需修改CSP）
  要是暂时改不了服务器配置，别在插件UI的iframe里重定向，改用figma.openURL('https://myHostname.com/login')打开新浏览器标签页做授权：

  1. 插件里调用figma.openURL打开你的授权页面
  2. 授权完成后，把token或者授权状态通过自定义协议、或者带参数的回调页面传递给插件
  3. 插件拿到授权信息后完成身份校验

• 确认插件UI的配置参数
  检查figma.showUI的调用参数，比如sandbox如果设了allow-top-navigation，确保重定向权限没问题，但核心还是自有域名的CSP限制，优先改CSP最直接。

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