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

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

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

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

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

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

สร้าง 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 นี้ จะทำให้ 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 ที่สร้างไว้ก่อนหน้านี้ได้ ก็ถือว่าใช้งานได้

สรุป

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

ดูรายละเอียดเพิ่มเติมได้ที่นี่ สอบถามเพิ่มเติมเกี่ยวกับ AWS คลิกที่นี่