Simple Note doesn't inline an image (that is publicly-acccessible and hosted on a drive.google.com) about simplenote-electron

[emacksnotes]

It looks like this might be a recent Google change, per this link: https://stackoverflow.com/questions/77803187/having-trouble-displaying-an-image-from-google-drive

Thanks for the link.

I agree that it is NOT a simplenote issue.

It seems related to

• what browsers are expected to
• and how Google has configured its servers.

(I have no understanding of web technologies. What I say above is my own understanding of what the above Stackoverflow link and the below Google issue users say )

I confirm what https://stackoverflow.com/a/77805668 says

Though not published anywhere (that I've found), Google Drive's servers have begun rejecting requests where these two headers are attached:

sec-fetch-mode: no-cors
sec-fetch-site: cross-site

If you navigate your browser directly to the (direct link) URL of the file, (i.e. take your src URL and just paste it into the browser nav bar), the sec-fetch-mode header during that request will be set to navigate and it works just fine.

BUT, as with your <img> example, if the source of the request is a web page, and which is not the same origin as drive.google.com, hence the problem. (Your browser will automatically set those sec-fetch-mode and sec-fetch-site headers as part of the request.)

This appears to be an undocumented change by Google Drive that started on 2024-01-10 and I still can't find any mention of it anywhere, so it's unknown if this behavior will persist or if it reflects an accidental change or oversight.

Browsing directly to https://drive.google.com/uc?id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34 results in 303 and works

GET /uc?id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34 HTTP/2
Host: drive.google.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Pragma: no-cache
Cache-Control: no-cache
TE: trailers

Visting a simplenote page that inlines https://drive.google.com/uc?id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34 results in 403

GET /uc?id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34 HTTP/2
Host: drive.google.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0
Accept: image/avif,image/webp,*/*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://app.simplenote.com/
DNT: 1
Connection: keep-alive
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Pragma: no-cache
Cache-Control: no-cache
TE: trailers

---

A workaround to inlining an image hosted on drive.google.com in a simplenote page

See http://simp.ly/p/5N17yV

To inline an image, hosted on drive.google.com don't do this

![(img)](https://drive.google.com/uc?id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34)

instead do this

![(img)](https://drive.google.com/thumbnail?sz=w5000&id=1wQISzfgY280eMmPUKqnbvhXGhRU2-w34)

or this

![(img)](https://lh3.googleusercontent.com/d/1wQISzfgY280eMmPUKqnbvhXGhRU2-w34?authuser=0)

This is based on the workaround suggested here Having trouble displaying an image from Google Drive | StackOverflow. See 403 Forbidden for https://drive.google.com/uc?export=download&id= [319531488] - Issue Tracker for more information.

[emacksnotes]

As an additional note, I understand that the simplenote doesn't allow hosting of images in its servers.

So, this bug is about the heuristics that you use for what you consider as an image.

So, this bug is NOT about simplenote reviewing or revising its policy wrt inline images, but more about making things easier for people to host images on remote servers and have them rendered in the notes.

Just for added context ... I would like to share notes with my friends and family, and I would like to include images like screenshot etc in these notes. I would like to see inline images in the published --web-accessible--notes first, and in the electron app.

[codebykat]

Hi @emacksnotes! Thank you for this beautifully detailed report.

I agree that this should work, and we in fact recommend that folks do this to embed images in their notes (since we don't allow image attachments).

To your point about checking the headers for the file type, we aren't actually loading the file at any point in the process, but generating the HTML on the published page that renders the file from a third-party source.

Looking at the published note you shared, I can see that we are not in fact stripping the URL out. If you view the source, you can see that it has an <img link with the information you provided:

This link, however, is returning a 403 Forbidden status from Google (you can see this on the Network tab of the browser console), which tends to mean that Google's servers are configured to prevent "hotlinking" of files. I don't use Drive much myself, and from poking around a little, couldn't see a way to get a different URL out of it, but it's possible you can get it to provide a "share URL" or "embed URL" or suchlike which would work with a third-party service.

It looks like this might be a recent Google change, per this link: https://stackoverflow.com/questions/77803187/having-trouble-displaying-an-image-from-google-drive

For now it seems the best solution would be to find somewhere else to host those images! I'm closing this issue as I don't think there's anything we can do about it, sadly. If a site isn't configured to allow cross-site image loading, it's not possible to circumvent it.