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();
}

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


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.


3
Kenapa windowdan tidak document?
webjay


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 .


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


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.


port tidak ada
eadmaster

13
if (location.protocol == 'http:')
  location.href = location.href.replace(/^http:/, 'https:')

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


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>

Berhasil. Apakah ini cara standar untuk mengarahkan ulang? apakah ini akan bekerja di semua browser?
mahfuz



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>

0

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


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>

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

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.