Zmodyfikuj odpowiedzi HTTP z rozszerzenia Chrome

Czy można utworzyć rozszerzenie do Chrome, które modyfikuje treść odpowiedzi HTTP?

Szukałem w Chrome Extension API , ale nie znalazłem nic, aby to zrobić.

Ogólnie rzecz biorąc, nie można zmienić treści odpowiedzi żądania HTTP przy użyciu standardowych interfejsów API rozszerzeń Chrome.

Ta funkcja jest wymagana pod adresem 104058: WebRequest API: zezwól rozszerzeniu na edytowanie treści odpowiedzi . Oznacz problem gwiazdką, aby otrzymywać powiadomienia o aktualizacjach.

Jeśli chcesz edytować treść odpowiedzi dla znanego XMLHttpRequest, wstrzykuj kod za pomocą skryptu zawartości, aby zastąpić domyślny XMLHttpRequestkonstruktor niestandardowym (w pełni funkcjonalnym), który przepisuje odpowiedź przed wyzwoleniem rzeczywistego zdarzenia. Upewnij się, że Twój obiekt XMLHttpRequest jest w pełni zgodny z wbudowanym XMLHttpRequestobiektem Chrome, w przeciwnym razie strony z dużą ilością technologii AJAX ulegną awarii.

W innych przypadkach możesz użyć interfejsów API chrome.webRequestlub, chrome.declarativeWebRequestaby przekierować żądanie do data:-URI. W przeciwieństwie do podejścia XHR, nie otrzymasz oryginalnej treści żądania. W rzeczywistości żądanie nigdy nie dotrze do serwera, ponieważ przekierowanie można wykonać tylko przed wysłaniem rzeczywistego żądania. Jeśli przekierowujesz main_frameżądanie, użytkownik zobaczy data:-URI zamiast żądanego adresu URL.

Właśnie wydałem rozszerzenie Devtools, które właśnie to robi :)

Nazywa się tamper, jest oparty na mitmproxy i pozwala zobaczyć wszystkie żądania wysyłane przez bieżącą kartę, modyfikować je i obsługiwać zmodyfikowaną wersję przy następnym odświeżeniu.

To dość wczesna wersja, ale powinna być kompatybilna z OS X i Windows. Daj mi znać, jeśli to nie zadziała.

Możesz go pobrać tutaj http://dutzi.github.io/tamper/

Jak to działa

Jak skomentował @Xan poniżej, rozszerzenie komunikuje się poprzez Native Messaging ze skryptem Pythona, który rozszerza mitmproxy .

Rozszerzenie wyświetla listę wszystkich żądań używających chrome.devtools.network.onRequestFinished.

Po kliknięciu żądań pobiera swoją odpowiedź przy użyciu metody obiektu żądania getContent(), a następnie wysyła tę odpowiedź do skryptu Pythona, który zapisuje ją lokalnie.

Następnie otwiera plik w edytorze (używając calldla OSX lub subprocess.Popendla Windows).

Skrypt w Pythonie używa mitmproxy do nasłuchiwania całej komunikacji prowadzonej przez to proxy, jeśli wykryje żądanie dotyczące zapisanego pliku, zamiast tego obsługuje zapisany plik.

Użyłem API proxy Chrome (w szczególności chrome.proxy.settings.set()), aby ustawić PAC jako ustawienie proxy. Ten plik PAC przekierowuje całą komunikację do serwera proxy skryptu Python.

Jedną z największych zalet mitmproxy jest to, że może również modyfikować komunikację HTTPs. Więc to też masz :)

Tak. Jest to możliwe dzięki chrome.debuggerinterfejsowi API, który zapewnia rozszerzeniu dostęp do protokołu Chrome DevTools , który obsługuje przechwytywanie i modyfikację HTTP za pośrednictwem sieciowego interfejsu API .

To rozwiązanie zostało zasugerowane w komentarzu do Chrome Issue 487422 :

Dla każdego, kto chce alternatywy, która jest obecnie możliwa, możesz użyć na stronie chrome.debuggerw tle / wydarzenia, aby dołączyć do określonej karty, której chcesz słuchać (lub dołączyć do wszystkich kart, jeśli to możliwe, nie przetestowałem osobiście wszystkich kart) , a następnie użyj sieciowego API protokołu debugowania.

Jedynym problemem jest to, że u góry widoku karty będzie widoczny zwykły żółty pasek, chyba że użytkownik wyłączy go w chrome://flags.

Najpierw dołącz debugger do celu:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        // TODO
    });
});

Następnie wyślij Network.setRequestInterceptionEnabledpolecenie, które umożliwi przechwytywanie żądań sieciowych:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        chrome.debugger.sendCommand(debuggee, "Network.setRequestInterceptionEnabled", { enabled: true });
    });
});

Chrome zacznie teraz wysyłać Network.requestInterceptedwydarzenia. Dodaj dla nich słuchacza:

chrome.debugger.getTargets((targets) => {
    let target = /* Find the target. */;
    let debuggee = { targetId: target.id };

    chrome.debugger.attach(debuggee, "1.2", () => {
        chrome.debugger.sendCommand(debuggee, "Network.setRequestInterceptionEnabled", { enabled: true });
    });

    chrome.debugger.onEvent.addListener((source, method, params) => {
        if(source.targetId === target.id && method === "Network.requestIntercepted") {
            // TODO
        }
    });
});

W odbiorniku params.requestbędzie odpowiedni Requestobiekt.

Wyślij odpowiedź z Network.continueInterceptedRequest:

• Przekaż kodowanie base64 żądanej nieprzetworzonej odpowiedzi HTTP (w tym wiersz stanu HTTP, nagłówki itp. ) Jako rawResponse.
• Podaj params.interceptionIdjako interceptionId.

Zwróć uwagę, że w ogóle tego nie testowałem.

Jak powiedział @Rob w, nadpisałem XMLHttpRequesti jest to wynikiem modyfikacji wszelkich żądań XHR w dowolnych witrynach (działa jak przezroczysty proxy modyfikacji):

var _open = XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, URL) {
    var _onreadystatechange = this.onreadystatechange,
        _this = this;

    _this.onreadystatechange = function () {
        // catch only completed 'api/search/universal' requests
        if (_this.readyState === 4 && _this.status === 200 && ~URL.indexOf('api/search/universal')) {
            try {
                //////////////////////////////////////
                // THIS IS ACTIONS FOR YOUR REQUEST //
                //             EXAMPLE:             //
                //////////////////////////////////////
                var data = JSON.parse(_this.responseText); // {"fields": ["a","b"]}

                if (data.fields) {
                    data.fields.push('c','d');
                }

                // rewrite responseText
                Object.defineProperty(_this, 'responseText', {value: JSON.stringify(data)});
                /////////////// END //////////////////
            } catch (e) {}

            console.log('Caught! :)', method, URL/*, _this.responseText*/);
        }
        // call original callback
        if (_onreadystatechange) _onreadystatechange.apply(this, arguments);
    };

    // detect any onreadystatechange changing
    Object.defineProperty(this, "onreadystatechange", {
        get: function () {
            return _onreadystatechange;
        },
        set: function (value) {
            _onreadystatechange = value;
        }
    });

    return _open.apply(_this, arguments);
};

na przykład ten kod może być z powodzeniem używany przez Tampermonkey do wprowadzania jakichkolwiek modyfikacji na dowolnych stronach :)