嵌入Google Drive的PDF提示drive.google.com refused to connect如何修复

问题原因 #

谷歌Drive的常规文件查看链接默认设置了X-Frame-Options: sameorigin安全策略，禁止第三方网站通过iframe、embed等标签嵌套嵌入，只有专用的预览链接才开放嵌入权限。

修复方案 #

• 替换嵌入链接的后缀：将原链接末尾的/view?usp=sharing修改为/preview，文件ID保持不变即可
• 优先使用iframe标签做嵌入，兼容性优于embed标签，你现有代码中的iframe格式本身是正确的，仅需调整尺寸参数匹配你的需求即可

可用嵌入代码示例 #

embed标签版本

<embed src="https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/preview" width="840px" height="500px"/>

iframe标签版本（推荐）

<div class="embed-pdf"> 
    <iframe src="https://drive.google.com/file/d/17Z3Zvt63p3nI-C0BnOhPd75X5LSBi6dh/preview" width="840" height="500" allow="autoplay"></iframe>
</div>

验证 #

替换代码后刷新页面即可正常加载PDF，无需调整文件共享权限，你现有的「公开可查看」权限已经满足嵌入要求。

内容的提问来源于stack exchange，提问作者CodeForGood