Wikipedia is a useful source of info but is less effective without images.
Due to security measures, modern browsers (latest updates of Firefox/Chrome/Safari) are not showing images which have origin different from that of host. eg: wikipedia.org page content is hosted on en.wikipedia.org but the media are hosted on upload.wikimedia.org, so the browsers are blocking all images.
I tried turning off browser security settings, adding wikipedia as exception, turning off https only requirement, altering site permissions, viewing on android wikipedia app (yes, even this fails as it can be a webview, thus using chrome browser internally to display content), etc. but to no avail.
What could be done to view the images on wikipedia?
Update: This issue has been resolved automatically (probably by wikimedia).
Related
When loading the site in Safari, I have some images that use a https link, the images do not display on the page, when I open the image URL in the browser, it will not load, saying "Safari can't open the page X because Safari can't establish a secure connection to the server X". This needs to use https links for the images, is there a header or something I can set to allow this to load?
I have tried removing the https, and images load in http, the site we get the images from are used from an API and they they return the image link to use, this does not have an SSL cert on it
not any code, a general question about a setting in Safari if we can avoid using any manual changes that a user will not make on their own.
Expect that the image will load up and thus on the pages that we want to display the images on.
I found a solution to this one here:
https://apple.stackexchange.com/questions/275522/unable-to-load-https-websites-on-safari
The issue is that Safari won't support in older versions the TLS protocol in use in modern-day browsers. I wasn't aware it would be such an old version in use for windows users.
Sometimes, if I go to a website, such as this one through an HTTP link, it looks fine and works as apparently intended:
However, if you change the address to be HTTPS, the page loads without any browser warnings but looks really weird and seems broken—spacing is messed up, the colors are wrong, fonts don't load, etc.:
All of this same stuff happens in both Firefox and Chrome on my computer.
What causes this to happen? How can I avoid this if I make an HTTPS-secured website?
For me the browser tells you what is wrong in a warning message. Parts of the page are not secure (such as images).
What does this mean? The developer of the site has linked some content such as CSS, JS, or images using HTTPS links and some using HTTP links.
Why is this a problem? Since some content is being retrieved over an insecure connection (http), it would be possible for malicious content to be injected into your browser which could then grab information which was transmitted over https. Browsers have had this warning for a very long time, but in the interest of security they have hedged their behavior on the more secure side of things now.
What will fix this? There is nothing we can do as consumers of the website. The owner of the site should fix the problem. If you are really interested in viewing the site and not concerned about security, you can temporarily disable this protection from the URL bar warning message in Firefox.
As #micker explained, the page looks weird because not all of the sources are loading since their connections could not be made securely and the website's ability to load those sources are being denied by the browser for not being referenced using a secure connection.
To elaborate further. in case it's still not quite clear, a more accurate and technical explanation would be that, for styling a webpage, the Cascading Style Sheets, or CSS, is the language used to describe the presentation of a document or webpage in this case, and tells the browser how elements should be rendered on the screen. If you consider these stylesheets as sort of building blocks, where you can combine them together to define different areas on a webpage to build one masterpiece, then you would see why having multiple building blocks for a site would sound pretty normal.
To save even more time, rather than try to figure out the code for each and every stylesheet or "building block" that I want to include, I can burrow someone else's style sheet that has the properties I want and link to it as a resource instead of making or hosting the resource myself. Now if we pretend that there's a stylesheet for every font size change, font color variance, or font placement, then that means we're going to need a building block to define each of those
Now, If I am on a secure connection, then the browser ensures that connection stays secure by only connecting to other sites, or resources, which are also secure. If any of the sites containing the building blocks of CSS that I want to use but are not secure, AKA not using SSL (indicated by a lack of "s" in "http://" in their address), then the browser will prevent those connections from happening and thus prevents the resources from loading, because the browser considers it a risk to your current secure connection.
In your example's particular case, things looked fine when you entered only http:// without the https:// because the site you were visiting doesn't automatically force visitors to use SSL and lets you connect to it using the less secure, http protocol, which means your browser is not connecting securely to it, and therefore won't take extra steps to protect you by blocking anything outside of that since you're already on an insecure connection anyway. In which case, the browser doesn't need to prevent sources that are coming from an insecure connection or sites because in a way, your connection is already exposed so it can freely connect where it needs to and load any resources regardless if they can be transferred securely or not.
So then, when you go to the "https://" version of the site, there are no browser warnings because you're connecting to that site with a secure connection and unfortunately that also means that if the designer of the page had linked resources from somewhere that just didn't have an SSL connection available or didn't update the link to go to the new https:// standard, then it's going to be considered insecure and since you're on a secure connection, the browser will block those connections which means blocks those resources from being able to load, making the page load incomplete with not all of its building blocks. Build blocks that tells your screen to move all the text on the right into a panel and to have a blue font color while changing to a different font face. Those definitions defining the look and appearance didn't make it through and so those sections adopted whatever existing stylesheet is present which normally don't match with what was intended to be there.
hey guys i am having a problem that i see others with online but i am yet to find a fix for my website.
facebook not detecting my images as of a couple of hours ago, i tried disabling hotlinks in cloudflare, tried fb debuger and scrapping tool etc no solution.
example if you try to share this page, no picture appears: http://www.yardhype.com/12-year-old-jamaican-girl-wins-master-chef-junior-competition/
ERROR message
"Provided og:image URL, ........testsite/wblob/5433A6CF57A599/2803/3DF62/w3l6_ERf2C3ADvxqhgccQg/jasmin.png could not be downloaded because it exceeded the maximum allowed sized of 8Mb."
the image is not over 8mb
ALso correct url is shown in the raw tag area
When I opened that link http://www.yardhype.com/12-year-old-jamaican-girl-wins-master-chef-junior-competition/ I don't see the image regardless; I opened up Chrome's debugger and saw this:
A Parser-blocking, cross site (i.e. different eTLD+1) script,
http://ajax.cloudflare.com/cdn-cgi/nexp/dok3v=85b614c0f6/cloudflare.min.js,
is invoked via document.write. The network request for this script MAY be
blocked by the browser in this or a future page load due to poor network
connectivity. If blocked in this page load, it will be confirmed in a
subsequent console message.See
https://www.chromestatus.com/feature/5718547946799104 for more details.
So the way that page is displaying the image is likely not up to standards.
For a fun project, I've been implementing a small thumbnail page on a website that provides a specially catered view for the small site previews on New Tab pages. The end goal being to present the relevant information to the user before they ever need to visit the site. (Example: a weather site frequently visited, having a thumbnail page showing today's weather, so that the user can see the relevant information at a glance).
Opera this is by detecting
X-Purpose: preview
Likewise, Safari uses the same header, but requires additional JS to maintain a consistent thumbnail.
//On primary page
if (window.navigator.loadPurpose === 'preview') { /* go to thumbnail page */ }
//On thumbnail page
if (window.navigator.loadPurpose !== 'preview') { /* return to main page */ }
I'm curious if it's possible to duplicate this effect in Chrome or Firefox (the new speed dial available in the Aurora builds)?
Note: The X-Purpose: preview header in Chrome about 2 releases ago was a bug that was intended to be X-Purpose: instant and does not serve this purpose.
As far as I can tell, both Chrome and Firefox Speed-dial thumbnails are only populated when you visit a page - i.e. they're taken from the normal browsing context, with normal headers, rather than being independently queries in their own right.
You can test this a number of ways - I haven't spent long testing it, and you may have different version(s) of Firefox/Chrome than I do so you may see different results.
In Chrome - pin a tab or two in Speed-dial and then empty your browser history. The thumbnails should disappear until you re-visit the pinned page.
In Firefox - the above works, but you can also try out thumbnail generation directly using the moz-page-thumb:// URL protocol:
moz-page-thumb://thumbnail?url=http%3A%2F%2Fstackoverflow.com%2Fq%2F10369905%2F210865"
(please do test in whatever versions you're running as I'm curious about this question too - my research sofar is disappointing, but possibly in future ...)
Other references:
Original bugzilla entry for adding thumbnails to FF Speed-dial
Another bugzilla entry on fixing thumbnail protocol security issues
Related Super User question
Try using the speed Dial addon on Firefox, works really well.
It has features like bookmarks back-up and you can add a large number of bookmarks customizing each bookmark-tab.
link to speed dial for firefox
link to speed dial for chrome
I'm trying to come up with ways to speed up my secure web site. Because there are a lot of CSS images that need to be loaded, it can slow down the site since secure resources are not cached to disk by the browser and must be retrieved more often than they really need to.
One thing I was considering is perhaps moving style-based images and javascript libraries to a non-secure sub-domain so that the browser could cache these resources that don't pose a security risk (a gradient isn't exactly sensitive material).
I wanted to see what other people thought about doing something like this. Is this a feasible idea or should I go about optimizing my site in other ways like using CSS sprite-maps, etc. to reduce requests and bandwidth?
Browsers (especially IE) get jumpy about this and alert users that there's mixed content on the page. We tried it and had a couple of users call in to question the security of our site. I wouldn't recommend it. Having users lose their sense of security when using your site is not worth the added speed.
Do not mix content, there is nothing more annoying then having to go and click the yes button on that dialog. I wish IE would let me always select show mixed content sites. As Chris said don't do it.
If you want to optimize your site, there are plenty of ways, if SSL is the only way left buy a hardware accelerator....hmmm if you load an image using http will it be cached if you load it with https? Just a side question that I need to go find out.
Be aware that in IE 7 there are issues with mixing secure and non-secure items on the same page, so this may result in some users not being able to view all the content of your pages properly. Not that I endorse IE 7, but recently I had to look into this issue, and it's a pain to deal with.
This is not advisable at all. The reason browsers give you such trouble about insecure content on secure pages is it exposes information about the current session and leaves you vulnerable to man-in-the-middle attacks. I'll grant there probably isn't much a 3rd party could do to sniff venerable info if the only insecured content is images, but CSS can contain reference to javascript/vbscript via behavior files (IE). If your javascript is served insecurely, there isn't much that can be done to prevent a rouge script scraping your webpage at an inopportune time.
At best, you might be able to get a way with iframing secure content to keep the look and feel. As a consumer I really don't like it, but as a web developer I've had to do that before due to no other pragmatic options. But, frankly, there's just as many if not more defects with that, too, as after all, you're hoping that something doesn't violate the integrity of the insecure content so that it may host the secure content and not some alternate content.
It's just not a great idea from a security perspective.