วิธีการเปิดใช้งาน CORS ใน Apache และ Nginx

จำกัด หรืออนุญาตให้ใช้ทรัพยากรร่วมกันระหว่างไซต์โดยใช้ส่วนหัว CORS.


ส่วนหัว CORS (การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด) ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด.

ฉันสามารถใช้ cors ได้ไหม? ข้อมูลการสนับสนุนคุณสมบัติ cors ข้ามเบราว์เซอร์หลักจาก caniuse.com.

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

CORS ส่วนหัวมีหกประเภทที่เป็นที่นิยมที่เซิร์ฟเวอร์สามารถส่งได้ มาสำรวจพวกมันกัน.

การเข้าถึงการควบคุมอนุญาตให้-แหล่งกำเนิดสินค้า

โปรแกรมที่ได้รับความนิยมมากที่สุดซึ่งบอกให้เบราว์เซอร์โหลดทรัพยากรบนแหล่งกำเนิดที่อนุญาต รองรับไวด์การ์ด (*) และการทำเช่นนั้นโดเมนใด ๆ สามารถโหลดทรัพยากรได้ อย่างไรก็ตามมีตัวเลือกให้อนุญาตแหล่งกำเนิดเฉพาะ.

อาปาเช่

เพิ่มสิ่งต่อไปนี้ใน httpd.conf หรือไฟล์กำหนดค่าที่ใช้งานอยู่.

ส่วนหัวตั้ง Access-Control-Allow-Origin "* * * *"

รีสตาร์ท Apache เพื่อทดสอบ คุณควรเห็นพวกเขาในส่วนหัวการตอบสนอง.

และเพื่ออนุญาตจากแหล่งกำเนิดที่เฉพาะเจาะจง (เช่น: https://gf.dev) คุณสามารถใช้สิ่งต่อไปนี้.

ส่วนหัวตั้ง Access-Control-Allow-Origin "https://gf.dev"

Nginx

นี่คือตัวอย่างของการอนุญาตให้กำเนิด https://geekflare.dev เพิ่มสิ่งต่อไปนี้ในบล็อกเซิร์ฟเวอร์ของ nginx.conf หรือไฟล์การกำหนดค่าที่ใช้งานอยู่.

add_header การควบคุมการเข้าถึง – อนุญาต – กำเนิด "https://geekflare.dev";

การเข้าถึงการควบคุมอนุญาตให้-วิธี

เบราว์เซอร์สามารถเริ่มต้นวิธี HTTP อย่างน้อยหนึ่งวิธีเพื่อเข้าถึงทรัพยากร เช่น: GET, PUT, OPTIONS, PUT, DELETE, POST

อาปาเช่

เพื่ออนุญาตเฉพาะ GET และ POST เท่านั้น.

ส่วนหัวเพิ่ม Access-Control-Allow-Methods "รับโพสต์"

Nginx

สมมติว่าคุณต้องเพิ่มวิธีการลบและตัวเลือกจากนั้นคุณสามารถเพิ่มได้ดังต่อไปนี้.

add_header การเข้าถึงควบคุมการอนุญาตวิธีการ "ลบตัวเลือก";

หลังจากรีสตาร์ทคุณจะเห็นพวกเขาในส่วนหัวการตอบสนอง.

การเข้าถึงการควบคุมอนุญาตให้ส่วนหัว

ส่วนหัวต่อไปนี้อยู่ในรายการที่ปลอดภัยหมายความว่าคุณไม่จำเป็นต้องเพิ่มอีก มันควรจะทำงานตามค่าเริ่มต้น.

  • ชนิดของเนื้อหา
  • ยอมรับ
  • เนื้อหาภาษา
  • ยอมรับภาษา

อย่างไรก็ตามหากคุณต้องการเพิ่มที่กำหนดเองคุณสามารถทำได้ สนับสนุนหนึ่งหรือมากกว่าส่วนหัว.

อาปาเช่

สมมติว่าคุณต้องการอนุญาตให้ส่วนหัว X-Custom-Header และ X-Powered-By.

ส่วนหัวตั้งค่า Access-Control-Allow-Headers ไว้เสมอ "X-Custom-Header, X-Powered-By"

หลังจากรีสตาร์ทคุณควรเห็นผลลัพธ์ในส่วนหัวการตอบสนอง.

Nginx

ตัวอย่างของการเพิ่ม X-Customer-Software และส่วนหัว X-My-Custom.

add_header การควบคุมการเข้าถึงอนุญาตให้ส่วนหัว "X-Custom-Software, X-My-Custom";

การเข้าถึงการควบคุมเปิดเผย-ส่วนหัว

ส่วนหัวต่อไปนี้เป็นรายการที่ปลอดภัยอยู่แล้ว หมายความว่าคุณไม่จำเป็นต้องเพิ่มถ้าคุณต้องการให้ปรากฏ.

  • วันที่หมดอายุ
  • pragma
  • Cache-Control
  • Last-Modified
  • เนื้อหาภาษา
  • ชนิดของเนื้อหา

แต่ถ้าคุณต้องการนอกเหนือจากรายการที่ปลอดภัยคุณสามารถอนุญาตได้ดังต่อไปนี้.

อาปาเช่

ใช้สัญลักษณ์แทนเพื่อแสดงส่วนหัวทั้งหมด.

ส่วนหัวตั้งค่า Access-Control-Expose-Headers เสมอ "* * * *"

หมายเหตุ: สัญลักษณ์ตัวแทนยังคงไม่แสดงส่วนหัวการให้สิทธิ์และหากคุณต้องการคุณต้องระบุอย่างชัดเจน.

ส่วนหัวตั้งค่า Access-Control-Expose-Headers เสมอ "การอนุญาต, *"

ผลลัพธ์ควรมีลักษณะเช่นนี้.

Nginx

หากคุณต้องการแสดงส่วนหัวของต้นฉบับ.

add_header ควบคุมการเข้าถึงเปิดเผยส่วนหัว "ที่มา";

ควบคุมการเข้าถึง-Max-Age

คุณรู้หรือไม่ว่าข้อมูลจาก Access-Control-Allow-Headers และ Access-Control-Allow-Methods สามารถแคชได้นานถึง 24 ชั่วโมงใน Firefox และ 2 ชั่วโมงใน Chrome (76+).

หากต้องการปิดใช้งานการแคชคุณสามารถเก็บค่าเป็น -1

อาปาเช่

เพื่อแคชเป็นเวลา 15 นาที.

ส่วนหัวตั้ง Access-Control-Max-Age ไว้เสมอ "900"

อย่างที่คุณเห็นค่าเป็นวินาที.

Nginx

เพื่อแคชเป็นเวลาหนึ่งชั่วโมง.

add_header Access-Control-Max-Age "3600";

เมื่อเพิ่มแล้วให้รีสตาร์ท Nginx เพื่อดูผลลัพธ์.

การเข้าถึงการควบคุมอนุญาตให้-ข้อมูลประจำตัว

มีเพียงหนึ่งตัวเลือกในการตั้งค่าที่นี่ – จริง นี่คือการอนุญาตหากคุณต้องการเปิดเผยข้อมูลประจำตัวเช่นคุกกี้, ใบรับรอง TLS, การอนุญาต.

อาปาเช่

ส่วนหัวตั้งค่าการควบคุมการอนุญาตให้เข้าถึงข้อมูลประจำตัวเสมอ "จริง"

Nginx

add_header ควบคุมการเข้าถึงอนุญาตให้ข้อมูลประจำตัว "จริง";

และผลลัพธ์.

การตรวจสอบผลลัพธ์

เมื่อเพิ่มส่วนหัวที่จำเป็นแล้วคุณสามารถใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์หรือ ตัวตรวจสอบส่วนหัว HTTP ออนไลน์.

ข้อสรุป

ฉันหวังว่าข้างต้นช่วยให้คุณสามารถใช้งานส่วนหัว CORS ใน Apache HTTP และเว็บเซิร์ฟเวอร์ Nginx เพื่อความปลอดภัยที่ดีขึ้น คุณอาจสนใจใช้ส่วนหัวที่ปลอดภัยที่แนะนำของ OWASP.

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