To możliwe! Przeczytaj poniżej.

Po pierwsze, pozwól mi użyć tego diagramu, aby wyjaśnić, w jaki sposób można uzyskać asynchroniczne przesyłanie plików :

Przepraszam. Wyłączyłem jedną z moich domen i obraz zniknął. To był naprawdę ładny obraz. To było zanim dowiedziałem się, że przepełnienie stosu umożliwia przesyłanie obrazów przez Imgur.

Jak widzisz, sztuczka polega na tym, aby pozwolić odpowiedzi HTTP załadować ukryty element IFRAME zamiast samej strony. (Odbywa się to poprzez ustawienie właściwości target elementu formularza podczas przesyłania formularza za pomocą JavaScript.)

Jednak w tym przypadku odpowiedź jest skierowana w stronę elementu IFRAME. A gdy odpowiedź XML trafi do IFRAME, jej URL będzie skryptem Usuń-np. http://remote-domain.com/script.pl.

Niestety, CORS nie obejmuje tego przypadku (przynajmniej tak mi się wydaje) - nie jestem w stanie odczytać zawartości IFRAME, ponieważ jego adres URL nie pasuje do adresu URL strony (Inna domena). I get this error:

Unsafe JavaScript attempt to ramka dostępu z adresem URL hxxp://remote-domain.com/script.pl from frame with URL hxxp://my-domain.com/outer.html. domeny, protokoły i porty muszą mecz.

A ponieważ zawartość ramki IFRAME jest dokumentem XML, nie ma kodu JavaScript wewnątrz ramki IFRAME, który mógłby użyć postMessage lub czegoś takiego.

Więc moje pytanie brzmi: Jak mogę pobrać zawartość XML z IFRAME?

Jak powiedziałem powyżej, jestem w stanie pobrać odpowiedzi HTTP między domenami bezpośrednio (CORS włączone), ale wydaje się, że nie jestem w stanie odczytać odpowiedzi HTTP między domenami po załadowaniu do IFRAME.

I jakby to pytanie nie było wystarczająco nierozwiązywalne, pozwól mi wykluczyć te rozwiązania:

1. EasyXDM i podobne techniki, które wymagają punktu końcowego na odległej domenie,

2. Zmiana odpowiedzi XML (w celu włączenia elementu skryptu),

3. Proxy po stronie serwera-rozumiem, że mogę mieć skrypt po stronie serwera na mojej domenie, który może służyć jako proxy.

Więc, poza tymi dwoma rozwiązaniami, czy można to zrobić?

Okazuje się, że możliwe jest sfałszowanie XHR-request (Ajax-request), które naśladuje formularz submit (który jest używany na powyższym obrazku do przesłania pliku na serwer).

Sztuką jest użycie FormData konstruktora-przeczytaj Ten artykuł Mozilla Hacks aby dowiedzieć się więcej informacje.

Tak to się robi:

// STEP 1
// retrieve a reference to the file
// <input type="file"> elements have a "files" property
var file = input.files[0];

// STEP 2
// create a FormData instance, and append the file to it
var fd = new FormData();
fd.append('file', file);

// STEP 3 
// send the FormData instance with the XHR object
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://remote-domain.com/script.pl', true);
xhr.onreadystatechange = responseHandler;
xhr.send(fd);

Powyższa metoda wykonuje asynchroniczny plik-uplaod, który jest odpowiednikiem zwykłego pliku-upload opisanego na powyższym obrazku i uzyskanego przez przesłanie tego formularza:

<form action="http://remote-domain.com/script.pl" 
        enctype="multipart/form-data" method="post">
    <input type="file" name="file">
</form>

Jak szef :)