Cara Membangun Situs Web yang Aman dengan CloudFront Password Protect

Diterbitkan: 2023-01-15

Memegang pangsa pasar komputasi awan terbesar sebesar 41,5%, Amazon Web Service (AWS) adalah layanan komputasi awan paling populer saat ini. Ini memungkinkan bisnis dan individu untuk menghosting aplikasi dan situs web mereka di server Amazon dengan harga murah.

Salah satu komponen penting AWS adalah Amazon CloudFront. Ini adalah jaringan pengiriman konten (CDN) yang dibangun untuk memaksimalkan kecepatan pemuatan setiap pengunjung ke situs web Anda yang dihosting oleh AWS.

Tetapi tahukah Anda bahwa Anda dapat menggunakan CloudFront untuk mengunci situs web Anda di balik permintaan kata sandi? Panduan ini akan menunjukkan cara menggunakan fitur perlindungan kata sandi AWS CloudFront untuk mengamankan situs web Anda.

  • Apa yang Dilindungi Kata Sandi CloudFront?
  • Cara Mengamankan Situs Web CloudFront dengan Kata Sandi
    • Menggunakan [dilindungi email]
    • Memanfaatkan AWS S3 dan Lambda untuk Menambahkan Autentikasi Dasar

Apa yang Dilindungi Kata Sandi CloudFront?

Amazon CloudFront mempercepat akses pengguna ke aplikasi dan situs web Anda dengan mengirimkan konten melalui berbagai pusat data di seluruh dunia. Saat pengguna mengakses situs web Anda, konten dikirimkan dari pusat yang paling dekat dengan posisi geografisnya. Ini, sebagai hasilnya, mempercepat kecepatan pemuatan.

Selama Anda menggunakan Amazon CloudFront untuk mendistribusikan konten, Anda dapat menggunakan fitur perlindungan kata sandi sistem. Sistem masih berfungsi jika situs web Anda dihosting di dalam wadah S3 atau instans EC2.

Berikut skema sistem CloudFront standar. Ini menjelaskan bagaimana permintaan dari pengunjung web (ke kanan) mengalir melalui CloudFront dan subsistem lain untuk sampai ke asal (tempat konten disimpan). Di asalnya, data diambil dan mengalir kembali ke pengunjung.

ppwp-cloudfront-password-protect-system

Ini mungkin terlihat membingungkan, terutama bagi orang yang baru pertama kali mendengar tentang CloudFront. Tetapi memahami bagan ini dan komponennya sangat penting untuk bagian selanjutnya.

Cara Mengamankan Situs Web CloudFront dengan Kata Sandi

Anda dapat menggunakan beberapa metode untuk mendorong prompt kata sandi ke situs web Anda yang dilayani CloudFront. Kami akan menunjukkan kepada Anda 2 cara dalam panduan ini.

Menggunakan [dilindungi email]

[email protected] adalah fitur CloudFront yang memungkinkan Anda menjalankan kode kustom lebih dekat dengan pelanggan. Dengan begitu, kinerja pemuatan ditingkatkan. Jika Anda memilih untuk menggunakan [email protected], setiap kali pengunjung meminta untuk mengambil konten untuk situs web Anda, mereka harus melalui fungsi ini terlebih dahulu.

Jika Anda memodifikasi [email dilindungi] untuk bekerja hanya jika pengguna memberikan kata sandi yang benar, Anda kurang lebih memiliki lapisan perlindungan kata sandi untuk situs web Anda.

Itulah ide dasar di balik metode keamanan CloudFront ini.

ppwp-lambda-edge

Langkah 1: Menerapkan Fungsi [email protected].

[email dilindungi] adalah fungsi Lambda yang hanya diterapkan di wilayah us-east-1 (Virginia Utara). Jadi, untuk menerapkannya, Anda harus masuk ke wilayah yang tepat:

  1. Masuk ke akun AWS Anda, lalu klik Buat Fungsi .
  2. Anda akan diminta memasukkan nama fungsi. Pilih sesuatu yang mendasar seperti BasicAuth . Sebagai runtime, pilih Node.js 12.x .
  3. Selesaikan kreasi dengan menekan tombol Buat Fungsi .
  4. Sekarang Anda akan melihat file bernama index.js di jendela Kode Fungsi . Klik di atasnya, dan Anda akan melihat Kode Lambda default. Ganti dengan kode khusus ini:
 'gunakan ketat';

ekspor.handler = (acara, konteks, panggilan balik) => {

// kredensial autentikasi
var i = 0, authStrings = [], authCredentials = [
'pengguna1: kata sandi pengguna',
];

// buat string Basic Auth
authCredentials.forEach(elemen => {
authStrings[i] = "Basic " + new Buffer(element).toString('base64');
saya++;
}
);

// dapatkan permintaan dan tajuk permintaan
permintaan const = event.Records[0].cf.request;
header const = permintaan.header;

// memerlukan autentikasi Dasar
if (typeof headers.authorization == 'undefined' ||
!authStrings.includes(headers.authorization[0].value)) {

respons konstan = {
status: '401',
statusDeskripsi: 'Tidak sah',
tubuh: 'Tidak sah',
tajuk: {
'www-otentikasi': [ {key: 'WWW-Autentikasi',
nilai: 'Basic realm="Otentikasi"'} ]
},
};

callback(null, tanggapan);
}

// lanjutkan pemrosesan permintaan jika autentikasi berhasil
callback(null, permintaan);
};

Kredensial login default disimpan dalam fungsi ini di baris:

 'pengguna1: kata sandi pengguna',

Formatnya adalah “akun:kata sandi” . Anda dapat mengubahnya menjadi apa pun yang Anda inginkan. Plus, Anda juga dapat menambahkan lebih banyak kredensial masuk dengan menduplikasi baris ini.

5. Setelah kode khusus diganti, klik Terapkan untuk memasukkan kode.

6. Arahkan ke menu Actions di bagian atas, klik Publish New Version , lalu pilih Publish . Jangan ubah pengaturan apa pun di sana.

7. Temukan string ARN di kanan atas layar dan salin. Langkah ini sangat penting. String ARN terlihat seperti ini:

 arn:aws:lambda:us-timur-1:XXXXXXXXXXXX:fungsi:basicAuth:1

Langkah 2: Siapkan Hubungan Kepercayaan

  1. Buka Konsol IAM dan login.
  2. Masukkan nama fungsi [email protected] Anda ( BasicAuth pada langkah sebelumnya).
  3. Temukan tab Hubungan kepercayaan dan klik Edit . Ganti kode di dalamnya dengan ini:
 {
"Versi": "17-10-2012",
"Penyataan": [
{
"Efek": "Izinkan",
"Kepala sekolah": {
"Melayani": [
"lambda.amazonaws.com",
"edgelambda.amazonaws.com"
]
},
"Aksi": "sts:AssumeRole"
}
]
}

4. Selesaikan proses dengan mengklik Perbarui Kebijakan Kepercayaan .

Langkah 3: Konfigurasi Perilaku Cache

  1. Buka CloudFront dan masuk. Klik situs web yang dilayani CloudFront yang ingin Anda kunci dengan kata sandi.
  2. Pilih Perilaku , temukan kotak centang Pola Jalur URL , dan centang. Terus klik Edit .
  3. Temukan bagian bernama Lambda Function Associations . Temukan menu scroll-down dan cari Select Event Type , lalu Viewer Request . Rekatkan string ARN yang Anda salin sebelumnya di langkah 1.
  4. Tekan Ya, Edit . Setelah ini, CloudFront akan memakan waktu sekitar 5 menit untuk mem-boot ulang dan memuat ulang pengaturan baru.

Langkah 4: Periksa kembali Situs Web

Kunjungi situs web Anda setelah CloudFront melakukan boot ulang. Jika Anda disambut dengan prompt login, Anda telah berhasil.

Seharusnya terlihat seperti ini:

ppwp-lambda-cloudfront-password-protect

Memanfaatkan AWS S3 dan Lambda untuk Menambahkan Autentikasi Dasar

Dalam metode ini, kami akan menggunakan pendekatan gabungan AWS S3 dan Lambda untuk mencapai hal yang sama seperti yang kami lakukan di atas: membuat formulir autentikasi dasar untuk situs web.

Langkah 1: Buat Bucket S3

AWS S3 (Simple Storage Service) adalah solusi penyimpanan cloud AWS. Ini memberi Anda kemampuan untuk menyimpan segala jenis data di server Amazon. Di S3, "ember" berisi dan mengontrol akses ke objek (data konten Anda).

  1. Anda dapat membuat bucket melalui AWS Management Console. Klik pada tab S3 lalu Buat ember.
  2. Masukkan nama dan wilayah hosting (pilih yang terdekat dengan Anda untuk pengujian yang lebih mudah). Klik Buat , dan selesai!

Langkah 2: Buat File Uji

  1. Buat file pengujian seperti file index.html sederhana dengan kode awal di dalamnya.
 <h2>Halo Dunia</h2>

2. Anda dapat mengunggah file ini ke keranjang yang baru dibuat melalui menu Objek .

Langkah 3: Hasilkan Distro CloudFront

  1. Arahkan ke dasbor CloudFront dan tekan Create distribution .
  2. Pilih domain Origin sebagai bucket S3 yang baru saja Anda buat. Perbarui kebijakan bucket dan setelan OAI (Origin Access Identity) sesuai keinginan Anda.
  3. Masukkan nama file yang ingin Anda lindungi ( index.html ) ke dalam kotak Default root object opsional.
  4. Buat distribusi CloudFront dan voila! Anda sekarang memiliki titik akhir CloudFront.

Langkah 4: Buat Fungsi Lambda Kustom

  1. Sekarang, dari AWS Management Console Anda, arahkan ke tab Lambda dan tekan Create function .
  2. Pilih opsi Use a blueprint dan cari CloudFront , lalu pilih template CloudFront-response-generation . Klik Konfigurasi setelah Anda memilihnya.
  3. Di layar berikutnya, masukkan nama fungsi (AuthenticationTest) dan nama peran (S3-Auth). Pilih Peran Eksekusi sebagai Buat peran baru dari template Kebijakan AWS .
  4. Selanjutnya, rekatkan detail titik akhir CloudFront yang baru saja Anda buat ke dalam kotak Distribusi . Dalam perilaku Cache , biarkan sebagai * . Dan terakhir, pada event CloudFront , pilih Viewer request .
  5. Klik Terapkan untuk membuat fungsi baru.

Langkah 5: Ubah Fungsi Lambda

  1. Ganti kode Lambda default dengan kode khusus ini.
 'gunakan ketat';
ekspor.handler = (acara, konteks, panggilan balik) => {

// Dapatkan permintaan dan tajuk permintaan
permintaan const = event.Records[0].cf.request;
header const = permintaan.header;

// Konfigurasi otentikasi
const authUser = 'nama pengguna';
const authPass = 'kata sandi';

// Bangun string Autentikasi Dasar
const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');

// Memerlukan autentikasi Dasar
if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
cons body = 'Tidak sah';
respons konstan = {
status: '401',
statusDeskripsi: 'Tidak sah',
tubuh: tubuh,
tajuk: {
'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
},
};
callback(null, tanggapan);
}

// Lanjutkan pemrosesan permintaan jika autentikasi berhasil
callback(null, permintaan);
};

Anda dapat mengubah username dan password sesuai dengan keinginan Anda.

2. Klik Terapkan di bagian atas untuk menyimpan kode. Lalu, buka Tindakan dan Terapkan ke [email protected] untuk memasukkan kode.

3. Rekatkan alamat endpoint CloudFront ke kotak Distribusi , biarkan perilaku Cache sebagai * , dan pilih acara CloudFront sebagai permintaan Viewer . Setelah selesai, pemicu CloudFront baru akan dibuat.

4. Kemudian, terapkan dan tunggu selama 5 menit.

5. Kunjungi situs web Anda lagi. Seharusnya sekarang memberi Anda prompt login, berkat sistem otentikasi CloudFront.

Manfaatkan Sepenuhnya Fitur CloudFront Password Protect

Ada banyak alasan mengapa admin web ingin mengunci situs web mereka. Bisa jadi karena situs web mereka memerlukan pemeliharaan, keamanan yang ditingkatkan, atau perlindungan terhadap akses tidak sah.

Apa pun masalahnya, semoga panduan ini dapat membantu Anda berhasil menerapkan skema kata sandi menggunakan perlindungan kata sandi CloudFront.

Ada cara lain untuk melindungi situs web dengan kata sandi: menggunakan PPWP Pro. Saksikan berikut ini!