Google Apps Script插件File Picker与侧边栏通信相关报错咨询

问题背景 #

你开发的Google Workspace独立插件包含交互侧边栏，用户可从侧边栏唤起Google File Picker上传待处理报表，目前已实现侧边栏感知File Picker操作完成的能力，但控制台出现三个报错：

Unsafe attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://***.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.
DOMException: Blocked a frame with origin "https://###.googleusercontent.com" from accessing a cross-origin frame. at findSideBar (https://###.googleusercontent.com/userCodeAppPanel:80:18) at w0.pickerCallback [as Fb] (https://###.googleusercontent.com/userCodeAppPanel:98:11) ...
Refused to get unsafe header "X-HTTP-Status-Code-Override"
当前所有功能均正常运行，以下针对你提出的三个疑问做对应解答。

问题解答 #

1. 报错对插件运行的影响 #

所有报错均不影响现有功能正常使用：

• 第一个导航类报错：Google Workspace插件的iframe默认无顶级页面导航权限，你未用到相关导航逻辑，属于浏览器预警类报错
• 第二个跨域访问报错：你遍历window.top.frames查找侧边栏iframe时，尝试访问跨域iframe属性触发，你已经添加了try catch跳过报错帧，功能不受影响
• 第三个头信息报错：Google Picker的gapi底层请求尝试读取非允许的响应头触发，属于gapi自带的无害警告

2. 报错对发布审核的影响 #

不会导致审核不通过。三个报错均未违反Google Workspace插件发布政策，既未访问未授权资源，也未篡改Google宿主页面内容，仅属于开发层面的控制台警告，审核团队不会以此为由拒审。 #

报错修复方案 #

你当前使用的遍历iframe直接调用侧边栏方法的逻辑，本身不符合沙箱安全规范，推荐改用postMessage跨域通信方案替代，可彻底解决前两个报错，第三个gapi底层报错无业务层修复方案，可忽略。

具体代码修改 #

1. 侧边栏代码修改

function testPicker() {
  // 监听Picker模态框发送的消息
  window.addEventListener('message', (event) => {
    // 校验消息来源为可信域，避免恶意消息
    if (event.origin.endsWith('.googleusercontent.com')) {
      const message = event.data;
      if(message == 'PICKED' || message == "NOT_PICKED") {
        console.log(message);
        // 原有后续业务逻辑写在这里
      }
    }
  })
  google.script.run.withSuccessHandler(pickerResponse).showPicker();
}

function pickerResponse(e) {
  // 原有Promise等待逻辑可直接删除，改用消息监听触发后续逻辑
}

2. Picker回调代码修改

function pickerCallback(data) {
  var action = data[google.picker.Response.ACTION];
  if (action == google.picker.Action.PICKED) {
    // 直接广播消息，不需要遍历查找侧边栏iframe
    window.top.postMessage('PICKED', '*');
    console.log('Message sent');
    google.script.host.close();
  }
}

3. 可选优化（消除导航类警告）

创建Picker时补充沙箱权限配置：

function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('PickerHTML.html')
      .setWidth(600)
      .setHeight(425)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Report(s)');
}

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