X-Frame-Options blocking Google Drive PDF embedding

Google Drive PDF Iframe Issue

I’ve been running into problems with embedding Google Drive PDFs on my website. Everything was working fine until recently when I started getting errors in the browser console.

My setup uses multiple iframes like this:

<iframe src="https://drive.google.com/MyDocumentLink" border="0"></iframe>

The browser keeps showing this error message:

Cannot display https://drive.google.com/MyDocumentLink in frame due to ‘X-Frame-Options’ set to ‘SAMEORIGIN’

This is breaking the PDF viewing functionality for my users. The site is built with ASP.NET MVC framework. Has anyone found a working solution for this iframe blocking issue? I need to let visitors view these PDF files directly on my pages without forcing them to open Google Drive in a new tab.

Google changed their iframe embedding policy recently - that’s what’s causing this mess. Their X-Frame-Options header got way more restrictive. Besides switching to the preview URL, you could try the Google Drive API with their file picker instead of direct embedding. What worked for me was hosting PDFs on my own server or switching to a different cloud storage that still allows iframes. Direct embedding with Google Drive is getting unreliable, so I’d have a backup plan ready.

had this issue too! you gotta update the link format. switch it from /file/d/[ID]/view to /file/d/[ID]/preview. that should fix the iframe problem. just a heads up, it might not look exactly the same as before.

The X-Frame-Options issue can be quite frustrating, but there’s an alternative that provides more flexibility. Instead of struggling with Google Drive’s embedding limitations, consider using PDF.js viewer. By retrieving the PDF using Google Drive’s API, you can present it in your own iframe, which avoids the SAMEORIGIN restrictions altogether since the content is hosted on your domain. I made this switch after encountering similar issues with Google’s policies, and it has proven reliable. Additionally, users appreciate the customizable viewer that can align with the website’s aesthetic.