Zweck des Crossorigin-Attributs…?

Sowohl in Bild- als auch in Skript-Tags.

Mein Verständnis war, dass Sie auf Skripte und Bilder in anderen Domänen zugreifen können. Wann verwendet man dieses Attribut?

Ist dies der Fall, wenn Sie die Möglichkeit anderer Personen einschränken möchten, auf Ihre Skripte und Bilder zuzugreifen?

Bilder:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

Skripte:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

CORS-fähige Bilder können im Element wiederverwendet werden, ohne dass sie beschädigt werden. Die zulässigen Werte sind:

Die Seite beantwortet bereits Ihre Frage.

Wenn Sie ein originalübergreifendes Bild haben, können Sie es auf eine Leinwand kopieren, dies "verschmutzt" jedoch die Leinwand, wodurch Sie es nicht lesen können (Sie können also keine Bilder "stehlen", z. B. aus einem Intranet, auf das die Site selbst keinen Zugriff hat ). Durch die Verwendung von CORS kann der Server, auf dem das Bild gespeichert ist, dem Browser jedoch mitteilen, dass ein Cross-Origin-Zugriff zulässig ist, und Sie können daher über eine Zeichenfläche auf die Bilddaten zugreifen.

MDN hat auch eine Seite über genau diese Sache: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Ist dies der Fall, wenn Sie die Möglichkeit anderer Personen einschränken möchten, auf Ihre Skripte und Bilder zuzugreifen?

Nein.

Die Antwort finden Sie in der Spezifikation .

Für img:

Das crossoriginAttribut ist ein CORS-Einstellungsattribut . Der Zweck besteht darin, die Verwendung von Bildern von Websites von Drittanbietern zu ermöglichen, mit denen der Cross-Origin-Zugriff verwendet werden kann canvas.

und für script:

Das crossoriginAttribut ist ein CORS-Einstellungsattribut . Es steuert für Skripte, die aus anderen Quellen stammen , ob Fehlerinformationen angezeigt werden.

So haben wir das crossoriginAttribut erfolgreich in einem scriptTag verwendet:

Problem, das wir hatten: Wir haben versucht, js-Fehler auf dem Server mit zu protokollieren window.onerror

Fast alle Fehler, die wir protokollierten, hatten diese Meldung: Script error.und wir erhielten nur sehr wenige Informationen darüber, wie diese js-Fehler behoben werden können.

Es stellt sich heraus, dass die native Implementierung in Chrome Fehler meldet

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

wird gesendet, messageals Script error.ob das angeforderte statische Asset gegen die Richtlinie des Browsers mit demselben Ursprung verstößt .

In unserem Fall haben wir das statische Asset von einer CDN aus bedient.

Die Art und Weise, wie wir es gelöst haben, war das Hinzufügen des crossoriginAttributs zum scriptTag.

PS Habe alle Infos von dieser Antwort

Wenn Sie lokal einen schnellen Code entwickeln und Chrome verwenden, liegt ein Problem vor. Wenn Ihre Seite unter Verwendung einer URL der Form "file: // xxxx" geladen wird, schlägt der Versuch, getImageData () auf der Zeichenfläche zu verwenden, fehl und löst den originalen Sicherheitsfehler aus, selbst wenn Ihr Bild von derselben abgerufen wird Verzeichnis auf Ihrem lokalen Computer als HTML-Seite, die die Zeichenfläche rendert. Wenn Ihre HTML-Seite abgerufen wird, sagen Sie:

file: // D: /wwwroot/mydir/mytestpage.html

und Ihre Javascript-Datei und Bilder werden abgerufen von beispielsweise:

file: // D: /wwwroot/mydir/mycode.js

file: // D: /wwwroot/mydir/myImage.png

Trotz der Tatsache, dass diese sekundären Entitäten vom selben Ursprung abgerufen werden, wird der Sicherheitsfehler immer noch ausgelöst.

Aus irgendeinem Grund setzt Chrome das Ursprungsattribut der erforderlichen Entitäten auf "null", anstatt den Ursprung richtig festzulegen. Dadurch ist es unmöglich, Code mit getImageData () zu testen, indem Sie einfach die HTML-Seite in Ihrem Browser öffnen und lokal debuggen.

Aus demselben Grund funktioniert es auch nicht, die Eigenschaft crossOrigin des Bildes auf "anonym" zu setzen.

Ich versuche immer noch, eine Problemumgehung dafür zu finden, aber es scheint wieder einmal, dass das lokale Debuggen von Browser-Implementierern so schmerzhaft wie möglich gemacht wird.

Ich habe gerade versucht, meinen Code in Firefox auszuführen, und Firefox macht es richtig, indem es erkennt, dass mein Bild vom selben Ursprung stammt wie die HTML- und JS-Skripte. Daher würde ich einige Hinweise begrüßen, wie Sie das Problem in Chrome umgehen können, da der Debugger im Moment, während Firefox funktioniert, schmerzlich langsam ist und einen Schritt von einem Denial-of-Service-Angriff entfernt ist.

Ich habe herausgefunden, wie Sie Google Chrome davon überzeugen können, file: // Verweise zuzulassen, ohne einen Ursprungsfehler auszulösen.

Schritt 1: Erstellen Sie eine Verknüpfung (Windows) oder eine gleichwertige Verknüpfung in anderen Betriebssystemen.

Schritt 2: Stellen Sie das Ziel auf Folgendes ein:

"C: \ Programme (x86) \ Google \ Chrome \ Application \ chrome.exe" - Erlaubt den Dateizugriff aus Dateien

Dieses spezielle Befehlszeilenargument --allow-file-access-from-files - weist Chrome an, file: // Verweise auf Webseiten, Bilder usw. zu verwenden, ohne bei jedem Versuch, diese zu übertragen, Fehler zwischen den Ursprüngen auszulösen Zum Beispiel Bilder auf eine HTML-Leinwand. Es funktioniert unter meinem Windows 7-Setup, aber es lohnt sich zu prüfen, ob es auch unter Windows 8/10 und verschiedenen Linux-Distributionen funktioniert. Wenn dies der Fall ist, ist das Problem behoben. Die Offline-Entwicklung wird wie gewohnt fortgesetzt.

Jetzt kann ich Bilder und JSON-Daten aus Datei: // URIs referenzieren, ohne dass Chrome Ursprungsfehler auslöst, wenn ich versuche, Bilddaten auf eine Zeichenfläche oder JSON-Daten auf ein Formularelement zu übertragen.