I am trying to display images from a non-ssl url source on my ssl site through relative linking, making sure the padlock shows up green and does not message mixed content. Though I understand this might not be the best way going forward I have 2 questions:
1) I have 2 sources:
http://bc01.rp-online.de/polopoly_fs/benito-raman-fortuna-duesseldorf-2017-1.7053738.1516622253!httpImage/1633501625.jpg_gen/derivatives/d950x950/1633501625.jpg
and
http://bilder.bild.de/fotos-skaliert/prinzessin-eugenie-ist-verlobt-200668711-54556312/3,w=120,c=0.bild.jpg
If I convert the first source to:
//bc01.rp-online.de/polopoly_fs/benito-raman-fortuna-duesseldorf-2017-1.7053738.1516622253!httpImage/1633501625.jpg_gen/derivatives/d950x950/1633501625.jpg
it will not be displayed in Chrome.
If I convert the second source to:
//bilder.bild.de/fotos-skaliert/prinzessin-eugenie-ist-verlobt-200668711-54556312/3,w=120,c=0.bild.jpg
it will be displayed in Chrome and padlock shows green.
Can someone explain me the difference?
2) Is there a better way to show images from non-SSL URL's external sources in a SSL site making sure the padlock is green.
Any help would be highly appreciated.
Funny you should post this. I had a really odd behaviour for something similar to this today and you have no choice but to use //example.com/...... and this is just a (Google) Chrome thing.
The difference here is that in using //, it will automatically resolve to the respective protocol; which you should use and this for JS scripts, images, forms etc.
NOTE: If there is any mix of http/https anywhere in your code, then that too will cause havoc and will throw a message in any browser about mixed content.
If your urls starts with "//" it means that the browser should use the protocol of the parent webpage. In your case it's https.
So your two links becames:
https://bc01.rp-online.de/polopoly_fs/benito-raman-fortuna-duesseldorf-2017-1.7053738.1516622253!httpImage/1633501625.jpg_gen/derivatives/d950x950/1633501625.jpg
But bc01.rp-online.de doesn't have a valid https certificate.
and
https://bilder.bild.de/fotos-skaliert/prinzessin-eugenie-ist-verlobt-200668711-54556312/3,w=120,c=0.bild.jpg
which works perfectly.
If you include http images in your https website, chrome doesn't show the "secure" green padlock because your website is not fully secure: some items may be intercepted/modified by a third party.
To have the green padlock you should only use secure (https) images/resources. If these images are not available with https (or if their https links are broken or redirect to http) then you need to find another solution, such as hosting yourself the images.
Related
When i brows website using its ip address the style loading fine. But when i try to do it using domain name then style not working. The interesting thing is that i have checked both output html, css source for code and they are 100% same. Then why browser not showing style in domain mode?
direct ip browse- view-source:http://22.199.66.33/
domain browse- view-source:https://www.ogibogi.com/
here i checked both source output code- https://www.diffchecker.com/diff
Any idea how to fix it?
Note: i am using cloudflare with domain.
Note: that this is happening after changing hosting server.
Check the output in your browser's console. There's mixed content error.
Refer to Cloudflare KB on how to troubleshoot mixed content error.
An easy fix is to enable "Always Use HTTPS" and "Automatic HTTPS Rewrite".
The answer from Faiz is correct. Go to the crypto tab and set Automatic HTTPS rewrites to on. But, that will not affect stylesheets or javascript files. And, you have two missing scripts and one missing css file.
To correct those, you'll need to use a relative reference. If you're calling an asset with a full URL, like <img src="http://example.com/image.jpg" />, you would want to change this to <img src="//example.com/image.jpg" />. By removing the http:, the browser will use whichever protocol the visitor is already using. And, on the crypto tab, if you set Always use https to on, that protocol will be https.
I have an old site I am just about well enough (broken arm + cancer) to start working on again and I have already moved it to another server OVH and added an SSL/TLS certificate to it.
However in Chrome when I visit any page on the site, especially https://www.strictly-software.com/plugins/order.asp it shows either (don't know why refreshes would change it but they do sometimes) the insecure sign with the red line through the https:// part of the URL in the address bar or an information circle.
In Firefox however I get a secure lock sign. It maybe some add-on I have used like a popup blocker or something but I am at a loss to find out what is causing these insecure signs to appear when I need locks, especially on the order page
This morning I spent hours going through loads of JavaScript and CSS (background:http://blah.jpg) etc and changing it so it is local and cannot be changed remotely as well as making any http references into src="//" or href="//" etc.
I thought it must be one of the images on the "add this" pop up but cannot see anything in their code. Then I thought the Twitter scroller might be showing images from http destinations but Twitter wraps them all in their own URL format.
Does anyone know from looking at the generated source code what is making the page insecure?
Surely there should be a list somewhere in the browser that shows what content isn't secure and offers you to load or not load it? I know the information icon lets you load or not lot Flash, images or JavaScript but do you know of how I can find out what content isn't secure on these pages without asking visitors?
Thanks in advance.
I am not that good at explaining so for example (and this is my actual site), http://securityfenceonline.com/ has a different font on the header menus then http://www.securityfenceonline.com/ does. Basically my question here is how do i get the fonts from the site that starts with www to work on the site that doesn't have a www. My second question is why are there two different urls to access the same website. Thank you so much!!
Coded with: HTML
Uses some Joomla
Newbie at coding
Your DNS entries are configured to point both securityfenceonline.com and www.securityfenceonline.com to the same server. This isn't uncommon. What should be happening though is your server should be configured to 301-redirect one to the other. Otherwise you're creating duplicate content which isn't good for SEO purposes.
The font issue is that you're trying to load a font cross-domain (from www.). You can't do this without the appropriate CORS headers. If you look in your developer console, you should see something like:
Font from origin 'http://www.securityfenceonline.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://securityfenceonline.com' is therefore not allowed access.
If you were to redirect to only one hostname, you wouldn't have this issue. You really should be referencing files in your CSS by relative paths though, as this would also solve the issue.
I did a search and could not find an answer on here to my question. What I am confused about is what URLs on an https page need to be https, as opposed to http.
I am making a series of pages my website that must be accessed over https. At the top of the pages is a menu. I accidentally included a style sheet into the page using http, instead of https, and all the browsers I tried gave me a warning about insecure content. But, I can leave the menu links at the top of the page http, and there's no problem.
So, am I correct in saying that things that are being loaded onto the page, such as style sheets and images, need to have https in the link, but that plain old href links can just have http in them?
Thanks for your advice.
Generally your secure pages such as purchase page, credit card etc processing pages are set to https or sometimes all pages such as websites for banks or other financial institutes or even login pages.
You can leave it to browser to deciper http or https part by using what is called protocol-relative URLS in which you simply do not specify either of http or https and still browser will be able to figure it out. An example:
//example.com
//google.com
Let's say your domain is foo.com, you would specify all URLs like:
//foo.com/page1.html
//foo.com/otherpage
So you simply leave the http or https part in your URLs.
To know more about protocol-relative URLS, see:
http://paulirish.com/2010/the-protocol-relative-url/
Yes, all links that are used to create the page itself (the HTML, the CSS, JavaScript, the images) need to be served over https. That means all URLs of that domain need to be served over https.
Links to other websites can be http just fine. You may want to check if those links can be visited over https as well because then the user will use a secure connection to visit those website as well.
Is there a reason we include the http / https protocol on the href attribute of links?
Would it be fine to just leave it off:
my site
The inclusion of the “http:” or “https:” part is partly just a matter of tradition, partly a matter of actually specifying the protocol. If it is defaulted, the protocol of the current page is used; e.g., //www.example.com becomes http://www.example.com or https://www.example.com depending on the URL of the referring page. If a web page is saved on a local disk and then opened from there, it has no protocol (just the file: pseudo-protocol), so URLs like //www.example.com won’t work; so here’s one reason for including the “http:” or “https:” part.
Omitting also the “//” part is a completely different issue altogether, turning the URL to a relative URL that will be interpreted as relative to the current base URL.
The reason why www.example.com works when typed or pasted on a browser’s address line is that relative URLs would not make sense there (there is no base URL to relate to), so browser vendors decided to imply the “http://” prefix there.
URLs in href are not restricted to only HTTP documents. They support all the protocols supported by browsers- ftp, mailto, file etc.
Also, you can preceed URL name with '#', to link to a html id internally in the page. You can give just the name or directory path, without a protocol, which will be taken as a relative URL.
My solution was to trick the browser with a redirect service, such as bit.ly and goo.gl (which will be discontinued soon), in addition to others.
When the browser realizes that the url of the shortcuts is https, it automatically releases the link image, the link is released and instead displays the http image, without showing the original link.
The annoying part is that, according to the access, it will display in the panel control of your redirector, thousands of "clicks", which is actually "display".
With this experience I'm going to look for a Wordpress plugin for redirection and create my own "redirects links". So I will have https // mysite.com /id → redirect to http link.