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?
Related
I'm developing a PHP web app and I feel concerned that image paths expose their locations (directory path) when the developer tools is opened for page inspection.
Example:
"app/users/secretUsers/johnDoe.img"
Shouldn't this undermine the security of the site in some ways? Is there a way to get around this?
Most PHP frameworks have a public directory to place the images, Javascript, CSS, etc.
But if you are creating a web app without using a framework, the easiest workaround I used is to create a index.php in my public directories and redirect all the requests to the homepage.
Example:
If your url is www.mywebApp.com/images then you will be redirected to the homepage. But if your url is www.mywebApp.com/images/user.jpg then you can access the image.
I am trying to display an image stored in google drive on my website. I am using the following format:
<img src="http://drive.google.com/uc?export=view&id=XXXX" />
I am using the file id referred from the file's sharable link and I made sure the file is publicly shared.
I believe the above link in the src attribute does 307 Internal Redirect, which opens another url and requests the actual image. This mechanism seems to work on all browsers but somehow it doesn't work on mobile chrome.
I tried the following format but still no luck.
http://drive.google.com/uc?export=open&id=XXXX
http://drive.google.com/uc?export=download&id=XXXX
Does anyone know how to use an image in google drive and show it on a website on Mobile Chrome?
I am storing pdfs as chatter files in our SF org which is working well except for the fact that displaying these PDF's to the users is very challenging, especially on mobile device (eg ipad)
I have tracked down some good javascript PDF viewers which will behave fairly on well on ipad.
The challenge is delivering the pdf file from to these viewers.
Most of them require a local pdf file to view but there are some like google view which will take a url to the pdf for eg
https://docs.google.com/viewer?url=https://urltopdf
The pdf is available via a chatter GET as follows:
https://cs2.salesforce.com/services/data/v35.0/chatter/files/{docId}/content?versionNumber=1
The problem ofcourse is that I need to pass in an authentication header. If I just pass that url to google viewer it fails because of Authentication as its not passing in the Auth header.
I tried a few things..
Built a proxy API in Salesforce which Google viewer calls, that API calls chatter and then returns the file to google docs view
PROBLEM: Custom SF APIs have a 6mb limit which means that if the pdf is bigger than 6mb it wont work!
Built a proxy API external to SF (to get around the 6mb limit) including some interesting ways to persist the authentication
PROBLEM: There are too many hops and the google viewer is not getting back the data in time...its calling the external proxy API which is then calling the chatter API which then has to return the pdf data back to the external proxy API and then back to Salesforce (ridiculous I know).
So I am stuck.....
I thought that as of Spring 13' Chatter API is accessible without any special authentication from Javascript on a VF page.
Is that true?
Will this url work without any auth header when called from javascript on a VF page? https://cs2.salesforce.com/services/data/v35.0/chatter/files/{docId}/content?versionNumber=1
It doesnt seem to work for me and definitely wont work when going via google viewer.
Would really appreciate any suggestions how to do this?
Thanks
Please dont hate me, I am trying to get some rep.
You can query the static resources for the docid and load the file by ajax request on the VF page.
After that its a matter of using data:image/png;base64 added to the base64 to add it to a canvas. You can also add a download tag to the canvas so it will download or open it in another window will give the user the browser pdf explorer.
If you use canvas be careful with Safari when you resize. If you get a really long number it will crap out on the canvas. I spent hours on that one.
I hope that helps.
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.
I'm making a Web-App (still in "Beta") which uses the Flickr API to get information for the photos of a particular Flickr user and generates IPB code to post any of his/her images.
While Flickr now gives you the IPB code to show the image and link back to the photo site directly on its site, my App also has the option of embeding the title, description, select EXIF data, location information, etc. into the post for the IPB forum.
I've most recently added the option to integrate a Google Maps image of the photo's geolocation data into the post by using the Google Static Maps API.
The problem is that the image URL I have is in the following form (including IPB [IMG] tags):
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
Which shows this example image (In practice the image size is user selectable):
However, some IPB forums seem to not support dyamic image URLs which gives me a broken image, I'd like to replace the
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
with something like
[IMG]http://maps.google.com/maps/api/staticmap/map0000001.png[/IMG]
which should be supported by all IPB forums. Thanks in advance for your help.
In case you're interested, the most recent "released" version of my Web-App can be found here: http://flickr.argote.mx/ (The changes I mention here are still on local development server).
There are two types of solution as far as I can see:
You create a proxy server to download the images from Google and serve it on nice URLs to the clients. The disadvantage is that you will have to handle a high traffic through your servers (I don't know much about your project you have to decide about performance)
You create a special BBCODE to handle your URLs and you can use that on any IPB forums
+1: You could create a serverside script with nice URLs to redirect to the Google URLs but the problem is you never know how the different browsers will handle it. I suppose they normally don't follow URLs for images inside pages.
+2: Ask Google to support nice URLs ;)
Hope that helps.
You should be able to use a URL shortener service, as long as the service supports simple 301 redirects to image resources. You'd have to try out which ones do.
For example, bit.ly has a REST API. It allows you to make calls like this from within PHP:
http://api.bitly.com/v3/shorten?login=abc&apiKey=123&longUrl={myurl}&format=json
returning a bit.ly URL that you can use in BBCode.
Edit: According to this JSFiddle, this method works, at least in Chrome and IE8. It would still need scrupulous testing across browsers.
Since both Aston's suggestions are out of the question, maybe you can set up a simple script that redirects the request to Google Maps images (instead of a proxy)?
So you can have something like http://my-simple-script.tld/lat,lng have that script redirect to the correct Google Maps static image URL.