ถึงแม้ CDN อย่าง Google Hosted Libraries, JsDelivr หรือ cdnjs จะช่วยให้เว็บไซต์ของเรามี Performance ที่ดีขึ้น แต่ถึงกระนั้น ก็ไม่ได้หมายความว่าบริการเหล่านี้จะปลอดภัยเสมอไป ดังนั้น เราจึงจำเป็นต้องมี “โค้ด” บางอย่างเพื่อมาช่วยยืนยันว่าไฟล์ต่างๆ ที่เรานำมาใช้นั้น ไม่ได้ถูก Hack หรือมีการแก้ไปจากไฟล์ต้นฉบับ โดยโค้ดที่พูดถึงเราเรียกว่า SRI หรือ Subresource Integrity
สำหรับเพื่อนๆ ที่เคยใช้ Bootsrap คงจะเคยผ่านตาโค้ดลักษณะนี้กันมาบ้าง สิ่งที่อยู่ใน integrity นี่แหละครับที่เรียกว่า SRI หรือ Subresource Integrity
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>Code language: HTML, XML (xml)Subresource Integrity (SRI) คืออะไร
Subresource Integrity (SRI) คือ เป็นฟีเจอร์ความปลอดภัยที่จะเป็นตัวช่วยให้ Browser สามารถตรวจสอบไฟล์ Scripts หรือ Stylesheets นั้นๆ ได้ว่าไม่ถูกแก้ไขไปจากไฟล์ต้นฉบับ ดังนั้น เพื่อเป็นการยืนยันข้อมูลกับ Browser เราจึงต้องมี flag บางอย่างไว้ให้ Browser ไว้คอยตรวจสอบโดย flag ที่ว่านี้ ก็คือ แอตทริบิวต์ที่ชื่อ integrity นั่นเอง เป็นที่ทราบกันดีว่าข้อมูล 1 ชุดเมื่อเข้า hash function แล้วเราจะได้ค่าคงที่เสมอ ดังนั้น เราจึงอาศัยความจริงข้อนี้ในการนำไฟล์ของเราเข้าสู่ hash function แล้วนำค่าที่ได้ไปใส่ใน integrity แต่ก่อนจะนำไปใส่ต้องแปลงค่าเป็นแบบ base64-encoded เสียก่อน
Cross Origin Resource Sharing (CORS) คืออะไร
Cross Origin Resource Sharing (CORS) คือ เทคโนโลยีที่ถูกกำหนดขึ้นโดย W3C ซึ่งมันจะทำให้ เว็บไซต์สามารถเข้าถึงข้อมูลข้าม Domain กันได้ โดย CORS จะเป็นผู้กำหนดวิธีการสื่อสารระหว่าง Web Browser และ Web Server เพื่อที่จะสามารถอนุญาติให้เข้าถึงข้อมูลข้าม Domain ได้อย่างปลอดภัย
Subresource Integrity (SRI) ทำงานอย่างไร
หลังจากที่เราเข้าเว็บไซต์ Browser จะเริ่มทำการอ่านไฟล์ที่อยู่ในแท็ก <script> หรือ <link> ซึ่งถ้าหากแท็กดังกล่าวมีการะบุแอตทริบิวต์ integrity เอาไว้ มันจะทำการตรวจสอบไฟล์ดังกล่าวโดยการดูรหัส hash หากพบว่ามีข้อมูลไม่ตรงกัน Browser จะปฎิเสธการโหลดไฟล์นั้นทันที
สร้าง SRI Hash ได้อย่างไร
เราสามารถสร้าง SRI Hash ได้ง่ายๆ เพียงเข้าไปที่เว็บไซต์ https://www.srihash.org และนำ Url ของ Libraries ที่ต้องการไปใส่ จากนั้นก็นำโค้ดไปใช้งานได้เลย แต่เอาจริงๆ CDN ที่ให้บริการ Hosted Libraries ส่วนใหญ่ก็จะมาพร้อมกับ SRI อยู่แล้ว
สรุป
Subresource Integrity (SRI) เป็นเทคโนโลยีด้านความปลอดภัยที่เหมาะสำหรับผู้ที่เป็นเจ้าของเว็บไซต์, นักพัฒนา, ผู้ให้บริการ CDN หรือ Third Party Hosts โดย SRI จะเป็นตัวช่วยในการยืนยัน Source ไฟล์ที่ถูกดึงมาใช้จาก Third Party ทั้งหลายว่าเป็นไฟล์ต้นฉบับ ไม่ได้ถูกแก้ไขโดยผู้ไม่หวังดี ดังนั้น การใช้ไฟล์จาก CDN ต่างๆ เหล่านี้ควรมี SRI ติดมาด้วยเสมอ อันที่จริงแล้ว CDN ที่ให้บริการ Hosted Libraries หลายๆ เจ้าอย่าง JsDelivr และ cdnjs ก็มีการ Generate SRI ให้เลือกอยู่เพื่อนๆ ก็สามารถนำไปใช้ได้เลย
อ้างอิง:
