web-dev-qa-db-fra.com

But de l'attribut crossorigin ...?

Dans les balises image et script.

D'après ce que j'avais compris, vous pouvez accéder à la fois aux scripts et aux images sur d'autres domaines. Alors, quand utilise-t-on cet attribut?

Est-ce quand vous voulez restreindre la capacité des autres d'accéder à vos scripts et à votre image?

Images:

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

Scripts:

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

htmlcross-domain
73
Smurfette

Les images activées par CORS peuvent être réutilisées dans l'élément sans être corrompues. Les valeurs autorisées sont:

La page répond déjà à votre question.

Si vous avez une image d’origine croisée, vous pouvez la copier dans un canevas, mais cela "ternit" le canevas et vous empêche de le lire (vous ne pouvez donc pas "voler" des images, par exemple, sur un intranet où le site lui-même n’a pas accès). ). Cependant, en utilisant CORS, le serveur sur lequel l'image est stockée peut indiquer au navigateur que l'accès inter-origines est autorisé. Vous pouvez donc accéder aux données de l'image via un canevas.

MDN a également une page sur cette chose: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Est-ce quand vous voulez restreindre la capacité des autres d'accéder à vos scripts et à votre image?

Non.

26
ThiefMaster

La réponse peut être trouvée dans la spécification .

Pour img :

L'attribut crossorigin est un attribut des paramètres CORS . Son but est de permettre aux images de sites tiers autorisant l’utilisation d’un accès cross-Origin avec canvas.

et pour script :

L'attribut crossorigin est un attribut des paramètres CORS . Il contrôle, pour les scripts obtenus d’autres origines , si les informations d’erreur seront exposées.

45
T.J. Crowder

Voici comment nous avons utilisé avec succès crossorigin et l’attribuer dans une balise script:

Problème rencontré: nous essayions de consigner les erreurs js sur le serveur à l'aide de window.onerror

Presque toutes les erreurs que nous étions en train de consigner avaient ce message: Script error. et nous n’avions que très peu d’informations sur la façon de résoudre ces erreurs js.

Il s’avère que l’implémentation native dans chrome pour signaler des erreurs

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

enverra message comme Script error. si l'actif statique demandé enfreint la politique de même origine du navigateur .

Dans notre cas, nous servions l'actif statique à partir d'un cdn.

Notre solution consistait à ajouter l'attribut crossorigin à la balise script.

P.S. Vous avez toutes les informations de cette réponse

32
Omar Rayward

Si vous développez un morceau de code rapide localement et que vous utilisez Chrome, il y a un problème. si votre page se charge en utilisant une URL de la forme "fichier: // xxxx", toute tentative d'utilisation de getImageData () sur le canevas échouera et renverra l'erreur de sécurité cross-Origin, même si votre image est extraite de la même manière. répertoire sur votre machine locale en tant que page HTML rendant le canevas. Donc, si votre page HTML est récupérée, dites:

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

et votre fichier Javascript et vos images sont récupérés, par exemple:

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

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

puis, malgré le fait que ces entités secondaires sont extraites de la même origine, l'erreur de sécurité est toujours générée.

Pour une raison quelconque, au lieu de définir correctement l'origine, Chrome définit l'attribut d'origine des entités requises sur "null", rendant impossible le test du code impliquant getImageData () simplement en ouvrant la page HTML dans votre navigateur et débogage local.

De plus, définir la propriété crossOrigin de l'image sur "anonyme" ne fonctionne pas, pour la même raison.

J'essaie toujours de trouver une solution de contournement pour cela, mais encore une fois, il semble que le débogage local est rendu aussi pénible que possible par les développeurs du navigateur.

Je viens d'essayer de faire fonctionner mon code dans Firefox, et Firefox réussit bien en reconnaissant que mon image provient de la même origine que les scripts HTML et JS. Je souhaiterais donc quelques astuces sur la façon de contourner le problème dans Chrome, car pour le moment, alors que Firefox fonctionne, son débogueur est péniblement lent, au point d’être un pas éloigné d’un déni d'attaque de service.

3
David Edwards

J'ai découvert comment persuader Google Chrome d'autoriser les références fichier: // sans générer d'erreur de type "origine croisée".

Étape 1: Créez un raccourci (Windows) ou l’équivalent dans d’autres systèmes d’exploitation;

Étape 2: Définissez la cible comme suit:

"C:\Fichiers de programme (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Cet argument de ligne de commande spécial, --allow-file-access-from-files, indique à Chrome de vous permettre d'utiliser file: // références à des pages Web, des images, etc., sans renvoyer Lorsque vous essayez de transférer ces images vers un canevas HTML, par exemple, des erreurs se produisent. Cela fonctionne sous Windows 7, mais il est utile de vérifier si cela fonctionnera sous Windows 8/10 et dans diverses distributions Linux également. , problème résolu - le développement hors ligne reprend normalement.

Maintenant, je peux référencer des images et des données JSON à partir d'un fichier: // URI, sans Chrome en générant des erreurs d'origine croisée si je tente de transférer des données d'image sur une toile, ou de transférer des données JSON dans un élément de formulaire. .

1
David Edwards