Wstrzykiwanie skryptów treści i żądanie uprawnień z różnych źródeł.

Question

Jestem ciekawy, czy następujący scenariusz to błąd w przeglądarce Chrome, działa zgodnie z oczekiwaniami lub błąd programisty.

Mam więc rozszerzenie. W swojej manifest.json zażądać uprawnień krzyż pochodzenia dla dwóch stron:

"permissions": [ 
    "http://www.foo.com/*", 
    "http://www.bar.com/*" 
] 

Oświadczam również skrypt treści:

"content_scripts": [ 
    { 
     "matches": ["http://www.foo.com/*"], 
     "js": ["injectedScript.js"] 
    } 
] 

Więc, ja wskazano, że chciałbym, aby wprowadzić „injectedScript .js "do wszystkich domen foo.com. "injectedScript.js" wygląda tak:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere. 
xhr.open("GET", 'http://www.bar.com/123'), true); 
xhr.send(); 

Teraz element iframe jest dodawany do mojej strony rozszerzenia Chrome. Wygląda to tak:

<iframe src="http://www.foo.com/123"></iframe> 

Src tej ramki pasuje do wzorca skryptu treści. W związku z tym, gdy ramka się ładuje, wstrzykuje się do niej skrypt JavaScript.js. Ale XMLHttpRequest wewnątrz injectedScript kończy się niepowodzeniem.

Teraz to mnie zastanawia, jakie jest oczekiwane zachowanie. Forsowanie problemów z CORS jest frustrujące, gdy poprosiłem o odpowiednie uprawnienia ... ale mogę też zrozumieć, że próbuję uzyskać dostęp do "http://www.bar.com/123" z pochodzenia spoza mojego rozszerzenia chrome ... mimo że element iframe jest ładowany do rozszerzenia do których mam pozwolenie na dostęp.

Jakieś przemyślenia od kogoś w tej sprawie?

EDIT: Jeśli zastanawiasz się, co mogę trafiać na z praktycznego punktu widzenia - Chciałbym wstrzyknąć jakiś skrypt, który można nazwać getImageData na filmie w wtryskiwanego stronie. Jednak nie mogę, ponieważ getImageData uważa, że ​​src wideo jest zanieczyszczone danymi. Zażądałem odpowiednich uprawnień, ale nie spływają one do elementu iframe.

UPDATE: Oto zdjęcie: http://i.imgur.com/PR48HO2.png

Answer 1

The Same-Origin Policy jest realizowany w celu zapobiegania atakom JavaScript (można przeczytać więcej o tej here) i jest ważnym elementem modelu zabezpieczeń internetowych. Niestety nie można bezpośrednio użyć żądania HTTP w skrypcie treści.

Jeśli jednak zdarzy się, że dostęp do pliku, który chcesz, aby umożliwić dostęp do można dodać następujący kod PHP, aby umożliwić Cross-Origin:

header('Access-Control-Allow-Origin: *'); 

Ten kod zasadniczo pozwala każdej strony/adres IP użyć Cross-Origin na poniższym pliku.

Jeśli nie masz dostępu do pliku, możesz zamiast tego zastosować obejście, zamiast próbować uzyskać HTML bezpośrednio, wywołaj skrypt PHP na osobistym serwerze, który go pobierze, który ma włączoną opcję Cross-Origin używając powyższego kodu.

Oto przykład:

header('Access-Control-Allow-Origin: *'); 

$URL = ("http://www.bar.com/123"); 

$HTMLfromURL = file_get_contents($URL); 

echo $HTMLfromURL 

I wtedy po stronie Chrome Extension mają:

Uwaga: XMLHttpRequest używasz jest przestarzała i powoduje znaczący wpływ wydajności po stronie użytkownika . Poniższy kod jest wersją asynchroniczną tego samego, która nie ma negatywnego wpływu na wydajność.

var URL = "http://example.com/myscript.php"; 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", URL, true); 
xhr.onload = function (e) { 
if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
     var HTMLfromURL = xhr.responseText; 
} else { 
      // Received unexpected HTML error code (such as 404, or 403) 
      console.error(xhr.statusText); 
     } 
     } 
    }; 
xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
    // Run this code if failed to load page 
}; 
xhr.send(null);