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 ในลักษณะนี้
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title> Corgi facts </title> <h1> Corgis are the best! </h1> </head> <body> <p id="intro"> Corgis were herding dogs</p> <b> Corgi is #11 in terms of intelligence in dogs </b> </body> </html> |
จะ render ออกมาในลักษณะ DOM เป็นแบบนี้
ถ้าเราไม่มี SOP เราจะสามารถใช้ Javascript ในการอ้างอิงค่า DOM <p id=”intro”>ได้เป็น
|
1 |
document.getElementById("intro") |
ทีนี้ถ้าเรากำหนดใหม่จะเขียนเป็น
|
1 |
<script>document.getElementById("intro").innerHTML=" Syberian were dump dogs"</script> |
จะออกมาเป็น
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title> Corgi facts </title> <h1> Corgis are the best! </h1> </head> <body> <p id="intro"> Corgis were herding dogs</p> <b> Corgi is #11 in terms of intelligence in dogs </b> <script>document.getElementById("intro").innerHTML=" Syberian were dump dogs"</script> </body> </html> |
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
|
1 2 3 |
GET /cors HTTP/1.1 Origin: http://www.alice.com Host: api.bob.com |
HTTP Response
|
1 2 3 4 |
Access-Control-Allow-Origin: http://www.alice.com Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: FooBar Content-Type: text/html; charset=utf-8 |
- 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 ที่เป็นการขออนุญาตต่างๆ เช่น.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Preflight Request OPTIONS /cors HTTP/1.1 Origin: http://www.alice.com Access-Control-Request-Method: PUT // ขอเข้าถึงปลายทาง api.bob.com โดยใช้ PUT Method Access-Control-Request-Headers: X-Custom-Header // ขอเข้าถึง X-Custom-Header Host: api.bob.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0 Preflight Response ... Access-Control-Allow-Origin: http://www.alice.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Content-Type: text/html; charset=utf-8 |
- Access-Control-Allow-Credentials: โดยปกติ Cookie จะไม่ถูกส่งใน CORS Request แต่หากำหนดค่านี้เป็น True ก็จะกลายเป็นว่าจะนำ Cookie เข้ามาไว้ใน CORS Requests ได้
หาก Server ปฏิเสธการเข้าถึงจาก ORIGIN ที่กำหนดจะกลายเป็นว่าไม่มีการตอบ CORS Header ใดๆกลับมา แล้วใน Console log ของ Browser จะขึ้นประมาณว่า
|
1 |
XMLHttpRequest cannot load http://api.bob.com. Origin http://www.alice.com is not allowed by Access-Control-Allow-Origin. |
เครื่องมือทดสอบ CORS: http://web-in-security.blogspot.de/2017/07/cors-misconfigurations-on-large-scale.html
Source::
- https://staticapps.org/articles/cross-domain-requests-with-cors/
- http://blog.blakesimpson.co.uk/read/64-apache-configure-cors-headers-for-whitelist-domains
- https://www.html5rocks.com/en/tutorials/cors/
- https://www.youtube.com/watch?v=9_BFGgfAHD8
- https://www.bedefended.com/papers/cors-security-guide
You May also Like
LINE@Techsuii.com
