How can I fix broken image thumbnails in the Google Picker DocsView List mode without using a restricted scope?

I want to use the Google Picker API to create a Google Drive file picker for a web app I'm working on. The problem I'm running into is that in the DocsView list mode, images are displayed with broken thumbnails:

I'm using the https://www.googleapis.com/auth/drive.file scope, which is the scope recommended in Google's documentation. If I use the https://www.googleapis.com/auth/drive.readonly scope instead, the thumbnails work fine. However, this has several drawbacks:

The drive.readonly scope is restricted, which requires the app to go through restricted scope verification and a security assessment.
This scope has more permissions than the app requires, and more than the end user may want to grant ("See and download all your Google Drive files" is the language in the OAuth consent screen.)

In my opinion the correct behavior when using the recommended drive.file scope should be to display the generic image icon (like this: ) rather than make use of thumbnail URLs that are guaranteed to return 403 errors and thus the browser's broken image icon, which is not a great look.

Is there a workaround? Thanks!

UPDATE: There's some question as to whether the drive.readonly scope is restricted. I'm pretty sure it is:

UPDATE 2: It looks like the documentation is wrong -- in GCP it's listed as a sensitive scope in the OAuth app registration. See comment by @ziganotschka below. Also, I've created a new tracker issue.

Solution

Two things:

As per documentation, only the following scopes are restricted:

https://mail.google.com/ (includes any usage of IMAP, SMTP, and POP3 protocols) https://www.googleapis.com/auth/gmail.readonly https://www.googleapis.com/auth/gmail.metadata https://www.googleapis.com/auth/gmail.modify https://www.googleapis.com/auth/gmail.insert https://www.googleapis.com/auth/gmail.compose https://www.googleapis.com/auth/gmail.settings.basic https://www.googleapis.com/auth/gmail.settings.sharing

https://www.googleapis.com/auth/drive.readonly is not on the list, and thus - not restricted, but only sensitive.

You can verify this by adding the scopes to the Outh screen:

Go to your GCP console -> "APIs & Services" -> "OAuth Consent Screen" -> "Prepare for verification" -> "Scopes" -> "Add or remove scopes" -> Paste googleapis.com/auth/drive.readonly -> "Add to table" -> "Update". You will see that the scope will be added to the list "Your sensitive scopes", not "Your restricted scopes".

Thus, you do not need to go through restricted scope verification if you want to use this scope. You will only be prompted to explain why you need this scope and show screencast of your App, where it is shown for what you use this scope in your app.

The issue with the 403 error and broken thumbnails is well known and multiply reported on Google Issue's Tracker. However, it looks like it is intended behaviour.

So the only workaround would be to go ahead and use the https://www.googleapis.com/auth/drive.readonly scope - do not worry about problems with verification.