Refused to frame ‘https://accounts.google.com/’ because ancestor violates Content Security Policy directive “frame-ancestors https://drive.google.com”

Nextjs client receives the drive sharing urls from backend, I have to show them as embedded in iframe at nextjs clinet.

here is code implmented

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
    />
  );
}

Above code results in following three error each file rendered,

1. Refused to frame ‘https://drive.google.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://drive.google.com”.

2. Error with Permissions-Policy header: Unrecognized feature: ‘ch-ua-form-factor’.

3. Refused to frame ‘https://accounts.google.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://drive.google.com”.