google-apps-script - 如何将 Web 应用程序中 <img> 标记中使用的图像限制为 "anyone within corporation"？-6ren

google-apps-script - 如何将 Web 应用程序中标记中使用的图像限制为 "anyone within corporation"？

转载作者：行者123 更新时间：2023-12-05 02:50:54

我可以限制 Web 应用程序的使用，但我不能限制对标记中引用的图像的访问。

现在我正在使用 Google Apps 脚本开发网络应用程序。这是公司的内部应用程序，我必须仔细设置 Assets 的访问权限。

对于应用程序本身，从脚本编辑器的部署为网络应用程序框，我将执行应用程序设置为我(bar@foo.example.com ) 和有权访问该应用程序的人作为FOO 公司内的任何人。

(假设我属于 FOO 公司。我的 Google 帐户是 bar@foo.example.com)

现在，当我使用FOO的谷歌账号登录时，我可以成功访问Web App。但是当我没有登录时，我无法访问它。这就是我想要的。

但是当我设置标签以在 Google Drive 中显示 jpeg 文件时，我必须将图像文件的 Share 设置为 Internet 上知道此链接的任何人都可以查看。

当我在 Web App 项目的 HTML 中设置标签并将 jpeg 文件的 Share 设置为 FOO Corporation -- 该组中的任何人都可以通过此链接查看，标签将不起作用(将返回错误 403)。

我想限制图像的访问权限以及网络应用程序。我该怎么做？

如何重现

放jpeg文件

将任何 JPEG(假设是 baz.jpeg)文件放入 Google 云端硬盘
右键单击并选择共享
将获取链接设置为FOO Corporation -- 此组中知道此链接的任何人都可以查看
双击 baz.jpeg 进行预览
选择︙ => 在新窗口中打开
假设 URL 是 https://drive.google.com/file/d/xxxx_object ID_xxxx/ View 。记录对象ID(这里是xxxx_object ID_xxxx)

创建一个新的无标题脚本项目
创建一个 index.html 文件并添加代码:

<html>

  <head>
    <base target="_top">
  </head>

  <body>
    <img src="https://drive.google.com/uc?id=xxxx_object ID_xxxx" width="30" height="30" alt="error alt text">
  </body>

</html>

创建 Code.gs

将Code.gs改成下面的代码

    function doGet() {      return HtmlService.createHtmlOutputFromFile('index');    }

保存

将其发布为 Web App

选择菜单项发布> 部署为网络应用
在Deploy as web app框中，将Project version:设置为New
将应用程序执行方式设置为:为Me (bar@FOO.example.com)
将谁有权访问该应用程序:设置为FOO 公司内的任何人
点击部署
点击消息中的文本最新代码为您的最新代码测试网络应用

结果——错误

显示网页index.html
图像未显示。显示破损图片的图标
显示替代文本“错误替代文本”
如果我右键单击损坏图片的图标并选择在新标签页中打开，它将打开错误 403(禁止访问) 标签页。内容如下:

    Google (logo)    403. That’s an error.    We're sorry, but you do not have access to this page. That’s all we know.

修改图片文件的访问权限

在 Google 云端硬盘中，找到图像文件 baz.jpeg
右键单击并选择共享
将获取链接设置为互联网上知道此链接的任何人都可以查看。
打开带有破损图片图标的 Web App 选项卡并重新加载
你看到正确的图像

我想做什么？

我想限制图片的访问权限以及Web应用程序(只有FOO公司的用户才能访问)。我该怎么做？

最佳答案

403 禁止访问

/uc 端点，当文件权限设置为“在此组中”时，即使您已登录 G Suite 帐户，也会返回 403 Forbidden 响应.

解决方法

您可以实现动态附加 HTMLImageElement 的流程，其中 src 属性设置为图像数据(来自字节的 base-64 编码字符串)。有了这个，您可以限制对 Web 应用程序和图像的访问，但仍然能够加载它。

部署 Web App 时，确保部署对文件有足够的访问权限，例如，当文件具有“拥有此链接的该组中的任何人都可以查看”权限时:

Execute the app as: Me
Who has access to the app: Anyone within [org]

下面是一个小的概念证明，包括一个服务器端实用程序和一个示例 HTML 文件。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        const asyncGAPIv2 = ({
            funcName,
            onFailure = console.error,
            onSuccess,
            params = []
        }) => {
            return new Promise((res, rej) => {
                google.script.run
                    .withSuccessHandler(data => {
                        typeof onSuccess === "function" && onSuccess(data);
                        res(data);
                    })
                    .withFailureHandler(error => {
                        typeof onFailure === "function" && onFailure(error);
                        rej(error);
                    })
                [funcName].apply(null, params);
            });
        };

        const fetchAndAppendImage = async ({ parent = document.body, id }) => {

            const data = await asyncGAPIv2({
                funcName: "getImageFromDrive",
                params: [{ id, token }]
            });
        
            const img = document.createElement("img");
            img.src = data;

            parent.append(img);
        };

        (async () => await fetchAndAppendImage({ id: "id here" }))();
    </script>

</body>

</html>

您可以将 id 传递给服务器端实用程序，使用 getFileById 获取文件( native 身份验证流程将确保请求者无法访问他们无权访问的文件)，并通过执行以下操作形成图像数据字符串:

通过更改 getBlob 从 File 实例中提取原始字节至 getBytes .
使用base64Encode Utilities 服务的方法，用于将字节转换为 base-64 编码字符串并添加 data:image/png;base64,(Data URL 方案)。如果您的图像具有其他 MIME 类型，请相应地进行修改。

/**
 * @summary gets an image from Google Drive
 * 
 * @param {{
 *  id : string
 * }}
 * 
 * @returns {string}
 */
const getImageFromDrive = ({ id }) => {

    try {
      
      const file = DriveApp.getFileById(id);
      const bytes = file.getBlob().getBytes();
      
      const data = `data:image/png;base64,${Utilities.base64Encode(bytes)}`;

      return data;

    } catch (error) {
        console.warn(error);
        return "";
    }
};

注意事项

要使上述工作正常，您必须拥有更新的 V8 runtime enabled .
可能的原因是登录到多个帐户，因为试图通过 /uc 端点访问具有“在该组中”权限的文件，而仅登录 G Suite 帐户没有授权问题。

关于google-apps-script - 如何将 Web 应用程序中 <img> 标记中使用的图像限制为 "anyone within corporation"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63444965/