บันทึกจากงาน “Web Dev with Security สร้างเว็บไซต์ ให้ปลอดภัย”

จัดงานโดย Seed Webs

วันนี้ผมดีใจมากๆเลยครับที่ในที่สุดผมก็ได้เจอกับคุณเม่นจาก Seed Webs ครับ เพราะผมติดตามเนื้อหาดีๆจากคุณเม่นมานาน ไม่คิดฝันเลยว่าจะได้มาเจอกับคุณเม่นที่ขอนแก่นครับผม

ผมจึงตั้งใจเรียนและสรุปรายละเอียดความรู้ที่มีประโยชน์มากๆที่ได้จากงานนี้ครับ

แอบกระซิบว่า… ทีมงานจัด Live สุดยอดมากๆครับ อุปกรณ์ครับมาก จากทีมงาน LiveTubex ครับ

สร้างเว็บไซต์ให้ปลอดภัยต้องทำอะไรบ้าง

โดยคุณโป้งจาก MUSE Foundation

ขอเกริ่นถึง CMS นิดนึงคร้าบ

CMS (Content Management System) คือระบบจัดการเนื้อหา ที่ช่วยให้ผู้ใช้สามารถสร้าง, แก้ไข, จัดการ, และเผยแพร่เนื้อหาบนเว็บไซต์ได้อย่างง่ายดาย โดยไม่จำเป็นต้องมีความรู้ทางเทคนิคมากมาย ตัวอย่าง CMS ที่นิยมใช้งานได้แก่:

1. WordPress: เป็น CMS ที่ได้รับความนิยมสูงสุด ใช้งานง่าย มีปลั๊กอินและธีมให้เลือกมากมาย
2. Joomla: เป็น CMS ที่มีความยืดหยุ่นสูง ใช้งานได้หลากหลายประเภทเว็บไซต์
3. Drupal: เป็น CMS ที่มีความปลอดภัยสูง เหมาะสำหรับเว็บไซต์ขนาดใหญ่และองค์กร
4. Magento: เป็น CMS ที่เน้นการพัฒนาเว็บไซต์ร้านค้าออนไลน์
5. Shopify: เป็น CMS ที่เหมาะสำหรับการสร้างและจัดการร้านค้าออนไลน์

ขอบคุณรูปสวยๆจาก flaticon.com

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

แล้วช่องโหว่มาจากไหนกันนะ

สมัยก่อนการดูแลจัดการ CMS จะมีประมาณ 2 ขั้นตอน

1. การติดตั้ง CMS ไปยัง Web Hosting: ส่วนใหญ่จะนิยมทำโดยการ FTP (File Transfer Protocol) เอาไฟล์ไปวางบนนั้น ปัญหาคือ FTP นั้น เป็นการส่งข้อมูลที่ไม่เข้ารหัส ทำให้ข้อมูลเราอาจจะถูกขโมยไประหว่างทางครับ ซึ่งเราสามารถแก้ไขปัญหาได้ด้วยการใช้ SFTP (SSH File Transfer Protocol) ที่เป็นโปรโตคอลที่เข้ารหัสการรับส่งข้อมูลทั้งหมด ทำให้มั่นใจได้ว่าข้อมูลจะปลอดภัยมากกว่า (แต่ก็อาจะเจอช่องโหว่ช่องทางอื่นได้ เช่น รหัสที่ตั้งไว้ไม่เหมาะสม)
2. การจัดการเนื้อหาใน CMS ด้วยรหัสผ่านของ Admin: ตรงนี้เป็นส่วนที่เจอปัญหามากที่สุดและผลกระทบรุนแรงมากจากการที่ผู้ไม่หวังดีสามารถคาดเดา หรือทราบรหัสผ่านของ Admin และทำการเข้ามาในระบบเพื่อขโมยข้อมูล

ตัวอย่างช่องโหว่ที่ทำให้เข้าระบบได้ด้วยรหัสของ Admin

1. รหัสผ่านที่อ่อนแอ: ผู้ดูแลระบบบางครั้งใช้รหัสผ่านที่ง่ายต่อการคาดเดา เช่น “password123” หรือ “admin” ซึ่งทำให้ผู้ไม่ประสงค์ดีสามารถทายและเข้าสู่ระบบได้ง่าย
2. การใช้รหัสผ่านซ้ำ: หากผู้ดูแลระบบใช้รหัสผ่านเดียวกันกับหลายระบบหรือเว็บไซต์อื่นๆ หากระบบหนึ่งถูกเจาะรหัสผ่านได้ ผู้โจมตีก็สามารถใช้รหัสผ่านนั้นเข้าสู่ระบบอื่นได้เช่นกัน
3. การส่งข้อมูลที่ไม่เข้ารหัส: หากการเชื่อมต่อไปยัง CMS ไม่ได้ใช้ HTTPS การส่งรหัสผ่านผ่านเครือข่ายในรูปแบบข้อความที่ไม่เข้ารหัสจะทำให้ผู้โจมตีสามารถดักจับข้อมูลได้
4. การโจมตีแบบ Brute Force: การโจมตีแบบ Brute Force คือการทดลองรหัสผ่านหลายๆ ครั้งจนกว่าจะเจอรหัสผ่านที่ถูกต้อง หากไม่มีการจำกัดจำนวนครั้งในการลองรหัสผ่าน ผู้โจมตีสามารถใช้วิธีนี้ได้
5. การขาดการยืนยันตัวตนแบบหลายขั้นตอน (MFA): หากไม่มีการยืนยันตัวตนแบบหลายขั้นตอน แม้ว่าผู้โจมตีจะได้รหัสผ่านไป ก็จะสามารถเข้าสู่ระบบได้ทันที
6. ช่องโหว่ในซอฟต์แวร์ CMS เอง: บางครั้ง CMS อาจมีช่องโหว่ที่อนุญาตให้ผู้โจมตีสามารถเลี่ยงการตรวจสอบรหัสผ่านหรือยกระดับสิทธิ์ตัวเองได้
7. Phishing: ผู้โจมตีสามารถใช้การโจมตีแบบ Phishing เพื่อหลอกให้ผู้ดูแลระบบให้รหัสผ่านโดยไม่รู้ตัว

แนวทางปฏิบัติเพื่อลดความเสี่ยง

1: เลือกใช้เทคโนโลยีและเครื่องมือให้เหมาะสมกับงาน

• การเลือกเทคโนโลยีและเครื่องมือที่เหมาะสมเป็นสิ่งสำคัญ เพื่อให้มั่นใจว่าเครื่องมือที่ใช้งานมีความปลอดภัยและมีการสนับสนุนด้านความปลอดภัยที่ดี

2: Password

• ใช้รหัสผ่านที่แข็งแกร่งและไม่ซ้ำกัน
• ควรประกอบด้วยตัวอักษรพิมพ์ใหญ่ พิมพ์เล็ก ตัวเลข และสัญลักษณ์พิเศษ
• เปิดใช้งาน Two-Factor Authentication (2FA)
• เพิ่มชั้นความปลอดภัยด้วยการยืนยันตัวตนแบบสองขั้นตอน เช่น การส่งรหัสผ่านไปยังโทรศัพท์มือถือหรือการใช้แอปพลิเคชันยืนยันตัวตน

3: Update Software อยู่เสมอ

• อัปเดตระบบปฏิบัติการ (OS) ที่ใช้งานอยู่เสมอ
• อัปเดต Hosting, CMS, และปลั๊กอินต่างๆ เพื่อปิดช่องโหว่ที่อาจเกิดขึ้น
• การอัปเดตซอฟต์แวร์อย่างสม่ำเสมอเป็นการป้องกันการโจมตีที่มาจากช่องโหว่ในซอฟต์แวร์ที่เก่าและไม่ได้รับการแก้ไข

4: Backup:

• ทำการสำรองข้อมูลเสมอ
• เก็บข้อมูลสำรองในที่ปลอดภัย เช่น ใน GitHub หรือบริการคลาวด์ที่มีความปลอดภัย
• การสำรองข้อมูลเป็นการป้องกันความสูญเสียข้อมูลในกรณีที่เกิดการโจมตีหรือปัญหาทางเทคนิค

การปฏิบัติตามแนวทางเหล่านี้จะช่วยลดความเสี่ยงในการถูกโจมตีและเพิ่มความปลอดภัยให้กับระบบของคุณ

แนวทางการสร้างเว็บไซต์ที่ปลอดภัยจาก PromptPage

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

https://promptpage.org/

แนวทางที่ใช้คือการแปลงเนื้อหาให้เป็น Static File (HTML, CSS, JS) แล้วนำไปติดตั้งใน Hosting ต่างๆแทนครับ

https://promptpage.org/

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 มาช่วยสอนจากออสเตรเลียเลยครับ

ติดตามโครงการได้ที่

เทคไทบ้าน

https://techthaiban.co/digital-local

2: เว็บไซต์ชุมชน โครงการจัดทำเว็บไซต์ข้อมูลชุมชน จัดทำโดยชุมชน เรากำลังดำเนินทำเว็บไซต์ท่องเที่ยวชุมชนภูผาม่านเพื่อนำร่องโครงการ

ซึ่งได้จัดทำมาทั้งหมด 3 เว็ปไซต์โดยทั้งหมดใช้ Astro, GitHub, และ Cloudflare Page ครับ:

อีสานจะเลิร์น

ต้องการสร้างคอมมูนิตี้ของการเรียนรู้ในประเด็นต่างๆ ในอีสาน โดยจะเริ่มตั้งต้นและตั้งหมุดหมายที่ขอนแก่นก่อน มาในคอนเซปต์ จะเรียน จะเล่น จะรู้ ให้อยู่ที่อีสานจะเลิร์น

https://isaanjalearn.org/

ฟาร์มคิด โฮมสเตย์

บ้านพักโฮมสเตย์ฉบับส่วนตัว วิวทุ่งนา ภูเขา ระเบียงนั่งชมค้างคาว วิวพระอาทิตย์ตก เหมาะกับการพักผ่อนแบบสงบ

https://farmkits.me/

Khon Kean Trip

การท่องเที่ยวแห่งประเทศไทย (ททท.) สำนักงานขอนแก่นร่วมกับเทคไทบ้านในการจัดทำเว็บไซต์ข้อมูลการท่องเที่ยวจังหวัดขอนแก่น โดยมีเป้าหมายเพื่อให้นักท่องเที่ยวที่มาเยี่ยมขอนแก่นสามารถเดินทาง Road Trip ด้วยตนเองได้ง่าย อีกนัยหนึ่ง ก็เพื่อให้ชุมชนสามารถนำข้อมูลเส้นทางท่องเที่ยวของตนมาไว้บนแพลตฟอร์มออนไลน์ในการสืบค้นข้อมูลเส้นทางได้ง่ายเช่นกัน

https://khonkaentrip.com/

ความเร็วใน Astro

ได้ผลลัพธ์ที่ดีมากๆทั้ง Mobile และ Desktop เลยครับ

https://pagespeed.web.dev

ทำยังไงให้ Wordpress ปลอดภัยมากขึ้น

จากสถิติที่ทีมงานเจอมาประมาณ 90% เกิดมาจากเรื่องของ Password

จึงเกิดคำถามว่า

จะดีกว่าไหม ถ้า Login โดยไม่ต้องใช้ Password

ทาง Seed Webs เลยพัฒนาปลั๊กอินที่ใช้การ Login ด้วย Social Account หรือ Email แทนครับ

https://th.seedwebs.com/product/seed-login-pro/

โดยมีคำแนะนำในการเพิ่มความปลอดภัยให้ 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 นะครับ

https://nodejs.org/en

หลังจากนั้นเข้าไปที่ Astro Website

https://astro.build/

ในขั้นตอนต่อไปนี้อาจจะไม่เหมือน 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 มากกว่า)

https://astro.build/db/

ทางทีมงานได้จัดทำระบบลงทะเบียนขึ้นมาเพื่อเป็นตัวอย่างการนำ Astro DB มาใช้นะครับ น่าสนใจมากๆเลย

https://astroform.thaiui.org/

สามารถ Fork ไปลองศึกษากันต่อได้ที่

GitHub - ThaiUI/astroform: Mini Form with Astro DB

คำแนะนำเพิ่มเติม

• ติดตั้ง Tailwind CSS ใน Astro [Link]
• ติดตั้ง Font Thai ใน Astro [Link]

สรุป

การใช้เทคโนโลยีเช่น Astro, GitHub, และ Cloudflare Page ช่วยเพิ่มความปลอดภัยให้กับเว็บไซต์ผ่านการสร้างเนื้อหาแบบ Static, การจัดการเวอร์ชันและการสำรองข้อมูล เหมาะสำหรับการนำมาเพิ่มความปลอดภัยให้กับเว็บไซต์ทั้งภาคเอกชน, ชุมชน และหน่วยงานต่างๆครับ