Comment fonctionne l’en-tête Access-Control-Allow-Origin ?

Question

Apparemment, j'ai complètement mal compris sa sémantique. J'ai pensé à quelque chose comme ceci:

1. Un client télécharge le code javascript MyCode.js à partir de http://siteA - l'origine.
2. L'en-tête de réponse de MyCode.js contient Access-Control-Allow-Origin: http://siteB, ce qui signifiait que je pensais MyCode.js été autorisé à faire de la croix-origine renvois vers le site B.
3. Le client déclenche certaines fonctionnalités de MyCode.js qui, à son tour faire des demandes de http://siteB qui doit être fine, en dépit de la croix-de l'origine des demandes.

Eh bien, je suis dans l'erreur. Il ne fonctionne pas comme ça à tout. Donc, j'ai lu http://en.wikipedia.org/wiki/Cross-origin_resource_sharing et a tenté de lire http://www.w3.org/TR/cors/.

Une chose est sûr - je ne comprends toujours pas comment suis-je censé utiliser cet en-tête.

J'ai le plein contrôle de fois le site A et le site b. Comment puis-je activer le javascript code téléchargé à partir du site Un accès à des ressources sur le site B à l'aide de cet en-tête?

P. S.

Je ne veux pas utiliser JSONP.

Answer 1

Access-Control-Allow-Origin est un CORS (Cross-Origin Resource sharing) de la tête.

Lorsqu'Un Site tente d'extraire le contenu du Site B, le Site B peut envoyer un Access-Control-Allow-Origin - tête de réponse de dire au navigateur que le contenu de cette page est accessible à certaines origines. (L' origine est un domaine, en plus d'un régime et le numéro de port.) Par défaut, le Site B de pages sont pas accessibles à toute autre origine; à l'aide de l' Access-Control-Allow-Origin - tête ouvre une porte pour la croix-origine de l'accès par spécifiques demandant des origines.

Pour chaque ressource/page Site B veut rendre accessible à Un Site, le Site B, doit servir de ses pages avec l'en-tête de réponse:

Access-Control-Allow-Origin: http://siteA.com

Les navigateurs modernes ne va pas bloquer les demandes inter-domaine d'emblée. Si Un Site demande une page du Site B, le navigateur va effectivement chercher la page demandée au niveau du réseau et de vérifier si les en-têtes de réponse liste de Site Un en tant que demandeur de permis de domaine. Si le Site B n'a pas indiqué que le Site A est autorisé à accéder à cette page, le navigateur va déclencher l' XMLHttpRequests' error d'événements et de refuser les données de réponse à la demande de code JavaScript.

Non simple demande

Ce qui se passe au niveau du réseau peut être légèrement plus complexe qu'expliqué ci-dessus. Si la demande est une "non-simple" requête, le navigateur envoie d'abord des données moins "contrôle en amont" des OPTIONS de demande, pour vérifier que le serveur accepte la demande. Une demande est non simple lorsque l'un ou l'autre (ou les deux):

• à l'aide d'un verbe HTTP autres que GET ou POST (par exemple, PUT, DELETE)
• à l'aide de non-simple-têtes de la requête; le simple demande les en-têtes sont:
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (ce n'est simple lorsque sa valeur est application/x-www-form-urlencoded, multipart/form-dataou text/plain)

Si le serveur répond aux OPTIONS de contrôle en amont avec appropriée en-têtes de réponse (Access-Control-Allow-Headers pour les non-têtes simples, Access-Control-Allow-Methods pour les non-simple des verbes) qui correspondent à la non-verbe simple et/ou non-des en-têtes simples, puis le navigateur envoie la demande réelle.

En supposant que le Site A veut envoyer une demande d' /somePage, avec une non-simple Content-Type de la valeur de application/json, le navigateur d'abord envoyer une demande de contrôle en amont:

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Notez que Access-Control-Request-Method and Access-Control-Request-Headers sont ajoutés par le navigateur automatiquement; vous n'avez pas besoin de les ajouter. Cette option contrôle en amont obtient le succès des en-têtes de réponse:

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Lors de l'envoi de la demande réelle (après contrôle en amont est fait), le comportement est identique à la façon dont une simple demande est traitée. En d'autres termes, un non-simple demande dont elle est réussie, est traité de la même façon comme une simple demande (c'est à dire, le serveur doit toujours envoyer Access-Control-Allow-Origin encore pour la réponse réelle).

Le navigateur envoie la demande réelle:

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

Et le serveur renvoie un Access-Control-Allow-Origin, tout comme il le ferait pour une simple demande à:

Access-Control-Allow-Origin: http://siteA.com

Voir la Compréhension XMLHttpRequest au cours de la SCRO pour un peu plus d'informations à propos de la non-simple demande.

Answer 2

La croix-Origine de la Demande de Partage de la SCRO (A. K. A. de la Croix-Domaine requête AJAX) est un problème que la plupart des développeurs web peuvent rencontrer, selon la Même Origine Politique, les navigateurs restreindre client JavaScript dans un sandbox de sécurité, généralement JS ne peut pas communiquer directement avec un serveur distant à partir d'un domaine différent. Dans le passé, les développeurs ont créé plusieurs manières délicates à réaliser inter-Domaine de la demande de ressource, le plus souvent à l'aide de moyens sont:

1. Utiliser Flash/Silverlight ou côté serveur comme un "proxy" pour communiquer avec la télécommande.
2. JSON Avec un Rembourrage (JSONP).
3. Intègre serveur distant dans un iframe et de communiquer au travers du fragment ou de la fenêtre.nom, reportez-vous ici.

Ces manières délicates ont plus ou moins certaines questions, par exemple JSONP pourrait résulter en un trou de sécurité si les développeurs simplement "eval", et n ° 3 ci-dessus, bien que cela fonctionne, les deux domaines doivent construire stricte contrat entre les uns des autres, ni souple, ni élégant à mon humble avis:)

Le W3C avait introduit Cross-Origin Resource sharing (SCRO) comme une solution standard pour fournir un coffre-fort, souple et d'une norme recommandée façon de résoudre ce problème.

Le Mécanisme

À partir d'un haut niveau, nous pouvons simplement juger de la SCRO est un contrat entre le client appel AJAX à partir d'Un domaine et d'une page hébergée sur le domaine B, une ferme typique de la Croix-Origine de requête/réponse serait:

DomainA-têtes de la requête AJAX

Host DomainB.com
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json
Accept-Language en-us;
Accept-Encoding gzip, deflate
Keep-Alive 115
Origin http://DomainA.com 

DomainB en-têtes de réponse

Cache-Control private
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin DomainA.com
Content-Length 87
Proxy-Connection Keep-Alive
Connection Keep-Alive

Les parties bleues que j'ai marqué ci-dessus ont été le kernel faits, "Origine" en-tête de requête "indique l'endroit où la croix-origine de la demande ou de contrôle en amont la demande provient de", le "Access-Control-Allow-Origin" en-tête de réponse indique cette page permet à distance de la demande de DomainA (si la valeur est * permet d'indiquer les demandes à distance à partir de n'importe quel domaine).

Comme je l'ai mentionné ci-dessus, W3 navigateur recommandé de réaliser uncontrôle en amont de la demande" avant de soumettre la réalité de la Croix-Origine de la requête HTTP, en un mot c'est un HTTP "OPTIONS", à la demande:

OPTIONS DomainB.com/foo.aspx HTTP/1.1

Si foo.aspx prend en charge les OPTIONS HTTP verbe, il risque de retourner la réponse, comme ci-dessous:

HTTP/1.1 200 OK
Date: Wed, 01 Mar 2011 15:38:19 GMT
Access-Control-Allow-Origin: http://DomainA.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Type: application/json

Seulement si la réponse contient "Access-Control-Allow-Origin" ET sa valeur est "*" ou contiennent le domaine qui a présenté la SCRO demande, par la satisfaction de ce mandtory condition navigateur de soumettre la demande de domaines et de mettre en cache le résultat en "contrôle en amont-Résultat-Cache".

J'ai blogué à propos de la SCRO il y a trois ans: http://wayneye.com/Blog/Ajax-Cross-Origin-HTTP-request