บันทึกจากงาน “Web Dev with Security สร้างเว็บไซต์ ให้ปลอดภัย”
จัดงานโดย Seed Webs
วันนี้ผมดีใจมากๆเลยครับที่ในที่สุดผมก็ได้เจอกับคุณเม่นจาก Seed Webs ครับ เพราะผมติดตามเนื้อหาดีๆจากคุณเม่นมานาน ไม่คิดฝันเลยว่าจะได้มาเจอกับคุณเม่นที่ขอนแก่นครับผม
ผมจึงตั้งใจเรียนและสรุปรายละเอียดความรู้ที่มีประโยชน์มากๆที่ได้จากงานนี้ครับ
แอบกระซิบว่า… ทีมงานจัด Live สุดยอดมากๆครับ อุปกรณ์ครับมาก จากทีมงาน LiveTubex ครับ
สร้างเว็บไซต์ให้ปลอดภัยต้องทำอะไรบ้าง
โดยคุณโป้งจาก MUSE Foundation
ขอเกริ่นถึง CMS นิดนึงคร้าบ
CMS (Content Management System) คือระบบจัดการเนื้อหา ที่ช่วยให้ผู้ใช้สามารถสร้าง, แก้ไข, จัดการ, และเผยแพร่เนื้อหาบนเว็บไซต์ได้อย่างง่ายดาย โดยไม่จำเป็นต้องมีความรู้ทางเทคนิคมากมาย ตัวอย่าง CMS ที่นิยมใช้งานได้แก่:
- WordPress: เป็น CMS ที่ได้รับความนิยมสูงสุด ใช้งานง่าย มีปลั๊กอินและธีมให้เลือกมากมาย
- Joomla: เป็น CMS ที่มีความยืดหยุ่นสูง ใช้งานได้หลากหลายประเภทเว็บไซต์
- Drupal: เป็น CMS ที่มีความปลอดภัยสูง เหมาะสำหรับเว็บไซต์ขนาดใหญ่และองค์กร
- Magento: เป็น CMS ที่เน้นการพัฒนาเว็บไซต์ร้านค้าออนไลน์
- Shopify: เป็น CMS ที่เหมาะสำหรับการสร้างและจัดการร้านค้าออนไลน์
CMS เหล่านี้ช่วยให้การจัดการเนื้อหาเว็บไซต์เป็นเรื่องง่ายและรวดเร็ว ผู้ใช้สามารถเพิ่มหรือลบเนื้อหา แก้ไขหน้าเว็บ หรือแม้แต่จัดการผู้ใช้งานผ่านอินเทอร์เฟซที่ใช้งานง่าย โดยไม่ต้องแก้ไขโค้ดเว็บไซต์โดยตรง
แล้วช่องโหว่มาจากไหนกันนะ
สมัยก่อนการดูแลจัดการ CMS จะมีประมาณ 2 ขั้นตอน
- การติดตั้ง CMS ไปยัง Web Hosting: ส่วนใหญ่จะนิยมทำโดยการ FTP (File Transfer Protocol) เอาไฟล์ไปวางบนนั้น ปัญหาคือ FTP นั้น เป็นการส่งข้อมูลที่ไม่เข้ารหัส ทำให้ข้อมูลเราอาจจะถูกขโมยไประหว่างทางครับ ซึ่งเราสามารถแก้ไขปัญหาได้ด้วยการใช้ SFTP (SSH File Transfer Protocol) ที่เป็นโปรโตคอลที่เข้ารหัสการรับส่งข้อมูลทั้งหมด ทำให้มั่นใจได้ว่าข้อมูลจะปลอดภัยมากกว่า (แต่ก็อาจะเจอช่องโหว่ช่องทางอื่นได้ เช่น รหัสที่ตั้งไว้ไม่เหมาะสม)
- การจัดการเนื้อหาใน CMS ด้วยรหัสผ่านของ Admin: ตรงนี้เป็นส่วนที่เจอปัญหามากที่สุดและผลกระทบรุนแรงมากจากการที่ผู้ไม่หวังดีสามารถคาดเดา หรือทราบรหัสผ่านของ Admin และทำการเข้ามาในระบบเพื่อขโมยข้อมูล
ตัวอย่างช่องโหว่ที่ทำให้เข้าระบบได้ด้วยรหัสของ Admin
- รหัสผ่านที่อ่อนแอ: ผู้ดูแลระบบบางครั้งใช้รหัสผ่านที่ง่ายต่อการคาดเดา เช่น “password123” หรือ “admin” ซึ่งทำให้ผู้ไม่ประสงค์ดีสามารถทายและเข้าสู่ระบบได้ง่าย
- การใช้รหัสผ่านซ้ำ: หากผู้ดูแลระบบใช้รหัสผ่านเดียวกันกับหลายระบบหรือเว็บไซต์อื่นๆ หากระบบหนึ่งถูกเจาะรหัสผ่านได้ ผู้โจมตีก็สามารถใช้รหัสผ่านนั้นเข้าสู่ระบบอื่นได้เช่นกัน
- การส่งข้อมูลที่ไม่เข้ารหัส: หากการเชื่อมต่อไปยัง CMS ไม่ได้ใช้ HTTPS การส่งรหัสผ่านผ่านเครือข่ายในรูปแบบข้อความที่ไม่เข้ารหัสจะทำให้ผู้โจมตีสามารถดักจับข้อมูลได้
- การโจมตีแบบ Brute Force: การโจมตีแบบ Brute Force คือการทดลองรหัสผ่านหลายๆ ครั้งจนกว่าจะเจอรหัสผ่านที่ถูกต้อง หากไม่มีการจำกัดจำนวนครั้งในการลองรหัสผ่าน ผู้โจมตีสามารถใช้วิธีนี้ได้
- การขาดการยืนยันตัวตนแบบหลายขั้นตอน (MFA): หากไม่มีการยืนยันตัวตนแบบหลายขั้นตอน แม้ว่าผู้โจมตีจะได้รหัสผ่านไป ก็จะสามารถเข้าสู่ระบบได้ทันที
- ช่องโหว่ในซอฟต์แวร์ CMS เอง: บางครั้ง CMS อาจมีช่องโหว่ที่อนุญาตให้ผู้โจมตีสามารถเลี่ยงการตรวจสอบรหัสผ่านหรือยกระดับสิทธิ์ตัวเองได้
- Phishing: ผู้โจมตีสามารถใช้การโจมตีแบบ Phishing เพื่อหลอกให้ผู้ดูแลระบบให้รหัสผ่านโดยไม่รู้ตัว
แนวทางปฏิบัติเพื่อลดความเสี่ยง
1: เลือกใช้เทคโนโลยีและเครื่องมือให้เหมาะสมกับงาน
- การเลือกเทคโนโลยีและเครื่องมือที่เหมาะสมเป็นสิ่งสำคัญ เพื่อให้มั่นใจว่าเครื่องมือที่ใช้งานมีความปลอดภัยและมีการสนับสนุนด้านความปลอดภัยที่ดี
2: Password
- ใช้รหัสผ่านที่แข็งแกร่งและไม่ซ้ำกัน
- ควรประกอบด้วยตัวอักษรพิมพ์ใหญ่ พิมพ์เล็ก ตัวเลข และสัญลักษณ์พิเศษ
- เปิดใช้งาน Two-Factor Authentication (2FA)
- เพิ่มชั้นความปลอดภัยด้วยการยืนยันตัวตนแบบสองขั้นตอน เช่น การส่งรหัสผ่านไปยังโทรศัพท์มือถือหรือการใช้แอปพลิเคชันยืนยันตัวตน
3: Update Software อยู่เสมอ
- อัปเดตระบบปฏิบัติการ (OS) ที่ใช้งานอยู่เสมอ
- อัปเดต Hosting, CMS, และปลั๊กอินต่างๆ เพื่อปิดช่องโหว่ที่อาจเกิดขึ้น
- การอัปเดตซอฟต์แวร์อย่างสม่ำเสมอเป็นการป้องกันการโจมตีที่มาจากช่องโหว่ในซอฟต์แวร์ที่เก่าและไม่ได้รับการแก้ไข
4: Backup:
- ทำการสำรองข้อมูลเสมอ
- เก็บข้อมูลสำรองในที่ปลอดภัย เช่น ใน GitHub หรือบริการคลาวด์ที่มีความปลอดภัย
- การสำรองข้อมูลเป็นการป้องกันความสูญเสียข้อมูลในกรณีที่เกิดการโจมตีหรือปัญหาทางเทคนิค
การปฏิบัติตามแนวทางเหล่านี้จะช่วยลดความเสี่ยงในการถูกโจมตีและเพิ่มความปลอดภัยให้กับระบบของคุณ
แนวทางการสร้างเว็บไซต์ที่ปลอดภัยจาก PromptPage
ทีมงานทำการค้นคว้าและค้นพบวิธีที่ช่วยให้การพัฒนาเว็บไซต์ทำได้ปลอดภัยมากขึ้นครับ จึงสร้างเว็บไซต์ชื่อ PromptPage ขึ้นมาเพื่อเป็นแนวทางดังนี้
แนวทางที่ใช้คือการแปลงเนื้อหาให้เป็น Static File (HTML, CSS, JS) แล้วนำไปติดตั้งใน Hosting ต่างๆแทนครับ
Stack ที่ทาง PromptPage เลือกใช้คือ
- ใช้ astro เป็น Web Framework
- ใช้ GitHub ดูแลรักษาโค้ด
- ใช้ Cloudflare เป็น Web Hosting
การใช้เทคโนโลยีและเครื่องมือเช่น Astro, GitHub, และ Cloudflare Page สามารถช่วยเพิ่มความปลอดภัยให้กับเว็บไซต์ได้ดังนี้:
Astro
1: Static Site Generation (SSG):
- Astro ใช้การสร้างเว็บไซต์แบบ Static Site Generation (SSG) ซึ่งหมายความว่าเนื้อหาของเว็บไซต์จะถูกสร้างเป็นไฟล์ HTML ที่ไม่เปลี่ยนแปลงแล้ว ซึ่งช่วยลดช่องโหว่ที่เกิดจากการประมวลผลแบบไดนามิกบนเซิร์ฟเวอร์
- ไฟล์ HTML สามารถเก็บไว้ CDN (Content Delivery Network) ซึ่งช่วยลดความเสี่ยงจากการโจมตีเช่น SQL Injection และ Cross-Site Scripting (XSS)
2: การพัฒนาเว็บไซต์ที่ง่ายและปลอดภัย:
- Astro มีเครื่องมือและปลั๊กอินที่ทำให้การพัฒนาเว็บไซต์ง่ายและมีความปลอดภัย เช่น การรองรับ TailwindCSS สำหรับการออกแบบ และเครื่องมือในการจัดการฟอนต์อย่าง Fontsource
GitHub
1: การจัดการเวอร์ชันและการสำรองข้อมูล:
- GitHub ช่วยในการจัดการเวอร์ชันของโค้ดและเนื้อหา ทำให้สามารถติดตามการเปลี่ยนแปลงและย้อนกลับไปยังเวอร์ชันก่อนหน้าได้หากพบปัญหา
- การเก็บโค้ดและเนื้อหาใน GitHub ช่วยให้มีการสำรองข้อมูลอย่างต่อเนื่องและปลอดภัย
2: การตรวจสอบความปลอดภัยของโค้ด:
- GitHub มีเครื่องมือในการตรวจสอบความปลอดภัยของโค้ด เช่น Dependabot ที่ช่วยตรวจสอบและอัปเดตการพึ่งพาของโปรเจกต์ให้ปลอดภัยจากช่องโหว่ที่รู้จัก
Cloudflare Page
1: Content Delivery Network (CDN):
- Cloudflare Page ทำงานร่วมกับ CDN ของ Cloudflare ซึ่งช่วยกระจายเนื้อหาไปยังเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้มากที่สุด ช่วยลดเวลาในการโหลดและเพิ่มความปลอดภัย
- CDN ช่วยป้องกันการโจมตีแบบ Distributed Denial of Service (DDoS) โดยการกระจายทราฟฟิกและลดภาระงานบนเซิร์ฟเวอร์หลัก
2: การป้องกันและการเพิ่มความปลอดภัย:
- Cloudflare มีฟีเจอร์ด้านความปลอดภัยเช่น Web Application Firewall (WAF) ที่ช่วยป้องกันการโจมตีทางเว็บ
- การใช้ HTTPS โดย Cloudflare ช่วยเข้ารหัสการเชื่อมต่อระหว่างผู้ใช้และเซิร์ฟเวอร์ ทำให้ข้อมูลที่ส่งผ่านมีความปลอดภัย
3: การตรวจสอบและการวิเคราะห์:
- Cloudflare Page มีเครื่องมือในการตรวจสอบและวิเคราะห์ทราฟฟิก ช่วยให้สามารถตรวจพบและตอบสนองต่อการโจมตีหรือปัญหาด้านความปลอดภัยได้รวดเร็ว
สรุป
การใช้ Astro, GitHub, และ Cloudflare Page ร่วมกัน ช่วยเพิ่มความปลอดภัยให้กับเว็บไซต์ผ่านการสร้างเนื้อหาแบบ Static, การจัดการเวอร์ชันและการสำรองข้อมูล การใช้ CDN เพื่อป้องกันการโจมตี และการใช้เครื่องมือด้านความปลอดภัยของ Cloudflare เพื่อตรวจสอบและป้องกันการโจมตีทางเว็บ
การใช้ Astro กับองค์กรและชุมชน
โดยน้องกุลจาก เทคไทบ้าน — Tech Thaiban
เทคไทบ้าน พื้นที่เรียนรู้ทักษะดิจิทัลให้ผู้คนในชนบทเข้าถึงง่ายจึงดำเนินการจัด Tech Community ที่แข็งแรงที่ภูผาม่าน ซึ่งสำเร็จแล้ว แต่ก็เกิดโจทย์ที่ต้องการให้เด็กในพื้นที่ได้รับประโยชน์จริงๆ จึงชวนโรงเรียนเข้าร่วมด้วย
แต่การชวนเด็กเข้าร่วมเป็นเรื่องยาก เนื่องจากเทคโนโลยีเป็นเรื่องที่ซับซ้อน จึงตัดสินใจทำ MOU กับโรงเรียน และชวนองค์กรเข้าร่วมสนับสนุนให้ทุนเด็กๆ โดยสามารถนำค่าใช้จ่ายส่วนนี้ไปลดหย่อนภาษีได้ เพื่อช่วยเด็กที่เป็นต้นน้ำจริงๆ
คำถามคือ
จะนำเทคโนโลยีมาช่วยชุมชนได้อย่างไรให้เหมาะสมและยั่งยืนดี
จึงได้ดำเนินสองโครงการ
1: ชนบทดิจิทัล โครงการเสริมศักยภาพด้านทักษะดิจิทัลในระดับชุมชน หลักสูตรชนบทดิจิทัล เรียนฟรี กิจกรรมต่อเนื่อง 12 เดือน งานที่เริ่มไปแล้วคือ Canva โดยมีพนักงานจาก Canva มาช่วยสอนจากออสเตรเลียเลยครับ
ติดตามโครงการได้ที่
2: เว็บไซต์ชุมชน โครงการจัดทำเว็บไซต์ข้อมูลชุมชน จัดทำโดยชุมชน เรากำลังดำเนินทำเว็บไซต์ท่องเที่ยวชุมชนภูผาม่านเพื่อนำร่องโครงการ
ซึ่งได้จัดทำมาทั้งหมด 3 เว็ปไซต์โดยทั้งหมดใช้ Astro, GitHub, และ Cloudflare Page ครับ:
อีสานจะเลิร์น
ต้องการสร้างคอมมูนิตี้ของการเรียนรู้ในประเด็นต่างๆ ในอีสาน โดยจะเริ่มตั้งต้นและตั้งหมุดหมายที่ขอนแก่นก่อน มาในคอนเซปต์ จะเรียน จะเล่น จะรู้ ให้อยู่ที่อีสานจะเลิร์น
ฟาร์มคิด โฮมสเตย์
บ้านพักโฮมสเตย์ฉบับส่วนตัว วิวทุ่งนา ภูเขา ระเบียงนั่งชมค้างคาว วิวพระอาทิตย์ตก เหมาะกับการพักผ่อนแบบสงบ
Khon Kean Trip
การท่องเที่ยวแห่งประเทศไทย (ททท.) สำนักงานขอนแก่นร่วมกับเทคไทบ้านในการจัดทำเว็บไซต์ข้อมูลการท่องเที่ยวจังหวัดขอนแก่น โดยมีเป้าหมายเพื่อให้นักท่องเที่ยวที่มาเยี่ยมขอนแก่นสามารถเดินทาง Road Trip ด้วยตนเองได้ง่าย อีกนัยหนึ่ง ก็เพื่อให้ชุมชนสามารถนำข้อมูลเส้นทางท่องเที่ยวของตนมาไว้บนแพลตฟอร์มออนไลน์ในการสืบค้นข้อมูลเส้นทางได้ง่ายเช่นกัน
ความเร็วใน Astro
ได้ผลลัพธ์ที่ดีมากๆทั้ง Mobile และ Desktop เลยครับ
ทำยังไงให้ Wordpress ปลอดภัยมากขึ้น
จากสถิติที่ทีมงานเจอมาประมาณ 90% เกิดมาจากเรื่องของ Password
จึงเกิดคำถามว่า
จะดีกว่าไหม ถ้า Login โดยไม่ต้องใช้ Password
ทาง Seed Webs เลยพัฒนาปลั๊กอินที่ใช้การ Login ด้วย Social Account หรือ Email แทนครับ
โดยมีคำแนะนำในการเพิ่มความปลอดภัยให้ Wordpress มากขึ้นดังนี้
- ลงปลั๊กอิน Seed Login Pro
- เปิดการล็อกอินด้วย Social หรือ Email Link
- ใช้ Server ขั้นต่ำตาม WordPress กำหนด
- ปลั๊กอินอื่นๆ ไม่เก่ากว่า 6 เดือน (แนะนำให้โหลดจาก https://wordpress.org/plugins/ ที่มีทีมงานคอยตรวจสอบจนมั่นใจได้ว่าปลอดภัยแน่นอนนะครับ ไม่แนะนำให้ติดตั้งจากช่องทางอื่น)
และทำตามมาตราฐานที่ WordPress แนะนำดังนี้
- PHP version 7.4+
- MySQL version 8.0+ หรือ MariaDB version 10.5+
- HTTPS support
หัดใช้ Astro กันเถอะ !
โดยคุณเม่น Seed Webs
หลังจากที่เราได้เห็นความน่าใช้งานของ Astro กันมาแล้ว ในที่สุดก็ถึงเวลามาทดลองใช้งานกันครับ
ขั้นตอนแรกให้เราติดตั้ง Node.js Version v18.17.1
or v20.3.0
or later นะครับ
หลังจากนั้นเข้าไปที่ Astro Website
ในขั้นตอนต่อไปนี้อาจจะไม่เหมือน Demo ในงานนะครับ เนื่องจากผมอยากทดลองสร้างด้วยตัวเองเพื่อเรียนรู้จากความรู้ที่ได้วันนี้ครับ
ทดลองสร้าง Astro จาก Template ต้นทาง (มีให้เลือกเยอะมากครับ จุใจเลย)
npm create astro@latest -- --template blog
เมื่อรันเสร็จแล้วจะได้โครงสร้างโค้ดที่สวยงามเลยครับ ดูเข้าใจง่าย
รันระบบขึ้นมาด้วยคำสั่ง
npm run dev
ได้เว็ปสวยงามแล้วครับผม
ใช้ Astro เก็บข้อมูลลงฐานข้อมูล
ข้อมูลจาก [Facebook Page — Menn]
Astro ได้ออก Astro DB เป็นระบบฐานข้อมูล SQL ที่ประกอบกับภาษา Astro ได้อย่างไร้รอยต่อ
- ใช้ Drizzle ORM มาทำให้ DB เป็น Object ที่เราเขียน TypeScript สร้าง schema และดึงข้อมูลได้ง่าย
- ใช้ libSQL ที่ Fork มาจาก SQLite เพื่อทำให้ Scale ง่าย สร้าง Test & Seed ง่าย (เพราะเป็น text)
- และมี Astro Studio ให้เข้าไปจัดการข้อมูลพื้นฐานได้ (ไม่ใช่ขนาด CMS นะ เป็นประมาณ phpMyAdmin มากกว่า)
ทางทีมงานได้จัดทำระบบลงทะเบียนขึ้นมาเพื่อเป็นตัวอย่างการนำ Astro DB มาใช้นะครับ น่าสนใจมากๆเลย
สามารถ Fork ไปลองศึกษากันต่อได้ที่
สรุป
การใช้เทคโนโลยีเช่น Astro, GitHub, และ Cloudflare Page ช่วยเพิ่มความปลอดภัยให้กับเว็บไซต์ผ่านการสร้างเนื้อหาแบบ Static, การจัดการเวอร์ชันและการสำรองข้อมูล เหมาะสำหรับการนำมาเพิ่มความปลอดภัยให้กับเว็บไซต์ทั้งภาคเอกชน, ชุมชน และหน่วยงานต่างๆครับ