Deteksi HTTP atau HTTPS kemudian paksa HTTPS dalam JavaScript

298

Apakah ada cara untuk mendeteksi HTTP atau HTTPS dan kemudian memaksa penggunaan HTTPS dengan JavaScript?

Saya memiliki beberapa kode untuk mendeteksi HTTP atau HTTPS tetapi saya tidak bisa memaksanya untuk menggunakannya https:.

Saya menggunakan properti window.location.protocol untuk mengatur apa pun situs tersebut untuk https:kemudian menyegarkan halaman untuk semoga memuat ulang URL https'ed baru yang dimuat ke dalam browser.

if (window.location.protocol != "https:") {
   window.location.protocol = "https:";
   window.location.reload();
}
javascript https window.location Pengguna Terdaftar
sumber
15
Ini jauh lebih andal (dan efisien) ditangani sisi server.
Quentin
3
Saya pikir kamu benar. Sebagai penyerang yang menggunakan serangan MITM, saya bisa menghapus kode ini. Jadi ia hanya menawarkan perlindungan terhadap serangan pasif.
ndevln
Bagian deteksi adalah duplikat dari Bagaimana saya bisa menggunakan JavaScript di sisi klien untuk mendeteksi jika halaman itu dienkripsi? dari 2008.
Dan Dascalescu
1
@NeoDevlin, penyerang MITM di http dapat menggantikan pengalihan sisi server juga
Alex Lehmann
1
Persis. Pada 2018, tidak ada alasan untuk tidak menggunakan HSTS. Ini adalah satu-satunya cara aman untuk memaksa HTTPS.

Jawaban:

501

Coba ini

if (location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

location.href = blahmenambahkan pengalihan ini ke riwayat browser. Jika pengguna menekan tombol kembali, mereka akan diarahkan kembali ke halaman yang sama. Lebih baik digunakan location.replacekarena tidak menambahkan pengalihan ini ke riwayat browser.

Soumya
sumber
3
Kenapa windowdan tidak document?
webjay
5
@webjay lihat stackoverflow.com/a/2431375/228534 dan stackoverflow.com/a/12098898/228534
Soumya
11
Haruskah perbandingan string dilakukan !==?
Wes Turner
5
@WesTurner Seharusnya tidak masalah. Mereka berdua selalu akan menjadi dawai. Jika satu angka atau boolean, maka itu mungkin membuat perbedaan.
Soumya
15
location.replace(url)akan jauh lebih baik daripada location.href = urluntuk kasus ini. Anda tidak ingin pengalihan ini dalam riwayat browser atau pengguna menekan tombol kembali hanya untuk diarahkan kembali.
Francisco Zarabozo
59

Pengaturan location.protocol menavigasi ke URL baru . Tidak perlu menguraikan / mengiris apa pun.

if (location.protocol !== "https:") {
  location.protocol = "https:";
}

Firefox 49 memiliki bug di mana httpsbekerja tapi https:tidak. Dikatakan telah diperbaiki di Firefox 54 .

sam
sumber
2
if window.location.href.match('http:') window.location.href = window.location.href.replace('http', 'https')bekerja pada FF dan Chrome terbaru.
Martin Stannard
2
location.protocol = "https";tampaknya bekerja meskipun di firefox 28
Nick Russler
1
Omong kosong yang merusak tombol kembali. Gunakan location.replacesebagai gantinya.
Simpanse suka berperang,
22

Ini bukan ide yang baik karena Anda hanya mengarahkan sementara pengguna ke https dan browser tidak menyimpan redirect ini.

Anda menjelaskan tugas untuk web-server (apache, nginx dll) http 301, http 302

b1_
sumber
3
setuju. Memaksa https di server jauh lebih andal
Hoa Long
3
Saya bisa melihatnya digunakan jika menjaga nilai hash itu penting. Itu tidak dikirim ke server dan beberapa browser tidak melestarikannya.
Jason Rice
Berikut adalah link untuk Set Azure Situs Web untuk https hanya ... blogs.msdn.com/b/benjaminperkins/archive/2014/01/07/...
OzBob
1
Belum tentu benar. Ada aliran pemikiran bahwa 301 adalah setan karena alasan caching. getluky.net/2010/12/14/301-redirects-cannot-be-undon
fivedogit
2
Meskipun benar bahwa umumnya bukan ide yang baik untuk melakukan sisi klien ini, ini bukan yang diminta. Dan Anda tidak menunjukkan cara melakukannya, maka ini bukan jawaban. Juga, pada hari-hari ini halaman web statis, sering kali tidak ada cara untuk melakukan sisi server ini (pikirkan halaman Github), artinya Anda harus melakukan ini pada klien. Namun, Anda dapat membantu meningkatkan pencarian dengan menambahkan tag tautan kanonik untuk menghindari orang-orang memukul versi non-ssl.
oligofren
16

Bagaimana dengan ini?

if (window.location.protocol !== 'https:') {
    window.location = 'https://' + window.location.hostname + window.location.pathname + window.location.hash;
}

Idealnya Anda akan melakukannya di sisi server.

keirog
sumber
port tidak ada
eadmaster
13 
if (location.protocol == 'http:')
  location.href = location.href.replace(/^http:/, 'https:')
Steven Penny
sumber
5

Bukan cara Javascript untuk menjawab ini tetapi jika Anda menggunakan CloudFlare Anda bisa menulis aturan halaman yang mengarahkan pengguna lebih cepat ke HTTPS dan gratis. Sepertinya ini dalam Aturan Halaman CloudFlare:

masukkan deskripsi gambar di sini

Mikeumus
sumber
Saya benar-benar menemukan ini sangat berguna, bukan untuk menjawab pertanyaan sebagai berbingkai, tetapi untuk memberikan informasi berguna tentang cara yang mungkin lebih dapat diandalkan untuk layanan SaaS yang tidak menawarkan SSL selalu aktif.
MrMesees
3

Anda dapat melakukan:

  <script type="text/javascript">        
        if (window.location.protocol != "https:") {
           window.location.protocol = "https";
        }
    </script>
M.BRAHAM
sumber
Berhasil. Apakah ini cara standar untuk mengarahkan ulang? apakah ini akan bekerja di semua browser?
mahfuz
1

Cara fungsional

window.location.protocol === 'http:' && (location.href = location.href.replace(/^http:/, 'https:'));
Дмитрий Васильев
sumber
0

Saya suka jawaban untuk pertanyaan ini. Tetapi untuk menjadi kreatif, saya ingin berbagi satu cara lagi:

<script>if (document.URL.substring(0,5) == "http:") {
            window.location.replace('https:' + document.URL.substring(5));
        }
</script>
Charles Hamel
sumber
0 

if (str.indexOf('https') === -1) {
  str = str.replace('http', 'https')
}
Luaskan cuplikan

Kode Awam
sumber
1
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa memecahkan masalah akan meningkatkan nilai jangka panjang jawaban.
Donald Duck
-1 
<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>
Vivek Srivastava
sumber
-1

Hai saya menggunakan solusi ini bekerja dengan sempurna. Tidak Perlu memeriksa, cukup gunakan https.

<script language="javascript" type="text/javascript">
document.location="https:" + window.location.href.substring(window.location.protocol.length, window.location.href.length);
</script>
BrAiNee
sumber
3
tidak akan me-refresh halaman ini meskipun protokolnya adalah https?
Anthony
-2

Saya baru saja menguji semua variasi skrip oleh Pui Cdm , termasuk jawaban di atas dan banyak lainnya menggunakan php, htaccess, konfigurasi server, dan Javascript, hasilnya skrip

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

disediakan oleh vivek-srivastava berfungsi paling baik dan Anda dapat menambahkan keamanan lebih lanjut dalam skrip java.

Peter
sumber