09 กรกฎาคม 2564
เพิ่มความปลอดภัยให้ไฟล์ ด้วย SUBRESOURCE INTEGRITY

 

Subresource Integrity (SRI) คืออะไร
เป็นฟีเจอร์ความปลอดภัยที่จะเป็นตัวช่วยให้ Browser สามารถตรวจสอบไฟล์ Scripts หรือ Stylesheets นั้นๆ ได้ว่าไม่ถูกแก้ไขไปจากไฟล์ต้นฉบับ ดังนั้น เพื่อเป็นการยืนยันข้อมูลกับ Browser เราจึงต้องมี flag บางอย่างไว้ให้ Browser ไว้คอยตรวจสอบโดย flag ที่ว่านี้ ก็คือ แอตทริบิวต์ที่ชื่อ integrity นั่นเอง 

เป็นที่ทราบกันดีว่าข้อมูล 1 ชุดเมื่อเข้า hash function แล้วเราจะได้ค่าคงที่เสมอ ดังนั้น เราจึงอาศัยความจริงข้อนี้ในการนำไฟล์ของเราเข้าสู่ hash function แล้วนำค่าที่ได้ไปใส่ใน integrity แต่ก่อนจะนำไปใส่ต้องแปลงค่าเป็นแบบ base64-encoded ก่อน

ส่วน Cross Origin Resource Sharing (CORS) คือ เทคโนโลยีที่ถูกกำหนดขึ้นโดย W3C ซึ่งมันจะทำให้ เว็บไซต์สามารถเข้าถึงข้อมูลข้าม Domain กันได้ โดย CORS จะเป็นผู้กำหนดวิธีการสื่อสารระหว่าง Web Browser และ Web Server เพื่อที่จะสามารถอนุญาติให้เข้าถึงข้อมูลข้าม Domain ได้อย่างปลอดภัย

Subresource Integrity (SRI) ทำงานอย่างไร
หลังจากที่เราเข้าเว็บไซต์ Browser จะเริ่มทำการอ่านไฟล์ที่อยู่ในแท็ก <script> หรือ <link> ซึ่งถ้าหากแท็กดังกล่าวมีการะบุแอตทริบิวต์ integrity เอาไว้ มันจะทำการตรวจสอบไฟล์ดังกล่าวโดยการดูรหัส hash หากพบว่ามีข้อมูลไม่ตรงกัน Browser จะปฎิเสธการโหลดไฟล์นั้นทันที

การใช้ Subresource Integrity (SRI) ในทางปฏิบัติ
ก่อนอื่นมาดูว่าเราจะใช้มันกับแท็ก Script ได้อย่างไร คุณเพียงแค่ต้องแก้ไขแท็ก <script> ด้วยคุณสมบัติที่เรียกว่า integrity เพื่อใช้งาน SRI และโค้ดด้านล่างแสดงการใช้งาน SRI อย่างง่าย


เมื่อมีการกำหนด SRI hash ของไฟล์จะถูกกำหนดแบบสแตติกพร้อมกับแท็ก <script> ดังนั้น แม้ว่าไฟล์จะให้บริการจากเซิร์ฟเวอร์บุคคลที่สาม (เช่น CDN) เบราว์เซอร์จะดาวน์โหลดไฟล์ และคำนวณ hash ของไฟล์นั้น จากนั้นจะตรวจสอบกับ hash ที่กำหนดด้วยแท็ก <script> บนหน้าเว็บของคุณ หาก hash ตรงกัน ไฟล์จะถูกดาวน์โหลด ถ้าไม่เช่นนั้นจะถูกบล็อก ดังนั้นมันจะป้องกันการดำเนินการของไฟล์

แต่เป็นความรับผิดชอบของคุณที่จะต้องตรวจสอบให้แน่ใจว่าไฟล์ต้นฉบับที่คุณใช้สร้างรหัส hash นั้นปราศจากช่องโหว่รึเปล่า
และหากคุณกำลังอ้างถึงไลบรารี JavaScript ยอดนิยมจาก CDN คุณอาจพบว่ามีการกล่าวถึงความสมบูรณ์ของ hash สำหรับแต่ละรีลีส ตัวอย่างบางส่วน ได้แก่ jQuery, BootStrap & เป็นต้น นอกจากนั้น คุณยังสามารถใช้ SRI เพื่อปกป้องไฟล์ที่คุณพัฒนาได้อีกด้วย