Injizieren von Inhaltsskripts und Anfordern von ursprungsübergreifenden Berechtigungen

Question

Ich bin neugierig, ob das folgende Szenario ein Fehler in Chrome ist, der wie erwartet funktioniert, oder Entwicklerfehler.

Also, ich habe eine Erweiterung. In seinem manifest.json ich für zwei Standorte Cross-Origin-Berechtigungen anfordern:

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

Ich erkläre auch einen Content-Skript:

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

Also habe ich darauf hingewiesen, dass ich mag „injectedScript injizieren .js "in alle foo.com-Domains. "injectedScript.js" sieht ungefähr so ​​aus:

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

Jetzt wird ein Iframe zur Seite meiner Chrome-Erweiterung hinzugefügt. Es sieht so aus:

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

Der src dieses Frames entspricht meinem Inhaltsskriptmuster. Wenn also der Rahmen geladen wird, wird injectedScript.js in ihn injiziert. Aber die XMLHttpRequest innerhalb injectedScript schlägt fehl.

Jetzt fragt mich, was erwartetes Verhalten ist. Es ist frustrierend, auf CORS-Probleme zu stoßen, wenn ich die entsprechenden Berechtigungen angefordert habe ... aber ich verstehe auch, dass ich versuche, von einem Ursprung außerhalb meiner Chrome-Erweiterung auf "http://www.bar.com/123" zuzugreifen ... obwohl ein Iframe in die Erweiterung geladen wurde auf die ich Zugriff habe.

Irgendwelche Gedanken von jemandem in der Sache?

EDIT: Wenn Sie sich wundern, was ich aus einem praktischen Standpunkt bekommen könnte - Ich möchte ein wenig Javascript injizieren, getImageData auf einem Video in der injizierten Seite aufrufen können. Das kann ich jedoch nicht, da getImageData denkt, dass die src des Videos verdorbene Daten sind. Ich habe die entsprechenden Berechtigungen angefordert, aber nicht in den Iframe.

UPDATE: Hier ist ein Bild: http://i.imgur.com/PR48HO2.png

Answer 1

Die Same Origin Policy implementiert bösartige JavaScript-Angriffe zu verhindern (Sie mehr über das here lesen kann) und ist ein wichtiger Teil des Web-Sicherheitsmodell. Leider können Sie eine HTTP-Anfrage nicht direkt in einem Inhaltsskript verwenden.

jedoch Wenn Sie den Zugriff auf die Datei haben passieren Sie den Zugriff auf Sie zulassen möchten, können Sie den folgenden PHP-Code hinzufügen Cross-Origin zu ermöglichen:

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

Dieser Code ermöglicht es im Grunde jede Website/IP-Adresse Verwenden von Cross-Origin in der folgenden Datei

Wenn Sie keinen Zugriff auf die Datei haben, können Sie einen Workaround durchführen, z. B. anstatt direkt den HTML-Code zu erhalten, rufen Sie ein PHP-Skript auf einem persönlichen Server auf, der Cross-Origin aktiviert Verwenden Sie den obigen Code.

Hier ist ein Beispiel:

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

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

$HTMLfromURL = file_get_contents($URL); 

echo $HTMLfromURL 

Und dann auf der Chrome-Erweiterung Seite haben:

Hinweis: Die XMLHTTPRequest Sie verwenden ist veraltet und verursacht erhebliche Auswirkungen auf die Leistung auf der Benutzerseite . Der folgende Code ist eine asynchrone Version der gleichen Sache, die nicht die negativen Auswirkungen auf die Leistung hat.

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);