I recently applied an SSL certificate to my domain, but I'm having problems with some of the styles when viewing my website on HTTP:// the styles are fine. But, when viewing it through HTTPS:// no styles are applied at all.
I found out what the problem was. I wasn't loading my third party styles through HTTPS. I switched to HTTPS, and all problems were solved.
You're probably using an http:// link to a stylesheet on an https:// website.
Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).
The reason for this blocking is that insecure HTTP resources like stylesheets and scripts could still be modified by an attacker and used to spoof/hijack secure parts of the site.
If the stylesheet is served from your server, then omit protocol+host part of the URL, i.e. instead of http://example.com/style.css use /style.css as the URL, so it'll work on both HTTP and HTTPS. You can also use protocol-relative URLs.
If you have to have one full URL, then use https://… URLs only.
If the requested URI is https, if you have resources on the page (images, stylesheets, JavaScript files et. al.) that are requested with the http scheme some browsers may block them because they are considered insecure. You can circumvent that per-browser, but you also have alternatives in your code:
Use https to request everything, or at least match the schems.
Use // to indicate the scheme. The browser will match the scheme with the request URI. For example: <link rel="stylesheet" type="text/css" href="//example.com/path/to.css">
Related
I have been learning HTML and CSS and i am creating a WebSite there is a section where I add 3 images, and this images have an odd behavior when displaying.
when I access to the website on Samsung Internet under HTTP i get them as expected: like this
but when I access under HTTPS i get: this
I have notice that it works under HTTP and HTTPS on other browsers like chrome.
This issue is an instance of mixed content that occurs when HTML pages load over a secure HTTPS connection but link to resources (images, CSS, or JS) over an insecure HTTP connection. This is generally triggered by inputting an image within the page that runs over an HTTP connection. When you upload and post images but do not update the image links on the page after getting an SSL certification, the browsers will recognize them as insecure elements.
For your own domain, serve all content as HTTPS and fix your links. Often, the HTTPS version of the content already exists, and this just requires adding an “s” to links – http:// to https://.
For images hosted on other domains, use the site’s HTTPS version if available.
sitechecker
I have a site that is loaded over secure connection (https://). I have a href to http:// that downloads a file. I want to use the mixed content solution here(I know I should do https:// but for now I want to use http://). So for the fix I added <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to the head. For some reason I still get the Mixed Content error in google chrome. My current chrome version is 88.
From MDN:
The HTTP Content-Security-Policy (CSP) upgrade-insecure-requests directive instructs user agents to treat all of a site's insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS).
That directive does not allow mixed content. It just treats all http: links as if they were https: links (e.g. if a link which points to http://google.com/ is clicked, the browser navigates to https://google.com/). The only ways (AFAIK) to allow mixed content are to either:
serve your content via plain HTTP, or
allow mixed content manually in the site's settings.
So I'm pretty familiar with html, css and java Script. And this moving company I work for wanted to know if I could fix this unsecured link in there html. I used Why no Padlock? and found that this link in the head tags is unsecure
https://www.whynopadlock.com/results/bcfb1f57-2f59-4787-8979-24beea641fe0
You can see that it's using http. Would making it https fix the issue or break the link?
Test result:
A file with an insecure url of "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext" was loaded on line: 20 of your site.
This URL will need to be updated to use a secure URL for your padlock to return.
I just had a look at your test results, it basically says that you include a google fonts stylesheet. Update that <link to use https:// and you should be good.
Making it https:// will make your site inaccessible if you haven't obtain what is called SSL for your domain.
To fix that, obtain a SSL certificate for your website and the site will be served with https:// even when accessed with http://
I'm building an app that needs to serve websites in an iframe. Since the websites are decided by the user, they usually enter only the domain name, like google.com, or facebook.com. To render the website in an iframe i need to add http:// to this (I can't add https://, since the website may not be served over ssl which will cause it to not render at all.)
For this reason, I am forced to not use ssl on my website, since due to the mixed content policy, I can't add iframes that request http. I wish to know if there's a way to force hsts in the iframe src. For example, if I request http://example.org, the iframe will automatically render https://example.org (since it exists.)
HTTPS doesn't allow you to serve HTTP content. All content on the page must be a secure connection, including iFrame. This is browser standard so there's no work around to be had. Either your page has to be HTTP or the iFrame has to be HTTPS.
It's my understanding that if you have an https site you want all external files - js, css, images, etc - to be https as well, lest you get warnings about having some content that isn't secure or something.
Well I just tried that out and didn't get any warnings at all.
Where do I see these warnings? Also, assuming this is true... is the opposite true? Do you risk any warnings if you include https content on an http site?
FWIW I tried this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Google has people doing this by default:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
That'll make it so it's fetched from either http or https depending on what your website is using. Of course if https on http doesn't give any warnings it seems that doing https for all js files would work just as well..
Error messages will be displayed on the user/viewer's browser.
[This site] (https://security.stackexchange.com/questions/1692/is-posting-from-http-to-https-a-bad-practice) has some explanation why there are error messages.
Assuming you are asking how google's code works, it is called a protocol-relative URL. The protocol of the linked file will inherit the protocol of the page including it.
So if your page is https then it would send for it over https.
You can use
<script src="https://ajax.googleapis.com/ajax/jquery/1.8.3/jquery.min.js"></script>
Or remove the "https:" and have the js sent over https, provided your page is https.
Just to add another thing, if you load content through http on a https webpage, then you'll get warnings, but if you do the opposite, then there wont be any, but keep in mind that https is a slower than http. So use https only on https pages.