วิธีสร้างเว็บไซต์ที่ปลอดภัยด้วย CloudFront Password Protect

เผยแพร่แล้ว: 2023-01-15

Amazon Web Service (AWS) ครองส่วนแบ่งการตลาดคลาวด์คอมพิวติ้งที่ 41.5% เป็นบริการคลาวด์คอมพิวติ้งที่ได้รับความนิยมมากที่สุดในปัจจุบัน ช่วยให้ธุรกิจและบุคคลสามารถโฮสต์แอปพลิเคชันและเว็บไซต์ของตนบนเซิร์ฟเวอร์ของ Amazon ในราคาถูก

หนึ่งในองค์ประกอบที่สำคัญของ AWS คือ Amazon CloudFront เป็นเครือข่ายการจัดส่งเนื้อหา (CDN) ที่สร้างขึ้นเพื่อเพิ่มความเร็วในการโหลดของผู้เยี่ยมชมเว็บไซต์ที่โฮสต์โดย AWS ของคุณ

แต่คุณรู้หรือไม่ว่าคุณสามารถใช้ CloudFront เพื่อล็อคเว็บไซต์ของคุณหลังจากแจ้งรหัสผ่านได้? คู่มือนี้จะแสดงวิธีใช้คุณลักษณะการป้องกันด้วยรหัสผ่าน AWS CloudFront เพื่อรักษาความปลอดภัยให้เว็บไซต์ของคุณ

  • CloudFront Password Protect คืออะไร?
  • วิธีรักษาความปลอดภัยเว็บไซต์ CloudFront ด้วยรหัสผ่าน
    • การใช้ [ป้องกันอีเมล]
    • ใช้ประโยชน์จาก AWS S3 และ Lambda เพื่อเพิ่มการรับรองความถูกต้องพื้นฐาน

CloudFront Password Protect คืออะไร?

Amazon CloudFront เพิ่มความเร็วในการเข้าถึงแอปพลิเคชันและเว็บไซต์ของคุณของผู้ใช้ด้วยการนำเสนอเนื้อหาผ่านศูนย์ข้อมูลต่างๆ ทั่วโลก เมื่อผู้ใช้เข้าถึงเว็บไซต์ของคุณ เนื้อหาจะถูกส่งจากศูนย์กลางที่ใกล้กับตำแหน่งทางภูมิศาสตร์ของผู้ใช้มากที่สุด ส่งผลให้ความเร็วในการโหลดเร็วขึ้น

ตราบใดที่คุณใช้ Amazon CloudFront เพื่อเผยแพร่เนื้อหา คุณสามารถใช้คุณสมบัติการป้องกันด้วยรหัสผ่านของระบบได้ ระบบยังคงใช้งานได้หากเว็บไซต์ของคุณโฮสต์อยู่ในบัคเก็ต S3 หรืออินสแตนซ์ EC2

นี่คือแผนผังของระบบ CloudFront มาตรฐาน โดยจะอธิบายว่าคำขอจากผู้เยี่ยมชมเว็บ (ทางด้านขวา) ไหลผ่าน CloudFront และระบบย่อยอื่นๆ อย่างไร เพื่อมาถึงต้นทาง (ที่จัดเก็บเนื้อหา) ที่จุดเริ่มต้น ข้อมูลจะถูกดึงและไหลกลับไปยังผู้เยี่ยมชม

ppwp-cloudfront-รหัสผ่านป้องกันระบบ

อาจดูสับสนโดยเฉพาะสำหรับผู้ที่เพิ่งรู้จัก CloudFront เป็นครั้งแรก แต่การทำความเข้าใจแผนภูมินี้และส่วนประกอบเป็นสิ่งสำคัญสำหรับส่วนต่อๆ ไป

วิธีรักษาความปลอดภัยเว็บไซต์ CloudFront ด้วยรหัสผ่าน

คุณสามารถใช้หลายวิธีในการพุชรหัสผ่านบนเว็บไซต์ที่ให้บริการ CloudFront ของคุณ เราจะแสดงให้คุณเห็น 2 วิธีในคู่มือนี้

การใช้ [ป้องกันอีเมล]

[ป้องกันอีเมล] เป็นคุณสมบัติของ CloudFront ที่ให้คุณเรียกใช้รหัสที่กำหนดเองได้ใกล้ชิดกับลูกค้ามากขึ้น ด้วยวิธีนี้ ประสิทธิภาพการโหลดจะดีขึ้น หากคุณเลือกที่จะปรับใช้ [ป้องกันอีเมล] เมื่อใดก็ตามที่ผู้เยี่ยมชมร้องขอให้ดึงเนื้อหาสำหรับเว็บไซต์ของคุณ พวกเขาจะต้องผ่านฟังก์ชันนี้ก่อน

หากคุณต้องแก้ไข [ป้องกันอีเมล] ให้ทำงานเฉพาะเมื่อผู้ใช้ระบุรหัสผ่านที่ถูกต้อง แสดงว่าคุณมีชั้นการป้องกันรหัสผ่านสำหรับเว็บไซต์ของคุณไม่มากก็น้อย

นั่นคือแนวคิดพื้นฐานเบื้องหลังวิธีการรักษาความปลอดภัยของ CloudFront

ppwp-แลมบ์ดา-ขอบ

ขั้นตอนที่ 1: ปรับใช้ฟังก์ชัน [ป้องกันอีเมล]

[ป้องกันอีเมล] เป็นฟังก์ชัน Lambda ที่ใช้งานเฉพาะในภูมิภาค us-east-1 (เวอร์จิเนียเหนือ) ดังนั้นในการทำให้ใช้งานได้ คุณจะต้องเข้าสู่ระบบในภูมิภาคที่ถูกต้อง:

  1. ลงชื่อเข้าใช้บัญชี AWS ของคุณ จากนั้นคลิก สร้างฟังก์ชัน
  2. คุณจะได้รับแจ้งให้ป้อนชื่อฟังก์ชัน เลือกสิ่งพื้นฐานเช่น BasicAuth ในฐานะรันไทม์ ให้เลือก Node.js 12.x
  3. จบการสร้างโดยกดปุ่ม สร้างฟังก์ชัน
  4. ตอนนี้คุณจะเห็นไฟล์ชื่อ index.js ในหน้าต่าง Function Code คลิกแล้วคุณจะเห็นรหัสแลมบ์ดาเริ่มต้น แทนที่ด้วยรหัสที่กำหนดเองนี้:
 'ใช้อย่างเข้มงวด';

exports.handler = (เหตุการณ์ บริบท โทรกลับ) => {

// ข้อมูลการรับรองความถูกต้อง
var i = 0, authStrings = [], authCredentials = [
'ผู้ใช้1:รหัสผ่านผู้ใช้',
];

// สร้างสตริงการรับรองความถูกต้องพื้นฐาน
authCredentials.forEach (องค์ประกอบ => {
authStrings[i] = "พื้นฐาน" + บัฟเฟอร์ใหม่(องค์ประกอบ).toString('base64');
ฉัน ++;
}
);

// รับคำขอและส่วนหัวคำขอ
คำขอ const = event.Records[0].cf.request;
ส่วนหัว const = คำขอส่วนหัว;

// ต้องการการรับรองความถูกต้องขั้นพื้นฐาน
ถ้า (typeof headers.authorization == 'ไม่ได้กำหนด' ||
!authStrings.includes(headers.authorization[0].value)) {

การตอบสนอง const = {
สถานะ: '401',
คำอธิบายสถานะ: 'ไม่ได้รับอนุญาต',
เนื้อความ: 'ไม่ได้รับอนุญาต',
ส่วนหัว: {
'www-authenticate': [ {คีย์: 'WWW-authenticate',
ค่า: 'Basic realm="Authentication"'} ]
},
};

โทรกลับ (null, ตอบกลับ);
}

// ประมวลผลคำขอต่อไปหากผ่านการรับรองความถูกต้อง
โทรกลับ (โมฆะ, คำขอ);
};

ข้อมูลรับรองการเข้าสู่ระบบเริ่มต้นถูกเก็บไว้ในฟังก์ชันนี้ในบรรทัด:

 'ผู้ใช้1:รหัสผ่านผู้ใช้',

รูปแบบคือ “บัญชี:รหัสผ่าน” คุณสามารถเปลี่ยนเป็นสิ่งที่คุณต้องการ นอกจากนี้ คุณยังสามารถเพิ่มข้อมูลรับรองการเข้าสู่ระบบได้ด้วยการทำซ้ำบรรทัดนี้

5. เมื่อเปลี่ยนโค้ดแบบกำหนดเองแล้ว ให้คลิก ปรับใช้ เพื่อพุชโค้ด

6. ไปที่เมนู Actions ที่ด้านบน คลิกที่ Publish New Version จากนั้นเลือก Publish อย่าเปลี่ยนการตั้งค่าใดๆ ที่นั่น

7. ค้นหาสตริง ARN ที่ด้านบนขวาของหน้าจอและคัดลอก ขั้นตอนนี้มีความสำคัญ สตริง ARN มีลักษณะดังนี้:

 arn:aws:lambda:us-east-1:XXXXXXXXXXXX:ฟังก์ชัน:basicAuth:1

ขั้นตอนที่ 2: ตั้งค่าความสัมพันธ์ที่เชื่อถือได้

  1. ไปที่ IAM Console และเข้าสู่ระบบ
  2. ป้อนชื่อฟังก์ชัน [ป้องกันอีเมล] ของคุณ ( BasicAuth ในขั้นตอนก่อนหน้า)
  3. ค้นหาแท็บ ความสัมพันธ์ที่เชื่อถือ ได้และคลิกที่ แก้ไข แทนที่รหัสภายในด้วยสิ่งนี้:
 {
"เวอร์ชัน": "2012-10-17",
"คำให้การ": [
{
"เอฟเฟกต์": "อนุญาต",
"อาจารย์ใหญ่": {
"บริการ": [
"lambda.amazonaws.com",
"edgelambda.amazonaws.com"
]
},
"การกระทำ": "sts:AssumeRole"
}
]
}

4. จบกระบวนการโดยคลิกที่ Update Trust Policy

ขั้นตอนที่ 3: กำหนดค่าลักษณะการทำงานของแคช

  1. ไปที่ CloudFront และเข้าสู่ระบบ คลิกเว็บไซต์ที่ให้บริการโดย CloudFront ที่คุณต้องการล็อคด้วยรหัสผ่าน
  2. เลือก Behaviors ค้นหาช่องทำเครื่องหมาย URL Path Pattern และทำเครื่องหมายถูก คลิกต่อไปที่ แก้ไข
  3. ค้นหาส่วนที่เรียกว่า Lambda Function Associations ค้นหาเมนูแบบเลื่อนลงและค้นหา Select Event Type จากนั้นค้นหา Viewer Request วางสตริง ARN ที่คุณคัดลอกไว้ก่อนหน้านี้ในขั้นตอนที่ 1
  4. กด ใช่ แก้ไข หลังจากนี้ CloudFront จะใช้เวลาประมาณ 5 นาทีในการรีบูตและโหลดการตั้งค่าใหม่อีกครั้ง

ขั้นตอนที่ 4: ตรวจสอบเว็บไซต์อีกครั้ง

เยี่ยมชมเว็บไซต์ของคุณหลังจากรีบูต CloudFront หากคุณได้รับการต้อนรับด้วยข้อความแจ้งการเข้าสู่ระบบ แสดงว่าคุณทำสำเร็จแล้ว

ควรมีลักษณะดังนี้:

ppwp-lambda-cloudfront-รหัสผ่าน-ป้องกัน

ใช้ประโยชน์จาก AWS S3 และ Lambda เพื่อเพิ่มการรับรองความถูกต้องพื้นฐาน

ในวิธีนี้ เราจะใช้วิธีการร่วมกันของ AWS S3 และ Lambda เพื่อทำสิ่งเดียวกันกับที่เราทำข้างต้น นั่นคือ สร้างแบบฟอร์มการตรวจสอบสิทธิ์พื้นฐานสำหรับเว็บไซต์

ขั้นตอนที่ 1: สร้างบัคเก็ต S3

AWS S3 (Simple Storage Service) เป็นโซลูชันพื้นที่เก็บข้อมูลบนคลาวด์ของ AWS ช่วยให้คุณสามารถจัดเก็บข้อมูลประเภทใดก็ได้บนเซิร์ฟเวอร์ของ Amazon ใน S3 "ถัง" ประกอบด้วยและควบคุมการเข้าถึงวัตถุ (ข้อมูลเนื้อหาของคุณ)

  1. คุณสามารถสร้างบัคเก็ตผ่าน AWS Management Console คลิกที่แท็บ S3 จากนั้นคลิก สร้าง บัคเก็ต
  2. ป้อนชื่อและภูมิภาคโฮสติ้ง (เลือกที่ใกล้เคียงที่สุดเพื่อการทดสอบที่ง่ายขึ้น) คลิก สร้าง แค่นั้นแหละ!

ขั้นตอนที่ 2: สร้างไฟล์ทดสอบ

  1. สร้างไฟล์ทดสอบเช่นไฟล์ index.html อย่างง่ายพร้อมรหัสเริ่มต้นในนั้น
 <h2>สวัสดีชาวโลก</h2>

2. คุณสามารถอัปโหลดไฟล์นี้ไปยังบัคเก็ตที่สร้างขึ้นใหม่ผ่านเมนู อ็อบเจกต์

ขั้นตอนที่ 3: สร้าง CloudFront Distro

  1. ไปที่แดชบอร์ดของ CloudFront แล้วกด Create distribution
  2. เลือก โดเมนต้นทาง เป็นบัคเก็ต S3 ที่คุณเพิ่งสร้างขึ้น อัปเดตนโยบายของบัคเก็ตและการตั้งค่า OAI (Origin Access Identity) ตามที่คุณต้องการ
  3. ป้อนชื่อไฟล์ที่คุณต้องการป้องกัน ( index.html ) ลงในช่อง ออบเจกต์รูทเริ่มต้น ซึ่งเป็นทางเลือก
  4. สร้างการแจกจ่าย CloudFront และ voila! ตอนนี้คุณมี CloudFront endpoint แล้ว

ขั้นตอนที่ 4: สร้างฟังก์ชัน Lambda แบบกำหนดเอง

  1. ตอนนี้ จาก AWS Management Console ของคุณ ให้ไปที่แท็บ Lambda แล้วกดที่ ฟังก์ชัน Create
  2. เลือกตัวเลือก Use a blueprint และค้นหา CloudFront จากนั้นเลือกเทมเพลต การสร้างการตอบสนองต่อ CloudFront คลิกที่ กำหนดค่า เมื่อคุณเลือกแล้ว
  3. ในหน้าจอถัดไป ให้ป้อนชื่อฟังก์ชัน (AuthenticationTest) และชื่อบทบาท (S3-Auth) เลือก Execution Role เป็น Create the new role from AWS Policy templates
  4. จากนั้น วางรายละเอียดของตำแหน่งข้อมูล CloudFront ที่คุณเพิ่งสร้างลงในช่องการ แจกจ่าย ใน ลักษณะการทำงานของ แคช ปล่อยให้เป็น * และสุดท้าย ใน เหตุการณ์ CloudFront เลือก คำขอ Viewer
  5. คลิก ปรับใช้ เพื่อสร้างฟังก์ชันใหม่

ขั้นตอนที่ 5: แก้ไขฟังก์ชันแลมบ์ดา

  1. แทนที่โค้ด Lambda เริ่มต้นด้วยโค้ดที่กำหนดเองนี้
 'ใช้อย่างเข้มงวด';
exports.handler = (เหตุการณ์ บริบท โทรกลับ) => {

// รับคำขอและส่วนหัวของคำขอ
คำขอ const = event.Records[0].cf.request;
ส่วนหัว const = คำขอส่วนหัว;

// กำหนดค่าการรับรองความถูกต้อง
const authUser = 'ชื่อผู้ใช้';
const authPass = 'รหัสผ่าน';

// สร้างสตริงการรับรองความถูกต้องพื้นฐาน
const authString = 'Basic' + new Buffer(authUser + ':' + authPass).toString('base64');

// ต้องการการรับรองความถูกต้องขั้นพื้นฐาน
ถ้า (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
const body = 'ไม่ได้รับอนุญาต';
การตอบสนอง const = {
สถานะ: '401',
คำอธิบายสถานะ: 'ไม่ได้รับอนุญาต',
ร่างกาย: ร่างกาย,
ส่วนหัว: {
'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
},
};
โทรกลับ (null, ตอบกลับ);
}

// ประมวลผลคำขอต่อไปหากผ่านการรับรองความถูกต้อง
โทรกลับ (โมฆะ, คำขอ);
};

คุณสามารถเปลี่ยนชื่อผู้ใช้และรหัสผ่านให้เหมาะกับความต้องการของคุณ

2. คลิกที่ ปรับใช้ ที่ด้านบนเพื่อบันทึกรหัส จากนั้นไปที่ Actions and Deploy to [email protected] เพื่อพุชโค้ด

3. วางที่อยู่ปลายทางของ CloudFront ลงในช่องการ แจกจ่าย ปล่อยให้ ลักษณะการทำงานของแคช เป็น * และเลือก เหตุการณ์ CloudFront เป็น คำขอ ของผู้ดู เมื่อเสร็จแล้ว ทริกเกอร์ CloudFront ใหม่จะถูกสร้างขึ้น

4. จากนั้นปรับใช้และรอ 5 นาที

5. เยี่ยมชมเว็บไซต์ของคุณอีกครั้ง ตอนนี้ควรแสดงพรอมต์การเข้าสู่ระบบแก่คุณ โดยได้รับความอนุเคราะห์จากระบบตรวจสอบความถูกต้องของ CloudFront

ใช้คุณสมบัติการป้องกันรหัสผ่านของ CloudFront อย่างเต็มรูปแบบ

มีสาเหตุหลายประการที่ผู้ดูแลเว็บต้องการล็อคเว็บไซต์ของตน อาจเป็นเพราะเว็บไซต์ของพวกเขาต้องการการบำรุงรักษา เพิ่มความปลอดภัย หรือป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต

ไม่ว่าในกรณีใด หวังว่าคู่มือนี้จะช่วยให้คุณปรับใช้รูปแบบรหัสผ่านได้สำเร็จโดยใช้การป้องกันด้วยรหัสผ่านของ CloudFront

มีอีกวิธีในการป้องกันเว็บไซต์ด้วยรหัสผ่าน: การใช้ PPWP Pro ตรวจสอบออก!