时间戳

首页 > 解决方案 > 在 chrome 浏览器中启用“阻止第三方 cookie”时，类 ui.showModalDialog 引发 LocalStorage Security 异常

google-chrome - 在 chrome 浏览器中启用“阻止第三方 cookie”时，类 ui.showModalDialog 引发 LocalStorage Security 异常

问题描述

目前在我们的应用程序（Google 编辑器插件和 Google Workspace 插件）中，我们使用 showModalDialog 在 iF​​rame 中加载不同的 URL。 链接）这是相同的代码片段：

var html = HtmlService.createHtmlOutputFromFile(‘top’).setWidth(700)
           .setHeight(620).setSandboxMode(HtmlService.SandboxMode.IFRAME)
           .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
DocumentApp.getUi().showModalDialog(html, “My Page”);

'Top' 是一个带有 iframe 的 html 页面，它承载 URL。当用户单击加载项侧栏上托管的 HTML 页面/卡片界面页面中的按钮时，此模式对话框会正确显示。当启用“允许所有 cookie”时，这可以正常工作。

仅当用户在 chrome 浏览器 cookie 设置中设置“阻止第三方 cookie”时才会出现异常。禁用第三方 cookie 后，当用户单击侧边栏中的按钮时，会出现对话框，并且无法呈现页面并引发安全异常。我在浏览器的控制台日志中看到以下本地存储安全异常。 浏览器错误

未捕获的安全错误：无法从“Window”读取“localStorage”属性：拒绝访问此文档。

我该如何解决这个问题？有没有通过谷歌应用脚​​本中的存储 API 设置 cookie？

此处更新了代码和问题的详细描述

我们试图展示我们现有的文件选择器实现，以保持应用程序的一致性。iframe 和 google App 脚本之间的通信方式是通过 Post Message。要触发 iframe，这就是我在编辑器附加组件中尝试的，

  1. 在 HTML 页面上有一个按钮，当点击事件被触发时，它会返回到 .gs 文件，在该文件中写入以下代码
  2. 在其他 Google Workspace 插件中，我们通过卡片接口添加了一个按钮，该按钮上的回调函数执行以下函数
    function() {
       var driveService = getDriveService();
        if(driveService.hasAccess()) {
            var driveService = getDriveService();
    var template = HtmlService.createHtmlOutputFromFile('top').setWidth(700)
        .setHeight(620).setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
         DocumentApp.getUi().showModalDialog(template, “Modal Title");
    } else {
      showSidebar()
    }
}

top.html 里面

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      
    </style>
  </head>
  <body onload="getTargetURL()">
  <iframe id="iframe" style="width: 700px; height: 610px;" src='' frameborder='0'> </iframe>
   <script>
   var dialogToken = '';
   var src = '';
   function getTargetURL() {
   google.script.run.withSuccessHandler((success) => {
        dialogToken = encodeURIComponent(success['dialogToken']);
        src = url + dialog token; // which is almost similar to access token      
        frame = document.getElementById('iframe');
        frame.src = src;
      }).withFailureHandler(() => {
      }).fetchDialogToken()
   }
   window.addEventListener('message', handleMessage, false);
   function handleMessage(e) {
   if(e['data'] != undefined) {
     google.script.run.withSuccessHandler((success)=> {
       console.log('successfully saved the document' + JSON.stringify(success))
     }).withFailureHandler((error)=> {
       alert("unable to save the document" + JSON.stringify(error))
     }).saveDocument(e)
   } 
   }
   </script>
   <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
 </body>
</html>

appscript.json 文件


{
  "timeZone": "America/Los_Angeles",
  "dependencies": {
    "enabledAdvancedServices": [{
      "userSymbol": "Drive",
      "serviceId": "drive",
      "version": "v2"
    }],
    "libraries": [{
      "userSymbol": "OAuth2",
      "libraryId": "1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF",
      "version": "35"
    }]
  },
  "oauthScopes": [
"https://www.googleapis.com/auth/script.external_request", 
"https://www.googleapis.com/auth/script.container.ui", 
"https://www.googleapis.com/auth/drive", 
"https://www.googleapis.com/auth/drive.file", 
"https://www.googleapis.com/auth/drive.metadata", 
"https://www.googleapis.com/auth/drive.addons.metadata.readonly", 
"https://www.googleapis.com/auth/drive", 
"https://www.googleapis.com/auth/drive.metadata", 
"https://www.googleapis.com/auth/documents"],
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "GWA for add-on",
      "logoUrl": " ",
      "layoutProperties": {
        "primaryColor": "#3b69f2",
        "secondaryColor": "#3b69f2"
      }
    },
    "docs": {
      "homepageTrigger": {
        "runFunction": "onLoadFunction"
      },
      "onFileScopeGrantedTrigger": {
        "runFunction": "onFileScopeGranted"
      }
    },
    "sheets": {
      "homepageTrigger": {
        "runFunction": "onLoadFunction"
      },
      "onFileScopeGrantedTrigger": {
        "runFunction": "onFileScopeGranted"
      }
    },
    "slides": {
      "homepageTrigger": {
        "runFunction": "onLoadFunction"
      },
      "onFileScopeGrantedTrigger": {
        "runFunction": "onFileScopeGranted"
      }
    }
  }
}

标签： google-chromegoogle-app-enginegoogle-apps-scriptgoogle-sheetsgoogle-workspace-add-ons

解决方案

推荐阅读