ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล
หลีกเลี่ยงการจัดเก็บโทเค็นหรือ PII ใน localStorage
ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
พื้นที่จัดเก็บข้อมูลเป็นข้อความธรรมดา
localStorage และ sessionStorage บันทึกข้อมูลลงดิสก์โดยไม่เข้ารหัสภายใต้โปรไฟล์ผู้ใช้ กระบวนการใดก็ตามที่เข้าถึงระบบไฟล์ได้ รวมถึงมัลแวร์ เครื่องมือสำรองข้อมูล หรือผู้ใช้อื่นที่เข้าสู่ระบบอยู่ สามารถอ่านค่าทุกค่าที่คุณจัดเก็บไว้ได้โดยไม่ต้องผ่านเบราว์เซอร์
สคริปต์ใด ๆ ก็เข้าถึงได้
สคริปต์ทั้งหมดที่ทำงานในต้นทางเดียวกันใช้พื้นที่จัดเก็บข้อมูลเดียวกัน การโจมตีแบบ XSS ที่สำเร็จ SDK ของบุคคลที่สามที่ถูกเจาะ หรือส่วนขยายเบราว์เซอร์ที่เป็นอันตราย สามารถเรียก localStorage.getItem และขโมยส่งค่าที่จัดเก็บไว้ทั้งหมดได้ ไม่มีการแยกพื้นที่ระหว่างสคริปต์แต่ละตัว
อย่าจัดเก็บโทเค็นยืนยันตัวตน
อย่าเก็บโทเค็นเซสชัน โทเค็น JWT โทเค็นรีเฟรช หรือคีย์สำหรับส่วนติดต่อโปรแกรมไว้ใน localStorage หากผู้โจมตีแทรก JavaScript เพียงหนึ่งบรรทัด โทเค็นจะรั่วไหลทันที ควรใช้คุกกี้ httpOnly, Secure และ SameSite เพื่อไม่ให้ JavaScript เข้าถึงโทเค็นได้เลย
อย่าจัดเก็บรหัสผ่าน
การจัดเก็บรหัสผ่านในรูปแบบใดก็ตาม ไม่ว่าจะเป็นข้อความธรรมดา ค่าแฮช หรือข้อมูลเข้ารหัส ล้วนไม่ถูกต้องบนฝั่งไคลเอ็นต์ การทำแฮชฝั่งไคลเอ็นต์ไม่ได้ช่วย เพราะผู้โจมตีสามารถอ่านค่าแฮชและนำไปใช้ซ้ำได้ การจัดการรหัสผ่านควรอยู่บนเซิร์ฟเวอร์ทั้งหมด โดยใช้แฮชรหัสผ่านเฉพาะทาง เช่น bcrypt
ไม่จัดเก็บข้อมูลบัตรเครดิต
PCI-DSS ห้ามจัดเก็บหมายเลขบัตร รหัส CVV ข้อมูลแถบแม่เหล็ก หรือวันหมดอายุไว้ในพื้นที่จัดเก็บข้อมูลฝั่งไคลเอนต์ โปรดใช้ผู้ให้บริการชำระเงินที่ใช้โทเค็น (Stripe, Braintree, Adyen) ซึ่งจะส่งคืนโทเค็นอายุสั้นที่ผูกกับต้นทางของคุณแทน
ไม่จัดเก็บตัวระบุส่วนบุคคล
หมายเลขประจำตัวที่ออกโดยรัฐบาล วันเดือนปีเกิดแบบเต็ม ที่อยู่บ้าน และข้อมูลทางการแพทย์ ล้วนดึงดูดความสนใจจากหน่วยงานกำกับดูแล (GDPR, HIPAA) และผู้โจมตี จัดเก็บเฉพาะข้อมูลที่จำเป็นสำหรับเซสชันปัจจุบัน ขอข้อมูลนั้นใหม่เมื่อจำเป็น และให้เซิร์ฟเวอร์เป็นแหล่งข้อมูลหลัก
XSS เพิ่มความเสียหายเป็นทวีคูณ
ข้อบกพร่อง XSS ที่ทำให้ document.cookie รั่วไหลนั้นแย่อยู่แล้ว แต่ข้อบกพร่องเดียวกันบนหน้าที่จัดเก็บโทเค็นไว้ใน localStorage จะมอบค่าทุกอย่างที่จัดเก็บไว้ให้ผู้โจมตีได้ในครั้งเดียว ให้ถือว่า localStorage เป็นพื้นที่ที่มีความเสี่ยงในลักษณะว่า "เมื่อสคริปต์หนึ่งถูกเจาะ ทุกอย่างก็ถูกเจาะด้วย"
การเข้ารหัสไม่ได้ช่วยปกป้องคุณ
การเข้ารหัสค่าด้วยคีย์ที่อยู่ใน JavaScript เช่นเดียวกันไม่ได้ให้การป้องกันที่แท้จริง — ผู้โจมตีที่อ่านข้อความเข้ารหัสได้ก็อ่านคีย์ได้เช่นกัน ข้อมูลลับที่แท้จริงต้องเก็บไว้ฝั่งเซิร์ฟเวอร์และออกให้ใหม่ ไม่ใช่เก็บไว้อย่างถาวรฝั่งไคลเอนต์
สิ่งที่จัดเก็บได้อย่างปลอดภัย
การตั้งค่าส่วนติดต่อผู้ใช้ (ชุดรูปแบบ แถบด้านข้างที่ยุบอยู่ ภาษา) ตัวเลือกเปิดใช้ฟีเจอร์ที่ไม่อ่อนไหว เนื้อหาแบบฟอร์มฉบับร่าง และสถานะชั่วคราวของตัวช่วยแบบหลายขั้นตอน ล้วนจัดเก็บได้อย่างปลอดภัย เพราะผู้ใช้อาจเห็นข้อมูลเหล่านี้อยู่แล้ว และการรั่วไหลก็ไม่ทำให้บัญชีถูกยึดครอง
localStorage.setItem("theme", "dark");
localStorage.setItem("sidebar:collapsed", "true");
localStorage.setItem("draft:post-123", draftMarkdown);ใช้คุกกี้สำหรับการยืนยันตัวตน
ออกข้อมูลยืนยันตัวตนผ่าน Set-Cookie: token=...; HttpOnly; Secure; SameSite=Strict แฟล็ก HttpOnly ทำให้ JavaScript เข้าถึงคุกกี้ไม่ได้ จึงป้องกันเพย์โหลด XSS ที่ขโมยโทเค็นได้เกือบทั้งหมด แม้ว่าหน้านั้นจะมีข้อบกพร่องอื่นอยู่ก็ตาม
มาตรการลดความเสี่ยงในการใช้พื้นที่จัดเก็บข้อมูล
หากจำเป็นต้องแคชข้อมูลที่ดูเหมือนอ่อนไหว ให้จำกัดขอบเขตอย่างเคร่งครัด (กำหนด TTL ให้สั้น ล้างข้อมูลเมื่อออกจากระบบ และลบเมื่อปิดแท็บผ่าน sessionStorage) ใช้นโยบายความปลอดภัยของเนื้อหาที่เข้มงวดเพื่อบล็อกสคริปต์ที่ถูกแทรก และตรวจสอบสคริปต์ของบุคคลที่สามทุกตัวที่ทำงานบนหน้าซึ่งผ่านการยืนยันตัวตน
ตรวจสอบความรู้
เหตุใดโทเค็นยืนยันตัวตนที่จัดเก็บใน localStorage จึงถือเป็นความเสี่ยงด้านความปลอดภัย
สรุป
Web Storage เป็นข้อความธรรมดา สคริปต์อ่านได้ และใช้ร่วมกันภายในต้นทางเดียวกัน อย่าใส่โทเค็นยืนยันตัวตน รหัสผ่าน ข้อมูลการชำระเงิน หรือข้อมูลส่วนบุคคลที่อยู่ภายใต้การกำกับดูแลไว้ที่นั่น เก็บข้อมูลลับในคุกกี้ httpOnly และใช้ localStorage สำหรับสถานะส่วนติดต่อผู้ใช้ที่ไม่เป็นอันตราย ซึ่งผู้ใช้อาจเห็นได้อยู่แล้วเท่านั้น
คำถามที่พบบ่อย
บทเรียน “ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล”
หลีกเลี่ยงการจัดเก็บโทเค็นหรือ PII ใน localStorage คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- localStorage เทียบกับ sessionStorage
- การรับ การตั้งค่า และการลบรายการ
- การรับฟังเหตุการณ์พื้นที่จัดเก็บข้อมูล
- ความปลอดภัย: สิ่งที่ไม่ควรจัดเก็บในพื้นที่จัดเก็บข้อมูล