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.
Related
I'm developing a website and get the webpage linked here. The problem is that the webpage is not rendered with the styles.
But when I open its source and copy it to a new file on my desktop, the style is now rendered approppriately. I couldn't figure out why it doesn't work on the secure connection. Any ideas?
From my browser's error console:
[blocked] The page at 'https://secure.nesinvakfi.org/nesinyayinevi/test.html' was loaded over HTTPS, but ran insecure content from 'http://www.nesinyayinevi.com/bootstrap/css/nybs.css': this content should also be loaded over HTTPS.
If you are going to use HTTPS, then use it everywhere in the page. Don't inject insecure content into the page, it makes using HTTPS pointless.
Open the console to see all sorts of errors:
The page at 'https://secure.nesinvakfi.org/nesinyayinevi/test.html' was loaded over HTTPS, but displayed insecure content from 'http://www.nesinyayinevi.com/bootstrap/img/grid-18px-masked.png': this content should also be loaded over HTTPS.
Failed to load resource: the server responded with a status of 404 (Not Found) https://secure.nesinvakfi.org/nesinyayinevi/resimler/english.jpg
In the first case, the scheme of the requested URL and the scheme of included resources need to match. Use https://www.nesinyayinevi.com You could also use //www to have the scheme automatically match that of the requested page, but since this is secure.nesinvakfi I have to imagine that it's going to be https.
If you can't use https for nesinyayinevi.com, then you're going to have to copy the resources over or otherwise proxy them through https.
As for the 404 errors, it seems like you are using a relative path like bootstrap/js, but these are for the wrong domain. You need to use the domain absolute path of https://nesinyayinevi.com like you are doing for the CSS files.
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.
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/
In Firefox, I view my site and get no warnings about insecure mixed content.
Using FireBug, I can see that every request is https.
In Chrome, I get the https crossed out in the address bar.
I viewed source in Chrome and then ran this regex /http(?!s)/ but the only things it found were the href attributes for some external links and the doc type and http-equiv meta tags.
Using Chrome's Resource Tracking revealed all requests were https too.
This includes Google Analytics, jQuery from Google's CDN and Facebook like scripts.
Is there any specific tool I can use to show non https requests, or anything further I can try?
I found that I get the "mixed content"-warning in Chrome even when there is no mixed content, if sometime during the session mixed content was already encountered on the domain.
(Also mentioned here: Why is Chrome reporting a secure / non secure warning when no other browsers aren't?)
In Chrome's Developer Tools, the Console tab shows the resources that it won't load because they unsecure.
You can add the "scheme" column to the Chrome developer tools network tab to show which requests were sent over http or https:
Press F12 to show the developer tools
Switch to the Network tab
Right click in the column headers and select "Scheme"
Reload the page to show which elements are loaded over http or https
In situations like this where it's helpful to see exactly which protocol is being used to load resources, I would recommend Fiddler2 as a browser-agnostic solution that can show you exactly what traffic is occurring on each request.
From the site:
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Edit: In-browser debugging tools are becoming really good so this third-party tool may not be as useful as it was when this answer was first written.
Open up the Web Inspector and find the yellow triangle (warning) in the top right. Click on it and it will display all security issues.
In 48-th version of chrome they added a security panel. Using it you can quickly identify the mixed content resources:
Do you have the HttpFox plugin for FireFox? That'd work, I think.
Among other things, it reports on the URL, Method, Result Code, and bytes of all the assets that a web page requests. It's what I've used to trap the occasional non-HTTPS graphic, etc. I'm sure the other suggested tools would do the same...
You can use SslCheck
It's a free online tool that crawls a website recursively (following all internal links) and scans for nonsecure includes - images, scripts and CSS.
(disclaimer: I'm one of the developers)
I know this post is old, but I ran across it and had the same issue. I clicked on the Chrome menu (top right corner), scrolled down to Tools> and selected Developer Tools. Clicked on the Console tab and it told me exactly what the problem was... the favicon was served over http, not https, but of course it was not in the page source code. Corrected the problem in my CMS, which loads the favicon without code in the page... and no more error!
Note that 'mixed content' and 'mixed scripting' are detected seperatly. Check this site for the meaning of the icons in Chrome: https://support.google.com/chromebook/answer/95617?p=ui_security_indicator&rd=1 (click 'see details' link).
Grey icon = mixed content, red icon = mixed scripting.