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.
Related
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?
When we open a new tab in google chrome it shows thumbnails as this.
. Is there a way that I can also use this thumbnail facility on my html webpage such that I just pass the url's of various sites and it shows in the same manner. I can not use fixed images as the content on the websites (I wish to display as thumbnails) keeps on changing.
While it is possible to get a screenshot of a page with client side code, the Same Origin Policy will prevent you from doing it to arbitrary third party sites.
You would need to look for a server side solution to generate your screenshots. There are several tools that could help (PhantomJS and Selenium spring to mind). You would need to write a web server that you could use to pass a URL over and get a screenshot back.
If you are using WordPress, there is some information about it here
There is a plugin to download, but there is also a code example.
We have created a Facebook Canvas App, which can be found at this address:
https://apps.facebook.com/hiphopexpress/
When sharing a Canvas app, Facebook will retrieve the OG:Meta it has added as a result of app settings.
The icon is a png file with transparency, set at 1024x1024 as per Facebook requirements.
The problem I'm incurring into is that as you can see from the screenshots below, the image will not be included when sharing. Additionally, the Facebook graph debugger tool shows this error:
Facebook CDN not allowed for og:image.
In the allowed domains field we have both the canvas app and the external site, which serves as a fallback for mobile users (since canvas apps aren't really responsive).
I tried adding the meta tag for the image to the iframe contents, but of course it won't work. It's no use even trying to add the akamai domain to the authorized ones.
Further explanation:
As already written above, the files are in the Facebook CDN for the sole reason that they are the result of setting the application's icon and application description. Where else should they be?
The OG meta i set in the canvas content seem to be simply ignored. My current og:image meta is only this:
<meta property="og:image" content="http://www.domain.com/html/images/favicon/bannertop.png" />
After further testing the issue seemed caused by the redirect mechanism (we are redirecting mobile users to a standalone app). Once we excluded Facebook bots from redirect, our meta is now being read, instead of canvas's ones.
That is correct. You need to use a URL that doesn't point to our CDN.
I am trying to add a Javascript picture gallery created with Wowslider to my Blogger blog.
I followed the instructions on the Wowslider website, and I thought I could serve the necessary files, including the images, from my server.
Unfortunately, after I set it all up, it didn't work, and by using Firebug, I discovered that the files on my server won't be shown on the Blogger server because my site uses http and Blogger uses https. So I was getting an "Blocked loading mixed active content" error.
As far as I can see, there's no way for me to load a directory of Javascript, CSS, HTML, and image files anywhere on the Blogger server.
Converting my website, which is hosted by a service out of my control, to use https is not an option.
Is there any way I can host my Wowslider picture gallery in such a way that Blogger will display it?
Turns out the problem is not as bad as I thought.
Blogger only serves pages in https mode when you're logged in and editing pages. When a visitor to the site is just viewing the blog, it's in http mode.
This means that if you embed a Wowslider into blogger, you won't be able to see it while you're editing it. However, you, and everybody else, will be able to see it after you publish it, log out, and view it as a visitor.
So in the end it works, it's just a little confusing because you won't be able to see the end result until after you publish.
I hope this is the right place to ask this question - I did have a look at the rest of the sites in the network but this looked like the most appropriate place.
We are having issues serving third party adverts on our websites. For various reasons our ad setup is a bit complicated - we serve third party javascript tags (AppNexus) through our own ad server (OpenX) through iframes. Currently, the third party javascript tags are not showing correctly, although they have worked just fine in the past.
Debugging this in Safari I have discovered a few things which seem to me to be a bit unusual, and I'm struggling to work out what's going on. Using the web inspector to check the third party's javascript, it appears in the web inspector as a blank file. Additionally, if I check the network tab, the headers are shown and look fine, but there is no 'content' tab with which to check the returned content. The network tab shows the request for the file as complete, and with suitable status codes (200/302):
http://cl.ly/401C1D3Y3u2G2k2k3s0x
However, if I load the file directly in the web browser, it loads fine:
http://ib.adnxs.com/ttj?id=694021&cb=[CACHEBUSTER]&pubclick=[INSERT_CLICK_TAG]
FWIW, the javascript file uses document.write to spit out either an image or another iframe. It's also worth mentioning that there are no related errors in the console - there is one relating to Google Ads, but the problem persists if I load the Ad server's iframe directly without the rest of the site.
Has anyone seen this behaviour before, where a file loads just fine directly, but is (blank / not retrieved / not parsed / whatever's going on) when called as part of another page? If so, would you be able to help me fix this?
Thanks in advance for any help you can give me - I hope this makes some sense and will be happy to provide any further information that might help me get to the bottom of this!
Ollie
I'm guessing that the third party site is filtering output from their servers based on the HTTP referer being sent in the request (a technique employed by many web hosts to thwart hot-linking content). Try putting the link to the javascript file in a clickable link on a web page on your server and click it and then see if it loads or if you get a blank page. You could also try loading a browser extension which lets you forge the HTTP Referer (such as RefControl for Firefox) and then change your refer to be your site instead of the third party's and try pasting in the URL to the browser and see if it loads.
This isn't your fault if it's what turns out to be the actual problem. It's up to the third party to configure their web host to allow for this.