谷歌选择器API无效的来源值错误

Question

今天，在没有对代码进行任何更改的情况下，我的Google Sheets插件中的Google Picker停止工作。模态对话框中的错误消息为：“无效的来源值。”控制台中的错误消息为：“在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=<oathToken>&developerKey=<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'时遇到无效的“X-Frame-Options”头，'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作为URL，如果我将其更改为https://n-a6p4dqsl***6wcd6wq-0lu-script.googleusercontent.com，则会出现相同的错误和一个新错误，因此不是这个问题。

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

Invalid Origin: uses a forbidden domain

（这已经持续一段时间）

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

是否有人也面临这个问题或者有任何想法如何处理？

- Dmitry Kostyuk

---

我们也遇到了一个插件的相同问题。我认为setOrigin行被转换为使用ALLOW-FROM头指令转换为X-Frame-Options指令，而现在被忽略，因此导致响应中出现“无效的起始值”错误消息。我刚在X-Frame-Options文档中发现，ALLOW-FROM是一个已过时的指令，在现代浏览器中不再起作用。不要使用它...也许他们昨天刚开始放弃它。我猜这可能是实际原因。 - Fausto R.

Answer 1

解决此问题的唯一方法是删除后面的斜杠。

从

docs.google.com/

到

docs.google.com

反之，google.script.host.origin会返回"https://docs.google.com/"，这会导致错误。因此，您需要将其硬编码为

"https://docs.google.com"

谷歌最近进行了一些更改，这可能导致了此问题。

更新

您可以使用以下函数-并调用-......setOrigin(getOrigin())

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

- Code Guy

---

这对我有用。为了更清晰明了，这个新的硬编码值应该放在PickerBuilder()中的setOrigin()调用中，而不是文档中存在的google.script.host.origin值。 - Seb Barre

非常感谢，这个方法很有效！ 对于那些不想硬编码URL的人，可以使用以下函数来去除尾部斜杠： function stripSlash(url) { return url.substr(url.length - 1) === "/" ? url.substr(0, url.length - 1) : url; } - Dmitry Kostyuk

Answer 2

用于 iframe 中的解决方案

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

code.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;
    }

更新

现在它可以正常工作，而无需对代码进行任何更改。

- Sergey.K