Các tệp woff phông chữ web không thể tải CSS của tôi nằm trên một máy chủ https + auth khác (CORS liên quan)

Question

CSS của tôi được lưu trữ trên https://www.site1.com (nó là miền được xác thực) và nó sử dụng các tệp woff/ttf nằm trên https://media.site1.com (nó cũng được xác thực - cùng auth hơn www). Để kết nối với các trang web này, tôi phải sử dụng proxy được xác thực.

Tôi phải bật CORS để cho phép tải miền chéo, nhưng có vẻ như tôi không thể tải tài nguyên từ miền khác nếu miền này được xác thực cơ bản VÀ tôi sử dụng proxy được xác thực.

Tôi đã thêm trong Apache các chỉ dẫn sau:

SetEnvIf Origin "^http(s)?://(.*)$" origin_is=$0 
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is 
Header set Access-Control-Allow-Credentials "true" 
Header set Access-Control-Allow-Headers "*" 

Nó sẽ cho phép tất cả các xứ, nhưng khi CSS tải file woff (thông qua yêu cầu GET), tôi nhận được:

Yêu cầu (chỉ tiêu đề thú vị):

GET file.woff HTTP/1.1 
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0 
Host media.site1.com 
Origin https://www.site1.com 
Proxy-Authorization Basic XXX1234567 
Connection keep-alive 
Cache-Control max-age=0 

Trả lời (a s nhìn thấy bởi Firebug hoặc Httpfox):

HTTP/1.0 401 Unauthorized 
WWW-Authenticate BASIC realm="Unspecified" 
Server BigIP 
Connection close 
Content-Length 0 

Nếu tôi tự xác thực để media.site1.com trước khi đi www, kết quả là như nhau. Dường như trình duyệt không gửi thông tin xác thực cơ bản-auth tới máy chủ "media".

Có bất kỳ tiêu đề bổ sung nào tôi phải đặt để đảm bảo rằng các tệp WOFF được tải từ một vị trí khác, với xác thực cơ bản và cuối cùng với proxy được xác thực của doanh nghiệp không?

Answer 1

Chúng tôi chỉ gặp tình huống tương tự.

Theo thông số W3C, phông chữ được liên kết từ tệp CSS phải được tải ở chế độ "ẩn danh": https://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-fetching-requirements Vì vậy, về cơ bản trình duyệt thường sẽ không bao giờ gửi cookie xác thực.

Con đường tôi hiểu nó, bạn có 2 lựa chọn:

1. Disable xác thực cho các tập tin phông chữ trên https://media.site1.com
2. Đây là một hack và tôi không hoàn toàn chắc chắn nó sẽ làm việc. Bạn có thể thử đưa ra yêu cầu AJAX để tải phông chữ trước tệp CSS, như được mô tả ở đây: https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ Tất nhiên, trong bài viết này, chúng làm việc đó vì lý do hiệu suất, tuy nhiên, ý tưởng là tải tệp phông riêng biệt, vì vậy khi tệp CSS được tải, trình duyệt sẽ lấy nó từ bộ nhớ cache của nó. Bạn có thể cần phải thêm tiêu đề withCredentials vào cuộc gọi AJAX của mình, như được mô tả tại đây: https://stackoverflow.com/a/7190487 Ngoài ra, thường là bạn tải các tệp CSS ở đầu trang và JavaScript ở dưới cùng, để ngăn tệp CSS tải trước và phát hành các yêu cầu không thành công, bạn sẽ cần tải nó một cách động trên lời gọi thành công của cuộc gọi AJAX.

Tôi biết giải pháp thứ 2 có vẻ như quá nhiều rắc rối, nhưng tôi không thể tìm ra giải pháp tốt hơn.