การตั้งรหัสผ่านด้วย CloudFront Functions

บทความนี้เกี่ยวกับการตั้งรหัสผ่านหน้าเว็บไซต์ด้วย CloudFront Functions ผมได้อ้างอิงมาจากบทความของ คุณ Minami ที่เป็นภาษาญี่ปุ่น เนื่องจากว่า CloudFront Functions เป็นฟังก์ชันที่ตั้งค่าง่าย ใช้งานง่าย และยังช่วยให้เว็บไซต์ปลอดภัยมากขึ้น จึงนำมาเขียนเป็นบทความภาษาไทย

สิ่งที่ต้องมี

• ต้องทำการตั้งค่า CloudFront ให้เสร็จเรียบร้อย
• ต้องทำการเชื่อมต่อกับฝั่ง Origin ให้เรียบร้อย

สามารถทำตามขั้นตอนลิงก์ด้านล่างนี้ได้เลย

• วิธีการแสดงผลเว็บไซต์ที่สร้างจาก EC2 ด้วย CloudFront
• How To Static Website EP2: การเก็บข้อมูลเว็บไซต์ลงบน Amazon S3 เพื่อให้ไปแสดงผลผ่าน Amazon CloudFront

สร้าง Password

ขั้นตอนแรก ให้สร้างรหัสผ่านที่ต้องการเตรียมไว้
สมมติว่าจะสร้างรหัสผ่านต่อไปนี้

ID：classmethod
Password：0912cm

ให้ไปที่รีเจี้ยนที่สามารถใช้ CloudShell ได้ ในขั้นตอนนี้เราจะใช้รีเจี้ยน Tokyo

ใส่ชุดคำสั่งตามนี้

echo -n "classmethod:0912cm" | base64

รหัสที่ได้จากการ generate

Y2xhc3NtZXRob2Q6MDkxMmNt

การสร้าง CloudFront Functions

ไปที่Functionsในหน้า CloudFront

คลิกCreate function

กำหนดNameและDescriptionตัวอย่างนี้ผมจะใช้ชื่อs3-cf-keisuke-function

ให้ใส่ Function code ไว้ใน Build และใส่รหัสที่ทำการ generate เมื่อสักครู่นี้ลงใน authString ของบรรทัดที่ 6

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // echo -n user:pass | base64
  var authString = "Basic Y2xhc3NtZXRob2Q6MDkxMmNt";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

คลิกSave changes

ไปที่แท็บ Publish แล้วเลือกPublish function

สามารถเลือกได้ว่าจะใช้ Function นี้กับ distribution ใดบ้าง แต่หากเราตั้งค่าที่หน้านี้ อาจทำให้เข้าใจยากว่าจะใช้งาน Basic authentication กับ URL ใด ดังนั้น เราจะไม่ตั้งค่าที่หน้านี้

การตั้งค่า Distribution

ไปที่เมนู Distributions ด้านซ้ายในหน้า CloudFront » เลือกDistributionsของเรา

เลือกหัวข้อBehaviors» เลือกPath pattern» คลิกEdit

เลื่อนไปด้านล่าง และตั้งค่า Viewer Request
» เลือกCloudFront Functions
» เลือก Function ที่ใช้งานได้s3-cf-keisuke-function
» คลิกSave Changes

ทดสอบ

การตั้งค่า Distribution นี้จะใช้เป็นชื่อ`https://s3-cf-keisuke-web.cmth.work`

หน้าจอ Login จะแสดงตามรูปภาพด้านล่าง

ถ้าสามารถเข้าสู่ระบบด้วย ID กับ Password ที่สร้างไว้ก่อนหน้านี้ได้ ก็ถือว่าใช้งานได้

สรุป

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