XMLHttpRequest interdomaines à l'aide de pages d'arrière-plan

Dans mon extension Chrome, je veux avoir mon options.html page de communiquer avec quelque chose comme OpenId de Google API. Pour ce faire, en toute transparence, j'ai caché iframe sur les options de la page qui apparaîtra dans les Comptes Google, la page de connexion (à la suite de l'OpenId interaction séquence, etc.).

Mon problème est que je ne peux pas communiquer à partir de la page options de l' iframe (l'origine de la iframe est quelque chose que je contrôle, mais pas le même que mon extension chrome) via window.postMessage. Je me demandais si il ya une solution rapide à ce problème.

Si il n'y en a pas, je vais faire options.html contenir un iframe que les maisons de la mise en page et la logique de la page.

source d'informationauteur yuzeh

  1. 33

    Vous n'avez pas à jouer avec les iframes. Il est possible d'effectuer des XMLHttpRequests entre les domaines, à l'aide de pages d'arrière-plan. Depuis Chrome 13, cross-site des demandes peuvent être faites à partir du contenu du script. Toutefois, les demandes peuvent encore échouer si la page est servi avec un Contenu Politique de Sécurité de l'en-tête avec une restriction de connectez-src.

    Une autre raison du choix de la nexy méthode sur le contenu des scripts est que les demandes de sites http, va provoquer un contenu mixte d'avertissement ("La page à l'adresse https://... affiche un contenu non sécurisé à partir de http://...").

    Encore une autre raison pour la délégation de la demande pour la page d'arrière-plan, c'est quand vous voulez obtenir une ressource de la file://parce qu'un contenu script ne peut pas lire à partir de file:sauf si elle est en cours d'exécution sur une page à la file:// régime.

    Note

    Pour permettre des requêtes d'origine, vous devez explicitement d'accorder des autorisations à votre extension à l'aide de la permissions tableau dans votre fichier manifest.

    Cross-site request à l'aide de fond de script.

    Le contenu du script demande de la fonctionnalité de l'arrière-plan via le messagerie API. Voici un exemple d'une façon très simple d'envoi et d'obtenir la réponse à une demande.

    chrome.runtime.sendMessage({
    method: 'POST',
    action: 'xhttp',
    url: 'http://www.stackoverflow.com/search',
    data: 'q=something'
}, function(responseText) {
    alert(responseText);
    /*Callback function to deal with the response*/
});

    Arrière-plan /l'événement page:

    /**
 * Possible parameters for request:
 *  action: "xhttp" for a cross-origin HTTP request
 *  method: Default "GET"
 *  url   : required, but not validated
 *  data  : data to send in a POST request
 *
 * The callback function is called upon completion of the request */
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
    if (request.action == "xhttp") {
        var xhttp = new XMLHttpRequest();
        var method = request.method ? request.method.toUpperCase() : 'GET';

        xhttp.onload = function() {
            callback(xhttp.responseText);
        };
        xhttp.onerror = function() {
            //Do whatever you want on error. Don't forget to invoke the
            //callback to clean up the communication port.
            callback();
        };
        xhttp.open(method, request.url, true);
        if (method == 'POST') {
            xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }
        xhttp.send(request.data);
        return true; //prevents the callback from being called too early on return
    }
});

    Remarque: L'Api de messagerie ont été renommés à plusieurs reprises. Si votre navigateur cible n'est pas la dernière version de Chrome, découvrez cette réponse.

    Pour être complet, voici un manifeste fichier essayer mon démo:

    {
    "name": "X-domain test",
    "manifest_version": 2,
    "permissions": [
        "http://www.stackoverflow.com/search*"
    ],
    "content_scripts": {
        "js": ["contentscript.js"],
        "matches": ["http://www.example.com/*"]
    },
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    }
}
  2. 4

    J'ai mis en place la même chose à l'aide de jquery, il est beaucoup plus simple et il a travaillé beaucoup trop..

    background.js

    chrome.runtime.onMessage.addListener(function(request, sender, callback) {
  if (request.action == "xhttp") {

    $.ajax({
        type: request.method,
        url: request.url,
        data: request.data,
        success: function(responseText){
            callback(responseText);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            //if required, do some error handling
            callback();
        }
    });

    return true; //prevents the callback from being called too early on return
  }
});

    contentscript.js

    chrome.runtime.sendMessage({
        method: 'POST',
        action: 'xhttp',
        url: 'http://example-url.com/page.php',
        data: "key=value"
    }, function(reponseText) {
        alert(responseText);
    });

    Mais assurez-vous que le manifeste.fichier json dispose des autorisations et jquery js fichier

      "permissions": [
      "tabs", "activeTab", "http://example-url.com/*"
  ],
  "content_scripts": [ {
      "js": [ "jquery-3.1.0.min.js", "contentscript.js" ],
      "matches": [ "https://example-ssl-site.com/*" ]
  }],
  "background": {
      "scripts": [ "jquery-3.1.0.min.js", "background.js" ]
  }