拒绝构建“https://accounts.google.com/”，因为祖先违反了内容安全策略指令“frame-ancestors https://drive.google.com”

Question

Nextjs 客户端从后端接收驱动器共享 URL，我必须将它们显示为嵌入在 nextjs clinet 的 iframe 中。

这是实现的代码

if (file.includes("drive.google.com")) {
  const previewUrl =
    "https://drive.google.com/file/d/" + extractFileId(file) + "/preview?usp=drive_web";

  return (
    <iframe
      title="Drivemedia"
      onContextMenu={(e) => e.preventDefault()}
      src={previewUrl}
      onLoad={onLoad}
      height="400"
      width="100%"
      className={`max-h-[400px] max-w-[698px] rounded-xl border border-gray-200 object-cover`}
      referrerPolicy="strict-origin-when-cross-origin"
      allow="autoplay; encrypted-media; gyroscope; picture-in-picture"
      frameBorder={0}
      scrolling="no"
      seamless
    />
  );
}

上面的代码会导致每个文件呈现以下三个错误，

1. 拒绝框架“https://drive.google.com/”，因为祖先违反了以下内容安全策略指令：“frame-ancestors https://drive.google.com”。

2. 权限策略标头错误：无法识别的功能：“ch-ua-form-factor”。

3. 拒绝框架“https://accounts.google.com/”，因为祖先违反了以下内容安全策略指令：“frame-ancestors https://drive.google.com”。

Answer 1

您遇到的错误与 Google 的内容安全策略 (CSP) 和权限策略设置有关，这些设置限制了其内容在外部网站上嵌入和使用的方式。具体来说：

1。 CSP 指令： Google Drive 有一个 CSP，可防止其内容被非 Google Drive 本身的网站框架。这是为了防止点击劫持攻击和其他安全问题。

2。权限策略标头： 此错误表示存在无法识别的功能，该功能不太重要，但可以解决以确保完整性。

3.帐户嵌入限制： 出于安全原因，无法嵌入 Google 的身份验证页面。

考虑到这些限制，由于 Google 的安全政策，无法将 Google 云端硬盘内容直接嵌入到您网站的 iframe 中。以下是一些可供考虑的替代方法：

方法 1： 链接到 Google Drive Viewer 您可以提供一个在新选项卡中打开 Google 云端硬盘查看器的链接，而不是直接嵌入内容。

if (file.includes("drive.google.com")) {
  const previewUrl =
    "https://drive.google.com/file/d/" + extractFileId(file) + "/view?usp=sharing";

  return (
    <a href={previewUrl} target="_blank" rel="noopener noreferrer">
      View File
    </a>
  );
}

方法 2： 使用 Google Drive API 如果您需要对文件进行更多控制并希望在应用程序中显示它们，请考虑使用 Google Drive API 来检索文件信息并将其显示在自定义查看器中。但是，这需要处理身份验证并确保您的应用程序符合 Google 的 API 使用政策。

方法3：Google Picker API Google Picker API 提供了一种在应用程序中嵌入 Google Drive 文件的文件选择器和查看器的方法。这种方法还需要处理身份验证。

以下是使用 Google Picker API 的简短示例：

1。加载 Picker API： 在您的组件中加载 Picker API。

<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

2。初始化并使用Picker API：

import { useEffect } from "react";

const GoogleDrivePicker = () => {
  useEffect(() => {
    function loadPicker() {
      gapi.load("auth", { callback: onAuthApiLoad });
      gapi.load("picker", { callback: onPickerApiLoad });
    }

    function onAuthApiLoad() {
      window.gapi.auth.authorize(
        {
          client_id: "YOUR_CLIENT_ID",
          scope: ["https://www.googleapis.com/auth/drive.file"],
        },
        handleAuthResult
      );
    }

    function onPickerApiLoad() {
      pickerApiLoaded = true;
      createPicker();
    }

    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
      }
    }

    function createPicker() {
      if (pickerApiLoaded && oauthToken) {
        const picker = new google.picker.PickerBuilder()
          .addView(google.picker.ViewId.DOCS)
          .setOAuthToken(oauthToken)
          .setDeveloperKey("YOUR_DEVELOPER_KEY")
          .setCallback(pickerCallback)
          .build();
        picker.setVisible(true);
      }
    }

    function pickerCallback(data) {
      if (data.action === google.picker.Action.PICKED) {
        const fileId = data.docs[0].id;
        // Handle the selected file (e.g., display it)
      }
    }

    let pickerApiLoaded = false;
    let oauthToken;
    loadPicker();
  }, []);

  return <div>Google Drive Picker</div>;
};

export default GoogleDrivePicker;

将 “YOUR_CLIENT_ID” 和 “YOUR_DEVELOPER_KEY” 替换为您的实际凭据。

总结 由于 Google 的 CSP 和安全策略，直接使用 iframe 嵌入 Google Drive 文件是不可行的。考虑链接到 Google Drive 查看器、使用 Google Drive API 或集成 Google Picker API 来处理应用程序中的文件选择和查看。每种方法都有自己的设置和使用要求，特别是在身份验证和 API 使用限制方面。