We Keep Coding

Embedding private Google Drive Images on Website

I have a Google Drive folder with images in it, which needs to be kept "Restricted: Only people added can open with this link" because our Drive needs to stay HIPAA Compliant. I created a web app where users log in using their Google accounts and should be able to view those images directly from the web app (because they also have access to the Google Drive folder). I was able to embed the images using the following link structure: https://drive.google.com/uc?export=view&id= + [fileID] .
It works great on Chrome but does not work on Safari and on mobile devices - it simply shows a blank image, although it appears when I go to the image's link. When I make the folder public it works on all browsers/devices, so I assume the issue is with the restricted access. Is there a way to circumvent this?
Idea: Since I have the users authentication tokens, I was thinking I could make an iFrame where I load the image URL and I set the cookies using their tokens, so Drive would know that they have access to the images. Thoughts?

Just a thought, but how about using blob by sending a request via Javascript with proper Authorization header and embedding images via one?

How to embed a pdf file from firebase storage in html(react) in mobile browsers

I have a pdf file in firebase storage with a url like:
https://firebasestorage.googleapis.com/v0/b/xxxxxx.appspot.com/o/projectPdfs%2FSuperImportant%20Project.pdf?alt=media&token=0b351324-1ae5-4997-8e7c-f17039a1d3b2
I want to somehow display this in my react app.
I tried using using html object, embed and iframe. All these three methods does not work in mobile browsers. It just shows an 'open' button and when clicked automatically downloads the pdf into the device.
I also tried appending the pdf Link to a google PDF viewer url.
Like
<iframe src=`https://drive.google.com/viewerng/viewer?url=${my_firebase_pdf_url}` width="400px" height="300px" />
But this didn't work as well. Now an 'open' button shows which when clicked opens a new tab and says 'no preview available' with an option to download the file. I tried with the urls of other pdf files not stored in firebase and now it seems to work fine.
I don't want to download the pdf to the device. I just need to embed it somehow like how it works perfectly in the desktop versions.
I tried libraries like react-pdf, pdf-viewer-react-js etc, but all of them couldn't help me.
I've been struggling for 5 days now. Is this the problem of firebase storage urls and will using someother backend (like node and mongoDB) fix the problem?

Seems like your browser cannot render pdfs natively.
Also the url you have provided seems to be wrong you might want to correct that.
After correcting the url use the url below to open the file in mobile browser.
"http://docs.google.com/gview?embedded=true&url=yourfileurl"

Download image, then save locally and access: Chrome extension

I am working on a chrome extension which acts as the new tab page for a user. A number of users have asked for the ability to use their own, locally saved pictures as a background image. However, I have not been able to find a way to do this.
I am aware that there are many questions on StackOverflow with the same title as mine, but none address my specific needs:
I need to download an image from a URL (i.e. a temporary Dropbox or Google Drive URL), or use an image from an HTML5 filepicker, as in this demo.
The image then needs to be saved locally, preferably to the extension directory, and be accessed by the extension every time it loads
I do not have access to PHP or to a server on which I could call a script or host images
The other answers suggest I use the Chrome FileSystem API. However, I understand that this API is only available to Chrome apps or on Chrome OS, not to extensions.
I also found an answer that mentions the file permission in the extension's manifest file.
"permissions": [
"file://*/*"
]
I would not be against using such a permission, even though "The user has to manually approve this permission by visiting chrome://extensions/ and put a tick at the "Allow access to file URLs" checkbox," as stated on this StackOverflow answer.
However, I would not know where to start with implementing this. Your help is very much appreciated!
** I am using jQuery in my extension, so that is an option, although I would prefer to use pure JS.
*** The extension is CleanStart for Chrome, in case that is important.
Just an idea:
Maybe I could use chrome.storage to save a hex string representing the image, and then retrieve that string and convert it back to an image, as in this StackOverflow answer.

Image not displaying after deployment

I've published a site through Azure that doesn't want to display absolute URL's of images. Basically, I'm using a free web service to get information about movies. I've added JavaScript to the page to handle setting all of the HTML controls, such as an <img /> tag using document.getElementById("imgID").src = xmlElement.getAttribute("poster");.
Now, this works perfectly when I'm debugging, but not at all when the site is published (as is usually the case...). When I inspect the element and review the source, the source is valid but the "image invalid" icon appears or the alternate text.
An example can be seen here:
<img width="300" height="450" alt="Couldn't display image..." src="http://ia.media-imdb.com/images/M/MV5BNTQ5MTgzNDg4OF5BMl5BanBnXkFtZTcwMjAyODEzOQ##._V1_SX300.jpg" />
Is there something I'm missing with Azure such as something to set in Web.config? Any direction would be appreciated.

Use your own images before complaining about Azure! Your issue is because you are trying to steal images from third party site - namely imdb. The first thing a starting web developer does, it to learn how to protect his/her images being directly referenced from impudent web sites that want to save traffic and efforts and directly refernece images which they don't own.
Your site works locally because there is not Referer header set, or because it is set to Localhost. But once you publish, the Referer header has the correct value of your web site. Then the image request ends up with HTTP 403 status.
Once you put the images in your site and load them from there, it will work. But of course for that, you have to comply to the copyright of the images.

Setting src of an image to a Chrome's extension stored file?

This is an example that shows what's my problem.
I'm writing a chrome extension that should replace google's logo in google main page (google.com). So I create a content-script that uses this javascript+jQuery code to do it (Please forgo google doodles!):
$("#hplogo").attr("src","the_address");
This content-script matches with https://*.google.com/ which contains google's main page.
Okay. If I put in the_address an image address which is uploaded on the internet, the extension works properly and gives me ideal result.
But since I don't want my extension to make loading time long for slow connections, I'm going to set the image's src to a file from hard disk.
So I put the image file to extension's folder then I tried the file name (eg : image1.gif) as the_address, but this time, the chrome doesn't load the image.
What have I to do? Thanks, gúys.

For obvious reasons the image won't load, I assume it is still using the webpage's domain. You may need to use chrome.extension.getURL, which allows you to link resources from an extension directory.