Trouble displaying non-Google Doc files in iframe using Drive API

Other Questions Google drive
1

I’m having issues with my web app that uses the Google Drive API. It used to work fine, but now I can’t show certain file types in an iframe.

Here’s what’s happening:

  • Google Docs still display correctly
  • Other file types (HTML, text, DOC, images) won’t show up
  • I get an error about X-Frame-Options being set to SAMEORIGIN

I’m confused because this worked before. Did Google change something? Is there a way to fix this?

Here’s a simplified example of what I’m trying to do:

function displayFile(fileId) {
  const embedUrl = `https://drive.google.com/file/d/${fileId}/preview`;
  const iframe = document.createElement('iframe');
  iframe.src = embedUrl;
  document.body.appendChild(iframe);
}

// This used to work for all file types, now it only works for Google Docs
displayFile('exampleFileId123');

Has anyone else run into this problem? Any ideas on how to get around it? Thanks for any help!

2

I’ve come across a similar issue in my recent projects. It appears that changes in Google’s security policies have now restricted the embedding of non-Google Doc files in iframes. Instead of relying on the preview feature, one viable solution is to use the Drive API’s export functionality to download and render file content directly in your application. This method involves retrieving file metadata, checking its mimeType, and then exporting the content appropriately. While it requires additional implementation effort, it offers better control over file display and avoids the iframe limitations.

3

yeah, google’s been messing with stuff lately. i ran into this too. what worked for me was using the google drive sdk to grab the file content directly. then you can show it however you want in ur app. it’s a bit more work but gets around the iframe thing. good luck!

4

I’ve encountered this issue as well. Google has indeed tightened security measures, affecting iframe embedding for non-Google Doc files. A workaround I’ve found effective is utilizing the Google Drive API’s ‘files.get’ method to fetch file metadata and content. For supported file types, you can then render the content directly in your app using appropriate libraries or viewers. This approach bypasses the iframe restrictions and gives you more control over the display process. It does require more code on your end, but it’s a robust solution that’s worked well in my projects. Just be mindful of handling large files and implementing proper error handling.