Google Picker API Invalid origin value 错误答案

【问题标题】：Google Picker API Invalid origin value errorGoogle Picker API Invalid origin value 错误
【发布时间】：2021-04-14 09:29:10
【问题描述】：

今天，Google Picker 在我的 Google Sheets 插件中停止工作，代码没有任何更改。模态对话框中的错误为：

原点值无效。

控制台中的错误是：

在“DOMWindow”上执行“postMessage”失败：提供的目标来源（“https://docs.google.com”）与收件人窗口的来源（“https://n-a6p4dqsl***”不匹配d6wq-0lu-script.googleusercontent.com')

删除 postMessage.. 来自意外窗口

删除 postMessage.. 来自意外窗口

加载“https://docs.google.com/picker?protocol=gadgets&origin=https%3A%2F%2Fdocs.google.com%2F&sdr=true&title&oauth_token=&developerKey=&hostId=n-a6p4dq***d6wq-0lu-script.googleusercontent.com&relayUrl=https%3A%2F%2Fn-a6p4dq***d6wq-0lu-script.googleusercontent.com%2Ffavicon.ico&nav= ((%22documents%22%2Cnull%2C%7B%22selectFolder%22%3Atrue%2C%22parent%22%3A%22root%22%7D)%2C(%22documents%22%2Cnull%2C%7B%22dr%22 %3Atrue%2C%22includeFolders%22%3Atrue%7D))&rpcService=qhurmoc5w4l7&rpctoken=xssf8g42xc2&thirdParty=true#rpctoken=xssf8g42xc2': 'ALLOW-FROM https://docs.google.com/' 不是公认的指令。标题将被忽略。

可能错误与我在setOrigin() 执行的这行代码有关：

        var picker = new google.picker.PickerBuilder()
            .addView(driveView)
            .addView(drivesView)
            .hideTitleBar()
            .setOAuthToken(token)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
        --> .setOrigin(google.script.host.origin)
            .setSize(DIALOG_DIMENSIONS.width - 2,
                DIALOG_DIMENSIONS.height - 2)
            .build();

但是这一行直接来自 Google Picker API 的文档并且之前可以正常工作。如果我更改google.script.host.origin，返回https://docs.google.com 作为https://n-a6p4dqsl***6wcd6wq-0lu-script.googleusercontent.com 的url，我得到同样的错误和一个新错误，所以不是这样。

我也无法将其添加为 GCP 项目中的授权 javascript 来源，因为它返回以下错误：

无效来源：使用禁止域

（这个has been the case of a while）

这似乎是一个新错误，我在 Google 的问题跟踪器和 StackOverflow 上都找不到答案。

任何人也面临这种情况或知道如何处理？

【问题讨论】：

对于我们来说同样的问题，还有一个附加组件。我相信 setOrigin 行使用现在被忽略的标头 ALLOW-FROM 转换为 X-Frame-Options 指令，因此导致 Invalid origin value 错误消息作为响应。我刚刚在 X-Frame-Options 文档中发现 ALLOW-FROM 是一个过时的指令，不再适用于现代浏览器。不要使用它......也许他们昨天才开始放弃它。我猜这可能是真正的原因

标签： javascript google-apps-script google-cloud-platform google-picker

【解决方案1】：

结束，解决这个问题的唯一方法是删除后面的斜杠

来自

docs.google.com/

到

docs.google.com

相反，

google.script.host.orgin 给出了导致错误的“https://docs.google.com/”。因此你需要硬编码为

“https://docs.google.com”

Google 最近做了一些更改，可能会解决这个问题。

更新

您可以使用此功能 - 并调用 - ...... setOrigin(getOrigin())

function getOrigin() {
    var url = google.script.host.origin;
    return url.substr(url.length - 1) === "/" ? url.substr(0, url.length - 1) : url;
}

【讨论】：

这对我有用.. 更清楚地说，这个新的硬编码值位于对 PickerBuilder() 的 setOrigin() 调用中，而不是文档中的 google.script.host.origin 值。
感谢一百万，这成功了！对于那些不想硬编码 url 的人，您可以使用以下函数来去除尾部斜杠： ` function stripSlash(url) { return url.substr(url.length - 1) === "/" ? url.substr(0, url.length - 1) : url; } `

【解决方案2】：

在 iframe 中使用的解决方案

https://developers.google.com/apps-script/guides/dialogs#code.gs_2

代码.gs

         function showPicker() {
          var html = HtmlService.createHtmlOutputFromFile('dialog.html')
              .setWidth(600)
              .setHeight(425)
              .setSandboxMode(HtmlService.SandboxMode.IFRAME);
          SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
    }


.setSandboxMode(HtmlService.SandboxMode.IFRAME); 
//can be removed or replaced with
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

dialog.html

function getOrigin() {
        var url = "https://mydomain.name/";
        return url.substr(url.length - 1) === "/" ? url.substr(0, url.length - 1) : url;
    }

更新

现在它无需对代码进行任何更改即可工作。

【讨论】：