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.
Related
When loading a website with multiple <script> and <script type="module"> declarations, the Authorization: header is applied for scripts but not for modules.
<script src="lib/a-lib.js"></script> works
<script type="module" src="app/a-module.js"></script> stucks with a 401.
Username/Password in the URL works too: <script type="module" src="https://user:password#domain/app/a-module.js"></script>. But since username:password are not converted to a Header, this is not a solution.
I've just made a quick googling because it's quite interesting and found this:
You can add credentials to a same-origin module by including the crossorigin attribute (which seems a bit weird to me, and I've questioned this in the spec). If you want to send credentials to other origins too, use crossorigin="use-credentials". Note that the other origin will have to respond with the Access-Control-Allow-Credentials: true header.
at jake's site.
Hope it helps ;)
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.
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 )
When attempting to view my site over https, I keep getting a "Blocked loading mixed active content" error in my Firefox console. I am getting this error only for my css and js file.
The reason I am so confused is because the reference to the files in the page code itself is https:
<link rel="stylesheet" href="https://www.example.com/style.css">
But in the console, it shows it as http:
Blocked loading mixed active content "http://www.example.com/style.css"[Learn More]
I can do a view source on the page and search for "http://" and there are no results anywhere on the page.
Any ideas?
I think that you can try with relative protocol caller.
<link rel="stylesheet" href="//www.example.com/style.css">
---------^^
if your users visit your web in http, it loads http, and if the user visit under https it loads https.
This is only for testing purposes, but we have a site that runs on https, and I'm trying to test a new stylesheet on an external server that only has http. However, the browser doesn't seem to recognize the css at all, I'm assuming because it's not https. Is there anyway to force my browser to allow this? It would eventually be on https in production, so I just need a work around for myself. Thanks,
Use a protocol-free URL so the client doesn't recognise it as being an insecure item. The client can then add its own protocol to the request:
i.e. instead of
<link rel="stylesheet" href="http://example.com/css/main.css">
use
<link rel="stylesheet" href="//example.com/css/main.css">