Wie kann ich CSS-Dateien von anderen Domänen referenzieren?

Question

Ich habe zwei Websites eingerichtet. One, http://static.example.com/, hostet statische Dateien. Ein anderes, http://www.example.com/ hostet eine Webanwendung.

Wenn ich innerhalb von http://www.example.com/ auf Bilder von der statischen Site wie http://static.example.com/logo.png referenziere, wird das Bild korrekt angezeigt. Allerdings, wenn ich gesagt:

<link rel="stylesheet" type="text/css" href="http://static.example.com/demo.css" /> 

auf der Seite, der Stil von demo.css ist nicht auf die Seite angewendet.

In Chrome Developer Tools:

• In Netzwerk Registerkarte kann ich deutlich sehen, die demo.css Datei angefordert und empfangen werden (HTTP 200 oder HTTP 304) durch den Browser. Wenn Sie die Datei auf der neuen Registerkarte öffnen, wird der CSS-Code korrekt angezeigt.

• In Netzwerk Registerkarte, wenn ich auf die Datei klicken und öffnen Antwort Unterregister, es zeigt: „Diese Anfrage keine Antwortdaten hat.“

• In Quellen Registerkarte, gibt es static.example.com Knoten und es enthält demo.css, aber wenn ich auf demo.css klicke, bleibt das Panel auf der rechten Seite leer, als ob die Datei leer wäre.

Gibt es eine Art Cross-Origin-Richtlinie für CSS-Dateien?

Wenn ich die Style-Datei zum Beispiel durch http://cdn.sstatic.net/Sites/stackoverflow/all.css ersetzt, die von Stack Overflow verwendet wird, wird der Style auf die Seite angewendet.

Hinweise:

• Die CSS-Datei demo.css enthält nur body{color:red;}. Die HTML-Seite enthält einen Körper mit einer <p>Hello, World!</p> Innenseite. Der Browser zeigt schwarzen Text an. Ich würde erwarten, dass stattdessen roter Text angezeigt wird.

• Ich ersetzte die tatsächliche TLD durch example.com, die tatsächliche Struktur und Domain-Namen sind sehr ähnlich.

• ich das Problem mit Chromium 49 und Firefox wiedergeben kann 45.

Answer 1

erscheint dem content-type zusammenzuhängen.

Für die CSS-Datei, die nicht funktioniert:

Content-Type:text/plain 

Für die CSS-Datei, die funktioniert:

Content-Type:text/css 

Wie in der

Hier sind MDN docs bemerkt einige Beispiele für Ressourcen, die quer zur Herkunft eingebettet sein können:

• CSS mit <link rel="stylesheet" href="...">. Aufgrund der entspannten Syntax-Regeln von CSS, erfordert Cross-Origin-CSS eine korrekte Content-Type -Header. Einschränkungen ändern sich je nach Browser: IE, Firefox, Chrome, Safari (nach unten scrollen zu CVE-2010-0051) und Opera.

Blick in die Content-type Kopf- und sicherzustellen, dass sie richtig sind.