CORS บทนำสำหรับผู้เริ่มต้น

สงสัยว่า CORS คืออะไร (การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด)?


ในภาพยนตร์สายลับเจ้าหน้าที่รักษาความปลอดภัยมีวิธีการเข้ารหัสในการส่งข้อมูลระหว่างกัน เนื่องจากพวกเขาส่วนใหญ่ส่งข้อมูลที่สามารถใช้กับพวกเขาหากมันตกอยู่ในมือของศัตรูของพวกเขาพวกเขาต้องให้แน่ใจว่าผู้ที่ได้รับข้อมูลเป็นฝ่ายที่เชื่อถือได้ เช่นเดียวกับผู้ที่ส่งข้อมูลดังกล่าว เมื่อผู้ส่งและผู้รับมีความน่าเชื่อถือความน่าเชื่อถือและความปลอดภัยของข้อมูลสามารถรับประกันได้.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

แบบจำลองของสถานการณ์นี้เกิดขึ้นในการสื่อสารระหว่างเบราว์เซอร์และเว็บเซิร์ฟเวอร์และมันถูกเรียกว่า นโยบายแหล่งกำเนิดเดียวกัน.

ตาม MDN:

 นโยบายแหล่งกำเนิดเดียวกัน เป็นกลไกความปลอดภัยที่สำคัญที่ จำกัด วิธีการโหลดเอกสารหรือสคริปต์จากแหล่งกำเนิดหนึ่งสามารถโต้ตอบกับทรัพยากรจากแหล่งกำเนิดอื่น ช่วยแยกเอกสารที่อาจเป็นอันตรายลดการโจมตีที่เป็นไปได้.

CORS คืออะไร?

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

การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) เป็นกลไกที่ใช้ส่วนหัว HTTP เพิ่มเติมเพื่อบอกเบราว์เซอร์เพื่อให้เว็บแอปพลิเคชันทำงานที่แหล่งกำเนิดเดียวเข้าถึงทรัพยากรที่เลือกจากแหล่งกำเนิดที่แตกต่างกัน.

ฉันได้พูดคุยเกี่ยวกับแหล่งกำเนิดมากกว่าหนึ่งครั้งและคุณอาจสงสัยว่ามันหมายถึงอะไร ที่มาถูกกำหนดโดยโปรโตคอลโดเมนและพอร์ตของ URL เมื่อคุณมี API ที่จุดเริ่มต้นเช่น https://api.geekflare.com:3001 และส่วนหน้าของคุณที่ https://geekflare.com ต้นกำเนิดจะถูกกล่าวว่าแตกต่างกัน ในสถานการณ์นี้คุณจะต้องใช้ CORS เพื่อให้สามารถเข้าถึงทรัพยากรได้ทั้งสองด้าน.

เมื่อมีการร้องขอไปยังเซิร์ฟเวอร์เบราว์เซอร์ (ไคลเอนต์) และเซิร์ฟเวอร์จะส่งคำขอและการตอบกลับส่วนหัว HTTP จะรวมอยู่ด้วย ในบรรดาส่วนหัวเหล่านี้ส่วนหัวเพิ่มเติมถูกรวมไว้เพื่อป้องกันเบราว์เซอร์จากการบล็อกการสื่อสาร.

ทำไมเบราว์เซอร์จะปิดกั้นการสื่อสาร?

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

ส่วนหัว CORS

หนึ่งในส่วนหัวที่ปลอดภัยซึ่งสามารถตอบสนองหรือร้องขอส่วนหัว.

ส่วนหัวการตอบสนอง

นี่คือส่วนหัวที่เซิร์ฟเวอร์ส่งกลับมาในการตอบกลับ.

  • Access-Control-Allow-Origin:: สิ่งนี้ใช้เพื่อระบุจุดเริ่มต้นที่อนุญาตให้เข้าถึงทรัพยากรบนเซิร์ฟเวอร์ เป็นไปได้ที่จะระบุว่าอนุญาตเฉพาะคำขอจากแหล่งกำเนิดที่ระบุ – Access-Control-Allow-Origin: https://geekflare.com หรือต้นทางไม่สำคัญ – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: ตามชื่อหมายถึงสิ่งนี้แสดงรายการส่วนหัวที่เบราว์เซอร์มีการเข้าถึง.
  • Access-Control-Max-Age:: นี่เป็นการระบุช่วงเวลาที่แคชสำหรับการตอบรับคำขอ preflight สามารถทำได้.
  • Access-Control-Allow-Credentials:: สิ่งนี้บ่งชี้ว่าเบราว์เซอร์สามารถใช้การตอบสนองเมื่อมีการร้องขอเริ่มต้นด้วยหนังสือรับรอง.
  • Access-Control-Allow-Methods:: นี่เป็นการระบุวิธีการที่ได้รับอนุญาตเมื่อพยายามเข้าถึงทรัพยากร.
  • Access-Control-Allow-Headers:: นี่เป็นการระบุว่าส่วนหัว HTTP สามารถใช้ในการร้องขอ.

นี่คือตัวอย่างของการตอบสนองที่จะมีลักษณะเป็นอย่างไร

HTTP / 1.1 204 ไม่มีเนื้อหา
การเข้าถึงควบคุมการอนุญาตกำเนิด: *
การเข้าถึงควบคุมการอนุญาตวิธี: GET, HEAD, PUT, PATCH, POST, DELETE
แตกต่างกัน: การเข้าถึงการควบคุมคำขอ – ส่วนหัว
การควบคุมการเข้าถึงอนุญาตให้ส่วนหัว: เนื้อหาประเภทยอมรับ
ความยาวเนื้อหา: 0
วันที่: เสาร์, 16 พฤศจิกายน 2019 11:41:08 GMT + 1
การเชื่อมต่อ: Keep-alive

ขอส่วนหัว

นี่คือส่วนหัวที่คำขอของลูกค้าควรมีเพื่อใช้ประโยชน์จากกลไก CORS.

  • จุดกำเนิด: สิ่งนี้ระบุถึงที่มาของคำขอของลูกค้า เมื่อทำงานกับส่วนหน้าและส่วนหลังดังกล่าวก่อนหน้านี้จะเป็นโฮสต์ของแอปพลิเคชันส่วนหน้าของคุณ.
  • Access-Control-Request-Method:: สิ่งนี้ใช้ในการร้องขอ preflight เพื่อระบุวิธีการ HTTP ที่จะใช้ในการร้องขอ.
  • Access-Control-Request-Headers:: สิ่งนี้ใช้ในคำขอ preflight เพื่อระบุส่วนหัว HTTP ที่จะใช้ในการร้องขอ.

นี่คือตัวอย่างของสิ่งที่คำขอจะมีลักษณะ

curl -i -X ​​OPTIONS localhost: 3001 / api \
-H ‘วิธีการควบคุมการร้องขอ – วิธีการ: GET’ \
-H ‘Access-Control-Request-Headers: Content-Type, Accept’ \
-H ‘ต้นกำเนิด: http: // localhost: 3000’

คำขอ preflight

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

หลังจากกล่าวถึงคำขอ preflight ที่นี่และที่นั่นสิ่งที่อาจเป็นไปได้?

คำขอ preflight เกิดขึ้นเมื่อลูกค้าต้องส่งคำขอ preflight ก่อนคำขอหลัก คำขอ preflight มีมากกว่า การสอบสวน เพื่อตรวจสอบว่าเซิร์ฟเวอร์รองรับคำขอหลักที่จะทำหรือไม่ เมื่อได้รับการยืนยันในเชิงบวกคำขอหลักจะถูกส่งไป.

เมื่อคำขอไม่ใช่คำขอ preflight จะถูกเรียกว่า คำของ่าย ๆ.

การใช้ CORS

คุณส่วนใหญ่จะต้องการตั้งค่าสิ่งต่าง ๆ ที่ด้านหลังของใบสมัครของคุณ การใช้งานขึ้นอยู่กับกรอบงานที่คุณใช้ สำหรับบทช่วยสอนนี้เราจะดูวิธีการทำใน NodeJS และ Rails.

ทางรถไฟ

ฉันแนะนำให้คุณใช้ประโยชน์จาก แร็คล ธ อัญมณี. จากนั้นคุณจะต้องเพิ่มสิ่งนี้ลงในไฟล์ config / application.rb.

config.middleware.insert_before 0, Rack :: Cors do
อนุญาตให้ทำ
ต้นกำเนิด ‘*’
ทรัพยากร ‘*’,
ส่วนหัว:: ใด ๆ,
เปิดเผย:% i (ไคลเอ็นต์โทเค็น uid ประเภทโทเค็นการเข้าถึงโทเค็นหมดอายุ),
วิธีการ:% i (รับโพสต์ใส่แพทช์ลบตัวเลือกหัว),
หนังสือรับรอง: จริง
ปลาย
ปลาย

NodeJS

ใน Node.js สิ่งนี้จะมีลักษณะเช่นนี้.

app.all (‘*’, (req, res, next) => {
res.header (‘Access-Control-Allow-Origin’, ‘*’);
res.header (‘การควบคุมการอนุญาตการเข้าถึง’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
res.header (‘Access-Control-Allow-Headers’, ‘*’);
res.header (‘การควบคุมการเข้าถึงการอนุญาต – ข้อมูลรับรอง’ จริง);
ต่อไป();
});

ในข้อมูลโค้ดเรากำลังตั้งค่าจุดเริ่มต้นวิธีส่วนหัวและข้อมูลรับรองที่ควรได้รับอนุญาตให้เข้าถึงทรัพยากรที่มีอยู่บนเซิร์ฟเวอร์ของเรา คุณสามารถชำระเงินได้ Sqreen ผู้จัดทำโมดูลส่วนหัวความปลอดภัยที่จะรวมเข้ากับแอปพลิเคชัน Ruby, PHP, Python, Java, Go, Node.JS และเพื่อนำไปใช้ใน Apache หรือ Nginx โปรดดูคู่มือนี้.

ข้อสรุป

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map