Why is mixed content on google chrome not working - html

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.

Related

Odd Behavior on Image Size in HTTPS

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

HSTS in iFrame src

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.

Mixed content in Chrome and IE

In my HTTPS enabled site I have added an iframe that should show content from my other site, but it is not working under https.
<iframe src="//myothersite.com"></iframe>
In Firefox latest version everything works good.
In Chrome, the iframe isn't loaded and in the console I see these two errors
Mixed Content: The page at 'https://mysite' was loaded over HTTPS, but requested an insecure resource 'http://myothersite.com'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
In IE content load incorrectly and I see an alert message; if I click Allow Insecure Content, it loads correctly.
The question is: how I can do that IE and Chrome as in Firefox (load mixed content without any alerts)?
Note: I haven't changed any browser settings.
Actually Firefox has started to do the same: How to fix a website with blocked mixed content
It makes sense. If the user access a site using HTTPS is expecting to have a secured experience, and he may not be aware of parts of the application loading under not secure connections. That is the reason why the browser blocks such inconsistency.
You will need to provide HTTPS on myothersite.com.
Obviously it's best not to have mixed content to prevent MITM attacks but for those who can't control the url this should do the trick:
Change the src="http://linkToUrl.com" to
src="//linkToUrl.com/script.js"
enter image description here
when i set the url :
from a https request, it report error :
Mixed Content: The page at 'https://127.0.0.1/index.html' was loaded over HTTPS, but requested an insecure resource 'http://127.0.0.1:8080/download/1.txt'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
when i added the target="_blank" to the url: <a target="_blank" href="http://127.0.0.1:8080/download/1.txt">, it works! , it works!
it's well known that target="_blank" means opening the linked document in a new window or tab or a new request!
I'm sorry this isn't as technical as the other answers, but I had the same problem linking jsquery like this, and for me it fixed just by changing http:// to https://. It may not work, but it worked for me and it might work for you.
Problem is mixed content, the browser won't allow us to just do that.
You need change url from:
http://example.com
to
//example.com
I'm having other complication with CloudFlare, it doesn't load as the file has been cached as http. Just go to CloudFlare and "Purge Everything" in cache tab, or else turn on "Development Mode".

Why my https site url is striked red though I have configured and made it secure

I have bought comodo certificate for my site to have https link and has 128bit ssl encryption.But it still says my site is not secure.When I checked the ssl verifcation of my site,it says everything is secure
http://i.stack.imgur.com/EnVH9.png
this is how it shows. Is it because my site have external links to http ? Or what are all the mandatory things to be done in my webpage to have the https in green and have full secure identification ? Why does it says that my page has "Other resources which are not secure,these resources can be viewed by others in transit and can be modified by an attacker to change the behaviour of the page?
what can be this "other resources" which are not secure??
This is because you are making cross-protocol requests. You likely have embedded content with http, such as <img src="http://mydomain.com/myimage.jpg">, if that is the case, let the browser resolve the protocol for you by change the requests to <img src="//mydomain.com/myimage.jpg">. Doing that will allow the current page protocol to be used when resolving the document. Note, it might not be your content, you might have other embedded content such as analytics, but in general, you cannot mix protocols when in https.

Problems loading style sheets over https

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">