I've switched my Facebook page to pull an iframe as a result of Facebook's recent announcement that they were supporting iframes in pages. Since you need to host the iframe page outside of Facebook, I figured it would be nice to do using Cloudfront to host the files (an HTML page, a CSS stylesheet and a jpg image). Unfortunately, despite setting the permissions on the Cloudfront files to 744, the iframe page loads correctly in a browser, but when called from Facebook, I get this error message.
When I host the same files on my Media Temple server, the iframe on the actual Facebook page also loads correctly.
Is there a reason why Facebook and Cloudfront don't play together? I haven't been able to find one so far.
Unfortunately Facebook loads the iframe page using an HTTP POST, not an HTTP GET and is not compatible since Amazon has a REST interface and properly uses POST to upload/modify content.
Best,
David Bullock
I ran into this problem today and it caused some headscratching. As David Bullock points out the problem is that Facebook loads the HTML page via a POST request but S3 (and thus by extension CloudFront) won't serve resources in response to this (it returns 405 Method Not Allowed).
You can host your CSS, scripts and images on S3 / CloudFront, but the initial HTML page has to be on some other server. If you're concerned about load or latency from across the globe then you could try implementing a tiny redirector that forwards the Facebook POST request to the CloudFront-cached location (you'll have to return 303 See Other to do this redirection so the browser makes a GET request instead: see RFC 2616).
There is a shockingly easy workaround to the fact that AWS rejects POST requests and the fact that Facebook requires page tabs to be hosted via HTTPS: just redirect the request through https://bit.ly/….
Yes, it's really that easy.
Host the HTML page wherever you like. HTTP is fine.
Create a bit.ly-shortened URL to the page.
Use it—substituting https:// for http://—as the "Secure Page Tab
URL" as you create your Facebook Page Tab.
Activate the tab using this highly-undocumented dialog URL: https://www.facebook.com/dialog/pagetab?app_id=app_id&redirect_uri=bitly_url
Boom: done.
OK, it can be done: but you need to host the images on Cloudfront and the rest of the content on S3. Amazon provides a set of clear instructions on how to this. Issue solved.
Use Cloudfront to trap the 405 error and serve your html as the "Custom Error Response" page to the desired index page
Updated:
This was down voted, however I'm going to help lots of Facebook developers with the following. The final Issue that we had with hosting a facebook application on S3 was with CORS. We fixed the 405's by doing a "Custom Error Response" See this link for details:
http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/
Related
Im grabbing image src from url and the image doesnt show on the page. If I go to the inspector and click on the img url it shows up on the new tab just fine. Also if I right click the "img not there" img, and open image in new tab it also shows just fine. It says in the network tab that there is a 404 but im just confused why it says that cause if I click the url for the src it shows up. I learned a little about CORs and nothing ive tried for that has worked so far. Made a free account for webhosting here thinking maybe something more real would work but same thing. https://funkocollector.x10.mx/ You can try searching for like Luke and see the other images dont load as well.
inspector showing src is correct
Network tab showing 404
Image showing up not on http
Image not showing on localhost
You are correct; this is most likely a CORS block. Just to be sure, check for a CORS protocol error message in the Inspect screen.
The CORS (cross-origin resource sharing) protocol limits what you can link to from your http server for network security reasons. Your link may or may not be blocked depending on the type of file and the settings of the server you are linking to. You have 2 solutions, both relatively simple:
Quick fix: since you can open the image source, simply download the file to your computer and upload onto your server. Change the href to your own site.
Long-term solution: get an ssl on your server. If you’re registered with dns, get cloudflare for your server. You’ll then be accessible as https, and CORS won’t be a problem.
i have a website which as working perfectly through http, but when i have secured https protocol for that website url, then the images are not loading on site, if we make refreshing page once or twice it will displays images else page loading for long time with no images shows.
The images on your page need to be loaded through the same protocol as the protocol present in the link.
So in conclusion if the website is loaded through https, the images need to be loaded through https also and the other way around.
This can be an issue with the code or possibly a ssl error. Please Contact your server and ask them for an ssl certificate. It be something to do with your computer/browser.
I have an application that uses Google Drive for document storage and preview functionality, but recently the iFrames that the documents are loading into are not displaying anything. Upon inspection of the console, Chrome declares that it blocked the fram from running insecure content, and that is why the file preview did not load.
The initial call to preview this file is to a url that looks like this:
https://docs.google.com/document/d//preview
There is a redirect along the way that takes the following form but because it uses http instead of https, Chrome blocks the content from loading.
http://www.google.com/url?sa=p&q=https://www.google.com/accounts/ServiceLogin?service%3Dwise%26passive%3Dtrue%26go%3Dtrue%26continue%3Dhttps://docs.google.com/document/d//preview?pref%253D2%2526pli%253D1
Is there any way around this issue? It is blocking a core functionality of my application currently, so any advice would be appreciated. I can provide a screenshot of the full stack of network loads in necessary, but this is the only URL that is not http compliant.
Thanks in advance for your help.
Hacked that. Add a "?pli=1" without quotes at the end of the URL to avoid redirect (after "/preview" or "/edit") and land directly to the document.
My browser is session authenticated with a website.
I am using their API to pull down images from the site so I can display them on my page.
Visiting that image url displays the image, putting it in an img tag does not:
<img src = "https://files.something.com/123123" />><!-- this doesn't show -->
arse<!-- this works -->
Any ideas on why? and how I might overcome it?
If I put in http for the link, it redirects to https any way.
There's two things worth bearing in mind here:
Your host is automatically redirecting to https. Is this deliberate?
I suspect that you're seeing coming up against cross-domain security, or that your server is actively refusing it.
To trouble-shoot: you'll want to find out what response you're getting from your images.
Open up either the 'NET' tab in Firebug, or 'Network' in Chrome Developer Tools and watch the page-load. I suspect you're going to see those images come through red with an error number. Once you've got that it's very easy to trouble-shoot why the server's refusing to serve the images.
Visiting my site in SSL and in Chrome (12.0) I get
Your connection to someWebsite is
encrypted with 256-bit encryption.
However, this page includes other
resources which are not secure. These
resources can be viewed by others
while in transit, and can be modified
by an attacker to change the behaviour
of the page.
The connection uses TLS 1.0.
The connection is encrypted using
AES-256_CBC, with SHA1 for message
authentication and DHE_RSA as the key
exchange mechanism.
The connection is compressed with
DEFLATE.
I searched with FireBug (NET tab) and Chrome Inspector and all resources are accessed via https. Where is the problem? *I cleared the cache already
What could be the problem?
Chrome will give this error if you've visited another https page on the same domain that had mixed content however this should not be the problem if you've tried clearing your cache.
You might want to try Ctrl-Shift-J for the JavaScript console, it should show the insecure content.
I have the same thing - and I read from the Google Chrome help site that elements on the site are not encrypted - like videos. I looked via Firefox - right click->View Page Info->Media tab and saw that every time I use a YouTube video in my video player I have plain http addresses like:
http://s.ytimg.com/yt/swfbin/watch_as3-vflrEm9Nq.swf and
http://img.youtube.com/vi/V6JgyNy59yA/1.jpg
I think these non https links are causing the security message site-wide. Thus, it appears using videos from 3rd party sites will always throw a security error in Google Chrome for https pages.
That's my answer - but I have no solution yet. I need to be able to share videos from youTube in our news section, but my online store section needs to use https without scary red letters and slashes through it for my clients.
Has anyone dealt with this effectively?
Thanks
Had the same problem on my Magento Site. Be sure to change all image and js links (even in .css) from http:// to simply //. Solved it for me.
I had the same issue, my problem was that some img tags had src to http instead of https, it does not matter even they link to other domain like <img src="http://otherdomain.com/image.jpg" /> it still shows that warning. As soon as I changed all internal and external img links to https the warning disappeared.
If you check the page and it seems to have no insecure content, check to make sure that something on the page is not submitting data to an insecure location.
Content should be submitted over HTTPS, not HTTP.