Detect HTTP or HTTPS then force HTTPS in JavaScript
JavascriptHttpswindow.locationJavascript Problem Overview
Is there any way to detect HTTP or HTTPS and then force usage of HTTPS with JavaScript?
I have some codes for detecting the HTTP or HTTPS but I can't force it to use https:
.
I'm using the window.location.protocol property to set whatever the site is to https:
then refresh the page to hopefully reload a new https'ed URL loaded into the browser.
if (window.location.protocol != "https:") {
window.location.protocol = "https:";
window.location.reload();
}
Javascript Solutions
Solution 1 - Javascript
Try this
if (location.protocol !== 'https:') {
location.replace(`https:${location.href.substring(location.protocol.length)}`);
}
location.href = blah
adds this redirect to the browser history. If the user hits the back button, they will be redirected back to the the same page. It is better to use location.replace
as it doesn't add this redirect to the browser history.
Solution 2 - Javascript
Setting location.protocol navigates to a new URL. No need to parse/slice anything.
if (location.protocol !== "https:") {
location.protocol = "https:";
}
Firefox 49 has a [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=726779 "document.location.protocol setter raising errors when protocol has a trailing ':'") where https
works but https:
does not. Said to be [fixed in Firefox 54](https://bugzilla.mozilla.org/show_bug.cgi?id=1328894 "location.protocol behaves incorrectly").
Solution 3 - Javascript
It is not good idea because you just temporary redirect user to https and browser doesn't save this redirect.
You describe task for web-server (apache, nginx etc) http 301, http 302
Solution 4 - Javascript
How about this?
if (window.location.protocol !== 'https:') {
window.location = 'https://' + window.location.hostname + window.location.pathname + window.location.hash;
}
Ideally you'd do it on the server side, though.
Solution 5 - Javascript
if (location.protocol == 'http:')
location.href = location.href.replace(/^http:/, 'https:')
Solution 6 - Javascript
You should check this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
Add this meta tag to your index.html inside head
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Hope it helped.
Solution 7 - Javascript
Not a Javascript way to answer this but if you use CloudFlare you can write page rules that redirect the user much faster to HTTPS and it's free. Looks like this in CloudFlare's Page Rules:
Solution 8 - Javascript
You can do:
<script type="text/javascript">
if (window.location.protocol != "https:") {
window.location.protocol = "https";
}
</script>
Solution 9 - Javascript
I like the answers for this question. But to be creative, I would like to share one more way:
<script>if (document.URL.substring(0,5) == "http:") window.location.replace('https:' + document.URL.substring(5));</script>
Solution 10 - Javascript
The below code assumes that the variable 'str' contains your http://.... string. It checks to see if it is https and if true does nothing. However if it is http it replaces http with https.
if (str.indexOf('https') === -1) {
str = str.replace('http', 'https')
}
Solution 11 - Javascript
Functional way
window.location.protocol === 'http:' && (location.href = location.href.replace(/^http:/, 'https:'));
Solution 12 - Javascript
Hi i used this solution works perfectly.No Need to check, just use https.
<script language="javascript" type="text/javascript">
document.location="https:" + window.location.href.substring(window.location.protocol.length, window.location.href.length);
</script>
Solution 13 - Javascript
I have just had all the script variations tested by Pui Cdm, included answers above and many others using php, htaccess, server configuration, and Javascript, the results are that the script
<script type="text/javascript">
function showProtocall() {
if (window.location.protocol != "https") {
window.location = "https://" + window.location.href.substring(window.location.protocol.length, window.location.href.length);
window.location.reload();
}
}
showProtocall();
</script>
provided by vivek-srivastava works best and you can add further security in java script.