Amazon S3 CORS (Cross-Origin Resource Sharing) และการโหลดแบบอักษรข้ามโดเมนของ Firefox

Question 1

มีปัญหามานานแล้วที่ Firefox ไม่โหลดแบบอักษรจากแหล่งที่มาที่แตกต่างจากหน้าเว็บปัจจุบัน โดยปกติปัญหาจะเกิดขึ้นเมื่อใช้ฟอนต์บน CDN

คำถามอื่น ๆ มีการแก้ปัญหาต่างๆ:

CSS @ font-face ไม่ทำงานกับ Firefox แต่ทำงานกับ Chrome และ IE

ด้วยการเปิดตัว Amazon S3 CORS มีวิธีแก้ไขโดยใช้ CORS เพื่อแก้ไขปัญหาการโหลดแบบอักษรใน Firefox หรือไม่

แก้ไข: จะเป็นการดีที่จะดูตัวอย่างการกำหนดค่า S3 CORS

แก้ไข 2: ฉันพบวิธีแก้ปัญหาที่ใช้งานได้โดยไม่เข้าใจว่ามันทำอะไร หากใครสามารถให้คำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับการกำหนดค่าและเวทมนตร์พื้นหลังที่เกิดขึ้นจากการตีความการกำหนดค่าของ Amazon จะได้รับการชื่นชมอย่างมากเช่นเดียวกับ nzifnab ที่ให้ความสำคัญกับมัน

Question 2

อัปเดต 10 กันยายน 2557:

คุณไม่จำเป็นต้องทำการแฮ็กสตริงข้อความค้นหาด้านล่างนี้อีกต่อไปเนื่องจาก Cloudfront รองรับ CORS อย่างเหมาะสมแล้ว ดูhttp://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/และคำตอบนี้สำหรับข้อมูลเพิ่มเติม: https://stackoverflow.com/a/25305915/308315

ตกลงในที่สุดฉันก็มีแบบอักษรที่ใช้งานได้โดยใช้การกำหนดค่าด้านล่างพร้อมปรับแต่งเล็กน้อยจากตัวอย่างในเอกสารประกอบ

แบบอักษรของฉันโฮสต์บน S3 แต่อยู่ข้างหน้าโดย cloudfront

ฉันไม่แน่ใจว่าทำไมมันถึงได้ผลฉันเดาว่าน่าจะเป็น<AllowedMethod> GETและ<AllowedHeader> Content-*จำเป็น

หากใครที่มีความเชี่ยวชาญในการกำหนดค่า Amazon S3 CORS สามารถทำให้เกิดความสว่างขึ้นได้ก็จะได้รับการชื่นชมอย่างมาก

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

แก้ไข:

นักพัฒนาบางรายประสบปัญหา Cloudfront แคชAccess-Control-Allow-Originส่วนหัว ปัญหานี้ได้รับการแก้ไขแล้วโดยเจ้าหน้าที่ AWS ในลิงก์ ( https://forums.aws.amazon.com/thread.jspa?threadID=114646 ) ด้านล่างแสดงความคิดเห็นโดย @ Jeff-Atwood

จากเธรดที่เชื่อมโยงขอแนะนำให้ใช้Query Stringเพื่อแยกความแตกต่างระหว่างการเรียกจากโดเมนต่างๆ ฉันจะทำซ้ำตัวอย่างสั้น ๆ ที่นี่

การใช้curlเพื่อตรวจสอบส่วนหัวการตอบกลับ:

โดเมน A: a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

ส่วนหัวตอบกลับจากโดเมน A:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

โดเมน B: b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

ส่วนหัวตอบกลับจากโดเมน B:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

คุณจะสังเกตเห็นว่าAccess-Control-Allow-Originได้ส่งคืนค่าที่แตกต่างกันซึ่งผ่านการแคช Cloudfront แล้ว

Question 3

หลังจากปรับแต่งบางอย่างฉันดูเหมือนจะทำให้สิ่งนี้ใช้งานได้โดยไม่ต้องแฮ็คสตริงข้อความค้นหา ข้อมูลเพิ่มเติมที่นี่: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors

ฉันจะดำเนินการตั้งค่าทั้งหมดเพื่อให้ง่ายต่อการดูว่าฉันทำอะไรไปบ้างหวังว่านี่จะช่วยคนอื่นได้

ข้อมูลความเป็นมา: ฉันใช้แอพ Rails ที่มีแอพ asset_sync เพื่อใส่สินทรัพย์ลงใน S3 ซึ่งรวมถึงแบบอักษร

ภายในคอนโซล S3 ฉันคลิกที่ที่เก็บข้อมูลคุณสมบัติและ 'แก้ไขการกำหนดค่า cors' ที่นี่: ปุ่มปรับแต่ง CORS

ภายใน textarea ฉันมีบางอย่างเช่น:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

จากนั้นภายในแผง Cloudfront ( https://console.aws.amazon.com/cloudfront/home ) ฉันสร้างการแจกจ่ายเพิ่ม Origin ที่ชี้ไปที่ที่เก็บข้อมูล S3 ของฉัน เพิ่มจุดเริ่มต้น

จากนั้นเพิ่มพฤติกรรมสำหรับเส้นทางเริ่มต้นเพื่อชี้ไปที่การตั้งค่าต้นทางที่ใช้ S3 สิ่งที่ฉันทำคือคลิกที่ส่วนหัวที่อนุญาตพิเศษและเพิ่มOrigin: เพิ่มพฤติกรรมและส่วนหัวที่อนุญาตพิเศษ

สิ่งที่เกิดขึ้นตอนนี้มีดังต่อไปนี้ซึ่งฉันเชื่อว่าถูกต้อง:

1) ตรวจสอบว่าส่วนหัว S3 ได้รับการตั้งค่าอย่างถูกต้อง

curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3

2) ตรวจสอบว่า Cloudfront ทำงานร่วมกับส่วนหัว

curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

(โปรดทราบว่าข้างต้นเป็นสิ่งที่พลาดจาก cloudfront เนื่องจากไฟล์เหล่านี้ถูกแคชเป็นเวลา 180 วินาที แต่เหมือนกันกำลังทำงานกับ Hit)

3) เข้าสู่ cloudfront ด้วยต้นกำเนิดที่แตกต่างกัน (แต่สิ่งที่ได้รับอนุญาตบน CORS สำหรับที่เก็บ S3) - Access-Control-Allow-Originไม่ได้รับการแคช! เย้!

curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

โปรดทราบว่าโดเมนได้รับการเปลี่ยนแปลงเรียบร้อยแล้วโดยไม่มีการแฮ็กสตริงข้อความค้นหา

เมื่อฉันเปลี่ยนส่วนหัว Origin ดูเหมือนว่าจะมีX-Cache: Miss from cloudfrontคำขอแรกเสมอหลังจากนั้นฉันก็ได้รับสิ่งที่คาดหวังX-Cache: Hit from cloudfront

ป.ล. เป็นที่น่าสังเกตว่าเมื่อทำการ curl -I (ตัวพิมพ์ใหญ่ I) จะไม่แสดงส่วนหัว Access-Control-Allow-Origin เนื่องจากเป็นเพียง HEAD เท่านั้นฉันทำ -i เพื่อทำให้เป็น GET และเลื่อนขึ้น

Question 4

แบบอักษรของฉันแสดงอย่างถูกต้องจนกระทั่งกด Heroku ครั้งสุดท้าย ... ฉันไม่รู้ว่าทำไม แต่สัญลักษณ์แทนในจุดเริ่มต้นที่อนุญาต CORS หยุดทำงาน ฉันได้เพิ่มโดเมนทั้งprero และ pro ทั้งหมดของฉันลงในนโยบาย CORS ในการตั้งค่าที่เก็บข้อมูลตอนนี้ดูเหมือนว่า:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>http://examle.com</AllowedOrigin>
        <AllowedOrigin>https://examle.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

UPDATE: เพิ่มของคุณhttp://localhost:PORTด้วย

Question 5

เอกสารระบุว่าคุณสามารถยึดการกำหนดค่าเป็น "แหล่งข้อมูลย่อย cors ในที่เก็บข้อมูลของคุณ" ได้ ฉันใช้สิ่งนี้หมายความว่าฉันจะสร้างไฟล์ชื่อ "cors" ที่รากของที่เก็บข้อมูลของฉันด้วยการกำหนดค่า แต่จะไม่ได้ผล ในที่สุดฉันต้องลงชื่อเข้าใช้พื้นที่การดูแลระบบ Amazon S3 และเพิ่มการกำหนดค่าภายในpropertiesกล่องโต้ตอบของที่เก็บข้อมูลของฉัน

S3 สามารถใช้เอกสารที่ดีกว่านี้ได้ ...

Question 6

ในการกำหนดค่า Amazon S3 CORS (S3 Bucket / Permissions / CORS) หากคุณใช้สิ่งนี้:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

ล ธ ทำงานได้ดีสำหรับ Javascript และ CSS ไฟล์ แต่มันไม่ทำงานสำหรับไฟล์ตัวอักษร

คุณต้องระบุโดเมนเพื่ออนุญาต CORS โดยใช้รูปแบบที่แสดงในคำตอบ @VKen: https://stackoverflow.com/a/25305915/618464

ดังนั้นใช้สิ่งนี้ :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

อย่าลืมแทนที่ "mydomain.com" สำหรับโดเมนของคุณ

หลังจากนี้ให้ยกเลิกแคช CloudFront (CloudFront / Invalidations / Create Invalidation) และจะใช้งานได้

Question 7

ในกรณีของฉันฉันไม่ได้กำหนดเนมสเปซ XML และเวอร์ชันในการกำหนดค่า CORS การกำหนดสิ่งที่ได้ผล

เปลี่ยนแล้ว

<CORSConfiguration>

ถึง

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

Question 8

มีวิธีที่ดีและง่ายกว่านี้!

โดยส่วนตัวแล้วฉันชอบใช้โดเมนย่อย DNS เพื่อแก้ปัญหานี้ หาก CDN ของฉันอยู่หลัง cdn.myawesomeapp.com แทนที่จะเป็น sdf73n7ssa.cloudfront.net เบราว์เซอร์จะไม่หมดสติและบล็อกเป็นปัญหาด้านความปลอดภัยข้ามโดเมน

ในการชี้โดเมนย่อยของคุณไปยังโดเมน AWS Cloudfront ให้ไปที่แผงควบคุม AWS Cloudfront เลือกการกระจาย Cloudfront ของคุณและป้อนโดเมนย่อย CDN ของคุณในฟิลด์ชื่อโดเมนสำรอง (CNAME) บางอย่างเช่น cdn.myawesomeapp.com จะทำ

ตอนนี้คุณสามารถไปที่ผู้ให้บริการ DNS ของคุณ (เช่น AWS Route 53) และสร้าง CNAME สำหรับ cdn.myawesomeapp.com โดยชี้ไปที่ sdf73n7ssa.cloudfront.net

http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/

Question 9

การกำหนดค่านี้ใช้ได้ผลสำหรับฉัน ฉันสามารถแสดงรายการวัตถุเรียกคืนอัปเดตและลบได้

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

Question 10

<ifModule mod_headers.c>

   Header set Access-Control-Allow-Origin: http://domainurl.com

</ifModule>

วิธีแก้ปัญหาง่ายๆ

Question 11

การรีสตาร์ทแอปพลิเคชันสปริงบูต (เซิร์ฟเวอร์) ช่วยแก้ปัญหาให้ฉันได้

ฉันกำหนดค่า CORS อย่างถูกต้องบน S3 curl ให้การตอบสนองที่ถูกต้องพร้อมส่วนหัวต้นทาง Safari กำลังดึงแบบอักษรอย่างถูกต้อง เป็นเพียงโครเมี่ยมที่ไม่เต็มใจที่จะยอมรับ CORS

ไม่แน่ใจว่าเกิดจากพฤติกรรมอะไรกันแน่ ต้องเป็นสิ่งที่เกี่ยวข้องกับ If-modified-since

Question 12

สิ่งนี้ไม่เกี่ยวข้องกับแบบอักษร แต่กับรูปภาพอาจเป็นกรณีขอบ แต่อย่างที่เกิดขึ้นกับฉันมันอาจเกิดขึ้นกับอีกอันหนึ่ง ฉันจะทิ้งไว้ที่นี่หวังว่ามันจะช่วยใครสักคน:

หากคุณอยู่ในสถานการณ์ "ฉันได้ทำทุกอย่างที่แจ้งแล้ว แต่ก็ยังใช้ไม่ได้" น่าจะเป็นปัญหาเกี่ยวกับแคชใน Chrome และ Safari สมมติว่าเซิร์ฟเวอร์ของคุณมีชุดการกำหนดค่า CORS ที่เหมาะสม:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
    </CORSRule>
</CORSConfiguration>

และใน Firefox ทุกอย่างใช้งานได้ดี แต่ใน Chrome และ Safari ไม่เป็นเช่นนั้น หากคุณกำลังเข้าถึงเส้นทางภาพระยะไกลของคุณจากทั้ง<img src="http://my.remote.server.com/images/cat.png">แท็กธรรมดาและจาก js Image element src เช่นด้วยวิธีต่อไปนี้:

var myImg = new Image()
myImg.crossOrigin = 'Anonymous'
myImg.onload = () => {
  // do stuff (maybe draw the downloaded img on a canvas)
}
myImg.src = 'http://my.remote.server.com/images/cat.png'

คุณอาจได้รับNo 'Access-Control-Allow-Origin'ข้อผิดพลาดใน Chrome และ Safari สิ่งนี้เกิดขึ้นเนื่องจากครั้งแรก<img>ทำให้แคชของเบราว์เซอร์ยุ่งและเมื่อคุณพยายามเข้าถึงภาพเดียวกันในภายหลัง (ในองค์ประกอบภาพในรหัส) มันก็พัง เพื่อหลีกเลี่ยงปัญหานี้คุณสามารถเพิ่มพารามิเตอร์ GET ที่สมมติลงในพา ธ . src หนึ่งพา ธ เพื่อบังคับให้เบราว์เซอร์ร้องขอรูปภาพอีกครั้งและหลีกเลี่ยงการใช้แคชเช่นนี้:

<img src="http://my.remote.server.com/images/cat.png?nocache=true"></img>

Question 13

ใช่แน่นอน Firefox รองรับ CORS สำหรับฟอนต์เช่นเดียวกับข้อกำหนดที่ต้องการที่http://dev.w3.org/csswg/css3-fonts/#allowing-cross-origin-font-loading