comment puis-je accéder à iframe.contentDocument pour obtenir de réponse à l'issue de la croix-origine de la demande?

Je suis avec succès l'envoi d'un fichier à partir de localhost:8888 à localhost:8080 (autre domaine de la production), mais je ne peux pas lire la réponse HTTP, après le transfert de finitions.

Uncaught SecurityError: impossible de lire le 'contentDocument la propriété
à partir de 'HTMLIFrameElement': Bloqué un cadre avec l'origine
"http://localhost:8888" d'accéder à un cadre d'origine
"http://localhost:8080". Le cadre de la demande d'accès défini
"le document.domaine" de "localhost", mais l'image en cours d'accès n'
pas. Les deux doivent définir "document.domaine" à la même valeur pour permettre
d'accès.

À envoyer le fichier, pour la prise en charge de compatibilité, je vais essayer d'obtenir que cela fonctionne pour <form> en fonction de téléchargement de fichiers; pas XHR base. C'est le HTML de base structure:

<form target="file-iframe" enctype="multipart/form-data" method="POST" action="invalid">
  <input type="file" id="file-input" class="file-input" title="select files">
</form>
<iframe src="javascript:false;" id="file-iframe" name="file-iframe"></iframe>

Pour insérer le <iframe> élément dans le DOM, je ne les suivants:

document.domain = document.domain;
var domainHack = 'javascript:document.write("<script type=text/javascript>document.domain=document.domain;</script>")';

var html = '<iframe id="file-iframe" name="file-iframe"></iframe>';
var parent = document.getElementById('wrapper');
var iframe = UTILS.createDomElement(html, parent);
iframe.src = domainHack;

UTILS.attachEvent(iframe, 'load', function(e) {

  //this throws the above SecurityError
  var doc = iframe.contentDocument || iframe.contentWindow.document;

  //do other stuff...
});

Avant de m'envoyer le formulaire, j'ai mis le action attribut sur la <form> d'être la cible de la croix-URL de domaine:

action="http://localhost:8080/"

Après la présentation de la <form>, le <iframe>'s load événement est déclenché, et j'essaie d'accéder à la <iframe>'s content pour lire la réponse HTTP. Cependant, cela déclenche l'erreur ci-dessus car il s'agit d'un cross-origin demande, et je n'ai pas accès à la <iframe>'s de contenu.

Je pensais que le document.domain hack, mais le message d'erreur me dit que le iframe n'a pas défini le domaine de localhost, même si j'ai mis le iframe's src attribut à la domainHack variable, qui semble exécuter.

Aucune idée de ce que je fais de mal? Comment puis-je définir document.domain être localhost pour le <iframe> et sa mère (qui est la page en cours).

J'ai lu plusieurs StackOverflow de questions, dont certaines MDN articles, et d'autres aléatoires, les résultats sur Google, mais je n'ai pas été en mesure d'obtenir que cela fonctionne. Quelques trucs que j'ai regardé à travers déjà:

Avez-vous essayé postMessage qui est mentionné dans votre premier lien "des Moyens pour contourner la même origine "politique"?
Vérifier ce lien, j'ai écrit un blog pour ce genre de problème crossdomainjavascript.wordpress.com/author/sandeeproop
oui, j'ai essayé postMessage(). la messagerie fonctionne, mais le problème est que j'ai besoin le contenu de l'iframe, je n'en ai pas accès depuis l' contentWindow génère l'erreur.... donc postMessage() est inutile, sauf si je peux obtenir le contenu de l'iframe
J'essaie de trouver une solution à exactement le même problème
Eh bien, nous pourrions suivre tous les mauvais sens. var doc = iframe.contentDocument || iframe.contentWindow.document; C'est la façon dont il est conçu pour être. PostMessage doit arrivé de l'iframe. Selon un ami pour faire ce travail, nous avons pour envoyer le html à partir du serveur (pas de json), avec une fonction qui permettra d'évaluer sur le client et faire la vraie postMessage.

OriginalL'auteur Hristo | 2015-02-23

Après de creuser autour pour essayer de le comprendre, je suis finalement tombé sur une solution qui semble fonctionner pour moi. Cependant, il n'est pas une réponse exacte à ma question.

En résumé, je suis en train de travailler sur le soutien <form> en fonction de téléchargement de fichiers. Pour les navigateurs qui ne supportent pas l'upload de fichier via XHR, nous devons recourir à la traditionnelle <form> la soumission, à l'aide d'un caché <iframe> pour éviter de rafraichissement de la page. Le formulaire redirige le rechargement d'action dans le caché <iframe>, et puis la réponse HTTP est écrit dans le corps de la <iframe> après que le fichier a été transféré.

En raison de la de même la politique de l'origine, et donc la raison pour laquelle je pose cette question, je n'ai pas accès à la <iframe>'s de contenu. La même la politique de l'origine pour <iframe>s restreint la façon dont un document ou d'un script chargé à partir d'une origine, d'interagir avec une ressource à partir d'une autre origine. Puisque nous ne pouvons pas obtenir l'accès à la <iframe>'s document, qui est l'endroit où le chargement du fichier de réponse HTTP est écrit, le serveur renvoie une réponse de redirection dans lequel le serveur va ajouter le téléchargement de réponse JSON. Lorsque le <iframe> des charges, la JS sera d'analyser la réponse JSON, et de l'écrire à la <iframe>'corps. Enfin, depuis la redirection était de la même origine, nous pouvons accéder à la <iframe>'s contenu 🙂

Un grand merci à le Fichier jQuery Uploader; ils ont fait tout le travail dur 😉

https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads

La Mise En Place...

function setupForm() {

  //form is declared outside of this scope
  form = document.createElement('form');
  form.setAttribute('id', 'upload-form');
  form.setAttribute('target', 'target-iframe');
  form.setAttribute('enctype', 'multipart/form-data');
  form.setAttribute('method', 'POST');

  //set the 'action' attribute before submitting the form
  form.setAttribute('action', 'invalid');
};

function setupIframe() {

  //iframe is declared outside of this scope
  iframe = document.createElement('iframe');

  /*
   * iframe needs to have the 'name' attribute set so that some versions of
   * IE and Firefox 3.6 don't open a new window/tab 
   */
  iframe.id = 'target-iframe';
  iframe.name = 'target-iframe';

  /*
   * "javascript:false" as initial iframe src to prevent warning popups on
   * HTTPS in IE6
   */
  iframe.src = 'javascript:false;';
  iframe.style.display = 'none';

  $(iframe).bind('load', function() {
    $(iframe)
      .unbind('load')
      .bind('load', function() {
        try {

          /*
           * the HTTP response will have been written to the body of the iframe.
           * we're assuming the server appended the response JSON to the URL,
           * and did the redirect correctly
           */
          var content = $(iframe).contents().find("body").html();
          response = $.parseJSON(content);

          if (!response) {
            //handle error
            return;
          }

          uploadFile(...); //upload the next file
        }
        catch (e) {
          //handle error
        }
      });
  });

  /*
   * insert the iframe as a sibling to the form. I don't think it really
   * matters where the iframe is on the page
   */
  $(form).after(iframe);
};

HTML - de la page redirection

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript">
      //grabs the JSON from the end of the URL
      document.body.innerHTML = decodeURIComponent(window.location.search.slice(1));
    </script>
  </body>
</html>

La seule chose qui reste à faire est de définir la action attribut sur la <form> à la croix-URL de domaine que nous allons envoyer le télécharger à:

form.setAttribute('action', 'http://sub.example.com:8080/upload?id=ab123');
form.submit();

Pendant ce temps, sur le serveur...

//send redirect to the iframe redirect page, where the above HTML lives
//generates URL: http://example.com/hack?%7B%22error%22%3Afalse%2C%22status%22%3A%22success%22%7D
response.sendRedirect("http://example.com/hack?{\"error\":false,\"status\":\"success\"}");

Je sais que c'est un énorme hack pour contourner la même politique d'origine avec <iframe>s, mais il semble que ça fonctionne, et je pense qu'il est assez bon avec de la compatibilité inter-navigateur. Je ne l'ai pas testé dans tous les navigateurs, mais je vais me résoudre à le faire, et après une mise à jour.

OriginalL'auteur Hristo

Bien, je suis venu à la solution aussi. C'est un peu codé en dur atm, mais tout a l'air soigné.

J'ai d'abord fait un fichier html sur le serveur. (Je vais le modifier pour ejs modèle plus tard, qui comprend mes données).

<!DOCTYPE html>
<html>
<title>Page Title</title>
<script>
    function myFunction() {
        parent.postMessage('Some message!!!', 'http://192.168.0.105:3001'); //hard coded, will change this later
    }

    window.onload=myFunction;
</script>
<body>
</body>
</html>

Partie importante ici est l'utilisation de parent.

Que de mon nœud de serveur, je suis en téléchargeant le fichier et l'envoi au client le fichier html:

res.sendFile('file.html');

Sur le client, j'ai le même code html comme vous.

'<form id="{id}_form" action="http://192.168.0.105:3011/private/profile_picture/upload" enctype="multipart/form-data" method="post" target="{id}_uploadframe">',
'<span id="{id}_wrapper" class="file-wrapper">',
    '<input id="{id}_real" type="file" accept="image/*" name="photo" />',
    '<span class="button">{0}</span>',
'</span>',
'</form>',
'<iframe id="{id}_uploadframe" name="{id}_uploadframe" class="mc-hidden"></iframe>',

Ce modèle je affichés sur la page. J'ai ajouté le Gestionnaire d'événement suivant aussi

window.addEventListener('message',function(event) {
    //if(event.origin !== cross_domain) return;
    console.log('message received:  ' + event.data,event);
},false);

Comme vous le savez, la méthode addEventListener ne fonctionne pas sur tous les navigateurs. Et cette solution ne fonctionne pas sur IE8 < 8, qui ne prend pas en charge postMessage. J'espère que cela est hapefull vous

OriginalL'auteur user732456

Vous devez vous connecter pour publier un commentaire.