But de l'attribut crossorigin ...?

dans les balises image et script.

D'après ce que j'ai compris, vous pouvez accéder aux scripts et aux images sur d'autres domaines. Alors quand est-on utiliser cet attribut?

c'Est quand vous voulez restreindre la capacité des autres à accéder à vos scripts et de l'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

47
demandé sur rink.attendant.6 2013-08-20 17:50:22

5 réponses

les images activées par CORS peuvent être réutilisées dans l'élément sans être altérées. 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 une toile mais cela "altère" la toile qui vous empêche de la lire (donc vous ne pouvez pas "voler" des images par exemple d'un intranet où le site lui-même n'a pas accès). Cependant, en utilisant CORS le serveur où l'image est stockée peut indiquer le navigateur que l'accès de cross-origin est autorisé et donc vous pouvez accéder aux données d'image à travers une toile.

MDN a aussi une page à propos de cette chose:https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

c'Est quand vous voulez restreindre la capacité des autres à accéder à vos scripts et de l'image?

Non.

17
répondu ThiefMaster 2013-08-20 13:51:09

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

img:

crossorigin l'attribut est un attribut CORS settings. Son but est de permettre l'utilisation d'images provenant de sites tiers qui permettent l'accès d'origine croisée avec canvas.

et script:

crossorigin l'attribut est un attribut CORS settings. Il les contrôles, pour les scripts qui sont obtenues à partir d'autres origines, si l'information d'erreur sera exposée.

32
répondu T.J. Crowder 2013-08-20 13:53:36

Voici comment nous avons utilisé crossorigin l'attribut dans un script balise:

problème que nous avions: nous essayions d'enregistrer les erreurs js dans le serveur en utilisant window.onerror

presque toutes les erreurs que nous enregistrions avaient ce message:Script error. et nous en étions 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 les erreurs

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

envoyer message comme Script error. si le bien statique demandé viole le Politique de même origine.

dans notre cas, nous servions l'actif statique d'un cdn.

La façon dont nous avons résolu c'était d'ajouter crossorigin l'attribut script balise.

P. S. Eu toutes les infos cette réponse

22
répondu Omar Rayward 2017-05-23 12:10:04

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 à L'aide d'une URL du formulaire "file://xxxx", alors essayer d'utiliser getImageData() sur la toile échouera, et lancera l'erreur de sécurité cross-origin, même si votre image est récupérée à partir du même répertoire sur votre machine locale que la page HTML rendant la toile. Donc, si votre page HTML est récupérée à partir de, dire:

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

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

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

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

alors malgré le fait que ces entités secondaires sont récupérées de la même origine, l'erreur de sécurité est toujours lancée.

pour une raison quelconque, au lieu de régler l'origine correctement, Chrome règle l'origine attribuez les entités requises à "null", ce qui rend impossible de tester le code impliquant getImageData() simplement en ouvrant la page HTML dans votre navigateur et en déboguant localement.

aussi, mettre la propriété crossOrigin de l'image à "anonymous" ne fonctionne pas, pour la même raison.

j'essaie toujours de trouver une solution, mais encore une fois, il semble que le débogage local soit rendu aussi douloureux que possible par les implémenteurs de navigateur.

je J'ai essayé D'exécuter mon code dans Firefox, et Firefox l'obtient correctement, en reconnaissant que mon image est de la même origine que les scripts HTML et JS. J'aimerais donc avoir quelques conseils sur la façon de contourner le problème dans Chrome, car pour le moment, alors que Firefox fonctionne, c'est le débogueur qui est douloureusement lent, au point d'être retiré d'une attaque par déni de service.

2
répondu David Edwards 2016-11-19 15:42:38

J'ai trouvé comment persuader Google Chrome d'autoriser les références de fichier:// sans lancer une erreur de cross-origin.

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

Étape 2: Définir la cible de la manière suivante:

"C:\Program fichiers (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-de-fichiers

cet argument de ligne de commande spéciale, -- allow-file-access - from-files, dit Chrome pour vous permettre d'utiliser le fichier: / / références aux pages web, images, etc., sans lancer d'erreurs de cross-origin chaque fois que vous essayez de transférer ces images sur une toile HTML, par exemple. Cela fonctionne sur ma configuration Windows 7, mais cela vaut la peine de vérifier pour voir si cela fonctionnera sur Windows 8/10 et sur diverses distributions Linux aussi. Si c'est le cas, Problème résolu - le développement hors ligne reprend son cours normal.

maintenant je peux référencer les images et les données JSON à partir du fichier: / / URIs, sans Chrome lancer des erreurs d'origine croisée si J'essaie de transférer des données d'image à une toile, ou de transférer des données JSON à un élément de forme.

0
répondu David Edwards 2017-08-01 06:13:10