Same-origin policy (SOP)

คือการกำหนดให้ browser มีการ interactive ใดๆต้องเป็น ORIGIN เดียวกันเท่านั้น โดย ORIGIN หมายถึงเว็บไซด์ใดๆที่มี protocol, host และ port อันเดียวกัน

ซึ่งการป้องกันแบบนี้จะช่วยการป้องกันอย่างการโจมตี CSRF (Cross Site Request Forgery) ได้ซึ่งมีการสร้าง request ไปยัง domain อื่น เป็นต้น แต่การ interactive ที่ว่าไม่ได้รวมถึงการ request resource อย่าง images, scripts, stylesheets, iframes, form submissions และอื่นๆ

ยกตัวอย่างการแก้ไขข้อมูลโดยไม่มี SOP

หากว่าเรามี HTML ในลักษณะนี้

จะ render ออกมาในลักษณะ DOM เป็นแบบนี้

ถ้าเราไม่มี SOP เราจะสามารถใช้ Javascript ในการอ้างอิงค่า DOM <p id=”intro”>ได้เป็น

ทีนี้ถ้าเรากำหนดใหม่จะเขียนเป็น

จะออกมาเป็น

Cross Origin Resource Sharing (CORS)

Cross Origin Resource Sharing หรือ CORS เป็นตัวที่นำมาช่วยในกรณีที่ Website ของเราจำเป็นต้องเรียก Resource จาก Website หรือก็คือ ORIGIN อื่นๆนั่นเอง โดย Server ปลายทางจะสามารถกำหนดได้ว่าเว็บไซด์ใดสามารถเข้าถึง Resource ได้บ้าง เช่น alice.com ต้องการจะเอา resource จาก bob.com ซึ่งภายใต้ SOP มันไม่สามารถทำได้ เพราะมันคนละ ORIGIN แต่พอมี CORS เข้ามา ทำให้เราเรียกไปที่ bob.com ได้ เป็นต้น

Browser ที่ Support CORS Header: (http://caniuse.com/#search=cors)

โดยปกติ CORS Request ใดๆจะมีการใส่ Header Origin เข้าไปด้วย โดย Browser จะเป็นผู้กำหนดเอง User ไม่สามารถกำหนดได้ และหากเป็นการเรียกไปที่ ORIGIN เดียวกัน โดยปกติ Firefox จะไม่มีการเพิ่ม Origin Header เข้าไป แต่ถ้าเป็น Safari, Chrome จะมีการเพิ่ม Origin Header เข้าไปใน POST/PUT/DELETE Request แม้ว่าจะเป็น Origin เดียวกันก็ตาม

HTTP Request

HTTP Response

CORS Header ที่ใช้ในการกำหนดการเข้าถึง Resource มีดังนี้

  • Access-Control-Allow-Origin: (จำเป็นต้องกำหนดทุกครั้งหากมีการใช้ CORS) กำหนด ORIGIN สามารถเข้าถึง resource ได้บ้าง โดยใส่เป็น ORIGIN ที่จะอนุญาต หากกำหนดเป็น * หมายถึงว่าจาก ORIGIN ใดๆก็ได้ (หากกำหนดให้สามารถเข้าถึงได้จากหลายๆ ORIGIN ใช้ ‘,’ ได้)
  • Access-Control-Allow-Methods: (จำเป็นต้องกำหนดทุกครั้งหากมีการใช้ CORS) กำหนด HTTP methods ที่อนุญาตให้สามารถใช้ได้, เช่น POST, PUT, OPTIONS เป็นต้น
  • Access-Control-Allow-Headers: กำหนด custom request headers ที่สามารถเข้าถึงได้, เช่น AUTHORIZATION, X-CLIENT-ID, X-CLIENT_SECRET เป็นต้น
  • Access-Control-Max-Age: กำหนดเวลาที่ browser จะ cache response ของ request ที่เป็นการขออนุญาตต่างๆ เช่น.
  • Access-Control-Allow-Credentials: โดยปกติ Cookie จะไม่ถูกส่งใน CORS Request แต่หากำหนดค่านี้เป็น True ก็จะกลายเป็นว่าจะนำ Cookie เข้ามาไว้ใน CORS Requests ได้

หาก Server ปฏิเสธการเข้าถึงจาก ORIGIN ที่กำหนดจะกลายเป็นว่าไม่มีการตอบ CORS Header ใดๆกลับมา แล้วใน Console log ของ Browser จะขึ้นประมาณว่า

เครื่องมือทดสอบ CORS: http://web-in-security.blogspot.de/2017/07/cors-misconfigurations-on-large-scale.html

Source::