Comments (3)
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), thesec-fetch-mode
header during that request will be set tonavigate
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 asdrive.google.com
, hence the problem. (Your browser will automatically set thosesec-fetch-mode
andsec-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
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.
from simplenote-electron.
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.
from simplenote-electron.
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.
from simplenote-electron.
Related Issues (20)
- (With solution) Chinese single and double quotation marks appear unclear
- Add "Copy" button for code blocks
- Exported txt files don't have creation date HOT 3
- UPDATE SOURCE HOT 1
- Support multi-tab HOT 2
- Inserting Email Address Into Note Causes Markdown Preview to be Blank HOT 3
- Red Heart Emoji Showing Up White HOT 1
- Fails to launch on Kubuntu 24.04 (Maybe other ubuntu flavors) HOT 4
- The app doesn't run on Linux arm64 HOT 2
- `make` `build-if-not-exists` and `build-if-changed` always build HOT 2
- Student
- Manual updater hangs if network is unreachable or slow, cannot be canceled
- search and highlight within a single note
- search and highlight within a single note HOT 1
- White background flash on startup
- Smooth scrolling not working in Windows version
- Please consider removing captcha codes and consider using time outs HOT 4
- Upgraded to 2.22.0 and just shows white blank page and nothing else HOT 12
- [macOS] 2.22.0 is ARM-only and requires macOS 11 HOT 2
- Multiple References to the Same Footnote Results in Duplicate Footnotes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simplenote-electron.