I'm trying to enable HTTPS on my website, and I'm running into an issue where the https web page is importing js/css/fonts/etc from https locations, but the browser is seeing some (not all) of these as http links.
See example on JSFiddle:
<html>
<head>
<!-- This loads correctly as HTTPS content -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- This is blocked by the browser as Mixed Active Content, even though the page scheme is https -->
<script type="text/javascript" src="//highcharts.com/highslide/highslide-full.min.js"></script>
<!-- Explicitly setting `https` does not change the result -- it still considers this `http` -->
<script type="text/javascript" src="https://highcharts.com/highslide/highslide-full.min.js"></script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
What is going on? Is the problem at the source? Why does it appear that the browser is arbitrarily replacing https with http? Is it pulling from its cache? (I've tried using Ctrl-F5; is there a better way to rule this out? Why would it not also have cached JQuery the same way?)
This looks to be the same question as How to fix "Blocked loading mixed active content" for css and js over https but the accepted solution there did not help. It's difficult to find other related questions because everything I see seems to just be explaining super-basic Mixed Active Content – that you can't use both http and https in the same page, which I already understand.
Related
Embedding the candy-machine-ui v2 in a HTML iframe makes the button not work properly.
https://github.com/metaplex-foundation/metaplex/tree/master/js/packages/candy-machine-ui
You can click it, and it will pop up asking which wallet to connect to, but then nothing happens. There does not appear to be any relevant errors or warnings in the console.
I feel like this is something to do with React/JS not connecting through the iframe to the browser extension (i.e. phantom wallet or whatever).
I have tried adding various "allows" to the iframe with no luck.
Is there some greater understanding I am missing here, or what do I need to do to make my button work?
Working button HTML hosted at https://lorex.com.au/site/:
<html>
<body>
<div id="root"></div>
<script src="./static/js/main.ba6e3380.js"></script>
</body>
</html>
Page with non-working button in an iframe https://lorex.com.au/site_example/:
<html>
<body>
<iframe src="https://lorex.com.au/site"></iframe>
</body>
</html>
I have a page which has basic authentication on it. Once I've authenticated my requests for the page and it's resources (CSS etc) have the Authentication header
Authorization Basic NOTREALNOTREALNOTREALNOTREALNOTREAL=
At the end of the body I am loading an external script.
<script type="module" src="/main.js"></script>
This request is not being sent with the Authentication header. It is the only thing on the page which isn't. This causes a 401 repsonse with the following header
WWW-Authenticate Basic realm="mydomain.com"
This happens in both chrome and firefox.
Does anyone know why this is the case or how to get it to be sent?
Looks like this is a quirk of <script type="module">, that causes them all to be treated as CORS requests, and thus they don't send Authentication headers by default.
This can be worked around by adding the crossorigin="use-credentials" attribute to your script tag:
<script type="module" src="/main.js" crossorigin="use-credentials"></script>
should work.
I am trying to figure out that why my sub domain website works fine with Http but not when its https.
Is there SSL certification problem.
You have a bunch of scripts that are linking with http. Browsers won't run these on a secure page. You need to change the links to https:
<script src="http://bloodsuvidha.vampy.in/js/bootstrap.min.js" type="text/javascript"></script>
This is also true with stylesheets:
<link rel="stylesheet" type="text/css" href="http://bloodsuvidha.vampy.in/css/bootstrap.min.css">
The answers given till now are correct but none solved my problem.
The main problem was my application was behind CloudFlare
Laravel detects a Request as secure or insecure by checking a HTTP header i.e.
$_SERVER['REQUEST_SCHEME']
which remains HTTP even the Request is HTTPS due to cloudflare.
CloudFlare sets a different header for the same i.e.
$_SERVER['HTTP_X_FORWARDED_PROTO']
Which must be checked to detect a request is secure or not
Following this article and making some changes to this I successfully managed to generate HTTPS URL without making any changes to previous application code.
Credit Cybersupernova (Stack User )
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="http://www.example.com">
</head>
</html>
See this code: canonical href is absolute, page is static and protocol is explicitly declared.
However, if i navigate to https://www.example.com and inspect the page code, i see that browser (tried with chrome and firefox) rewrite that href to be https://www.example.com.
Why so?
My actual issue is with sharing tools, which i'd want to ignore protocol while fetching share statistics.
It turns out that a Cloudflare setting (which i didnt even mention in my question) was overriding all links in pages, so this issue has nothing to do with browsers.
Switching off the Cloudflare "Automatic HTTPS Rewrites" setting solved this.
My English isn't perfect))
I'm interested why I have strange gap between first http request and other requests.
First one screen shows requests delay with laravel php framework.
Second one screen shows request delay with static page (static page has identical content)
app.css and app.js (see screenshot) are attached in with standard way:
<link rel="stylesheet" href="css/app.css"/>
<script type="text/javascript" src="js/app.js"></script>
logo.svg is used with this way:
<img src="img/blocks/header/logo.svg">
All other files are attached in CSS.
Why I have 75ms delay in first case, and 100ms in second case?
Can I get rid of this pause?
Thanks.
I found an answer.
The reason was a couple of extensions installed in my chrome browser.
Problem disappeared after I had disabled extensions.