Mit Remote-Host-Code Verstöße beheben

Remote gehosteter Code (RHC) bezeichnet im Chrome Web Store alles, was vom Browser ausgeführt wird und von einem anderen Ort als den eigenen Dateien der Erweiterung geladen wird. Beispielsweise JavaScript und WASM. Es enthält keine Daten oder Dinge wie JSON oder CSS.

Warum ist RHC nicht mehr zulässig?

Mit Manifest V3 müssen Erweiterungen jetzt gesamten Code in der Erweiterung selbst bündeln. Früher konnten Skript-Tags von jeder URL im Web dynamisch eingefügt werden.

Mir wurde gesagt, dass meine Erweiterung RHC hat. Was ist da los?

Wenn Ihre Erweiterung bei der Überprüfung mit dem Fehler Blue Argon abgelehnt wurde, gehen unsere Prüfer davon aus, dass Ihre Erweiterung extern gehosteter Code verwendet. Dies liegt in der Regel daran, dass eine Erweiterung versucht, ein Skript-Tag mit einer Remote-Ressource hinzuzufügen (z.B. aus dem offenen Web und nicht aus den in der Erweiterung enthaltenen Dateien) oder eine Ressource abruft, um sie direkt auszuführen.

RHC erkennen

Die Erkennung von RHC ist nicht besonders schwierig, wenn du weißt, worauf du achten musst. Suchen Sie zuerst nach den Strings „http://“ oder „https://“ in Ihrem Projekt. Wenn Sie einen RHC-Verstoß haben, können Sie ihn wahrscheinlich dadurch finden. Wenn Sie ein vollständiges Build-System haben oder Abhängigkeiten von npm oder anderen Quellen von Drittanbietern verwenden, müssen Sie die kompilierte Version des Codes durchsuchen, da diese vom Speicher bewertet wird. Wenn Sie das Problem immer noch nicht finden können, wenden Sie sich an den One Stop-Support. Er kann die spezifischen Verstöße erläutern und erläutern, was erforderlich ist, um die Erweiterung so schnell wie möglich zu veröffentlichen.

Vorgehensweise, wenn eine Bibliothek den Code anfordert

Unabhängig davon, woher der Code stammt, darf RHC nicht verwendet werden. Dazu gehört Code, den Sie nicht geschrieben haben, den Sie aber als Abhängigkeit in Ihrem Projekt verwenden. Bei einigen Entwicklern, die Firebase verwendet haben, tritt dieses Problem auf, als Remotecode zur Verwendung in Firebase Auth aufgenommen wurde. Obwohl es sich um eine eigene Bibliothek (d.h. eine von Google gehörende) Bibliothek handelt, wird für RHC keine Ausnahme gemacht. Sie müssen den Code so konfigurieren, dass entweder der RHC entfernt oder das Projekt so aktualisiert wird, dass der Code zuerst nicht enthalten ist. Wenn RHC nicht durch Ihren Code geladen wird, sondern eine von Ihnen verwendete Bibliothek, sollten Sie sich am besten an den Autor der Bibliothek wenden. Teilen Sie ihm mit, dass dies der Fall ist, und bitten Sie entweder um eine Problemumgehung oder um Codeaktualisierungen, um den Fehler zu entfernen.

Was ist, wenn Sie nicht auf ein Update der Mediathek warten können?

Einige Bibliotheken senden fast unmittelbar nach der Benachrichtigung ein Update. Andere werden jedoch abgebrochen oder es kann Zeit dauern, das Problem zu beheben. Je nachdem, was bei dem jeweiligen Verstoß geschieht, müssen Sie möglicherweise nicht warten, bis die Blockierung aufgehoben wird, und eine erfolgreiche Überprüfung abgeschlossen. Es gibt eine Reihe von Möglichkeiten, um schnell wieder betriebsbereit zu sein.

Code prüfen

Sind Sie sicher, dass der Code, der die Anfrage verursacht, erforderlich ist? Wenn er einfach gelöscht werden kann oder eine Bibliothek entfernt werden kann, die ihn verursacht, dann löschen Sie den Code und der Job ist erledigt.

Gibt es eine andere Bibliothek, die dieselben Funktionen bietet? Auf npmjs.com, GitHub oder auf anderen Websites finden Sie andere Optionen, die dieselben Anwendungsfälle erfüllen.

Baumschütteln

Wenn der Code, der den RHC-Verstoß verursacht, nicht tatsächlich verwendet wird, kann er möglicherweise automatisch von Tools gelöscht werden. Moderne Build-Tools wie Webpack, Rollup und Vite, um nur einige zu nennen, haben eine Funktion namens Tree-Shaking. Nach der Aktivierung in Ihrem Build-System sollten durch das Baumschütteln alle nicht verwendeten Codepfade entfernt werden. Dies kann bedeuten, dass Sie nicht nur eine konformere Version Ihres Codes haben, sondern auch eine schlankere und schnellere Version. Es ist wichtig zu beachten, dass nicht alle Bibliotheken durch Baumwackler geschüttelt werden können, aber viele schon. Bei einigen Tools wie Rollup und Vite ist die Baumstruktur standardmäßig aktiviert. Das Webpack muss konfiguriert werden, damit es aktiviert wird. Wenn Sie kein Build-System als Teil Ihrer Erweiterung verwenden, aber Codebibliotheken nutzen, sollten Sie unbedingt ein Build-Tool in Ihren Workflow einbinden. Build-Tools helfen Ihnen, sicherere, zuverlässigere und besser zu wartende Projekte zu schreiben.

Die Details der Implementierung von Treehakings hängen von Ihrem spezifischen Projekt ab. Für ein einfaches Beispiel mit Rollup können Sie Treehakings hinzufügen, indem Sie einfach Ihren Projektcode kompilieren. Angenommen, Sie haben eine Datei namens „main.js“, die sich nur bei Firebase Auth anmeldet:

import { GoogleAuthProvider, initializeAuth } from "firebase/auth";

chrome.identity.getAuthToken({ 'interactive': true }, async (token) => {
  const credential = GoogleAuthProvider.credential(null, token);
  try {
    const app = initializeApp({ ... });
    const auth = initializeAuth(app, { popupRedirectResolver: undefined, persistence: indexDBLocalPersistence });
    const { user } = await auth.signInWithCredential(credential)
    console.log(user)
  } catch (e) {
    console.error(error);
  }
});

Dann müssen Sie lediglich die Eingabedatei, ein Plug-in zum Laden der Knotendateien @rollup/plugin-node-resolve und den Namen der von ihr generierten Ausgabedatei mitteilen.

npx rollup --input main.js --plugin '@rollup/plugin-node-resolve' --file compiled.js

Wenn Sie diesen Befehl in einem Terminalfenster ausführen, erhalten Sie eine generierte Version unserer Datei main.js, die in einer einzigen Datei namens compiled.js kompiliert ist.

Ein Rollup kann einfach sein, ist aber auch sehr konfigurierbar. Sie können verschiedenste komplexe Logik und Konfigurationen hinzufügen. Weitere Informationen finden Sie in der zugehörigen Dokumentation. Das Hinzufügen solcher Build-Tools führt zu einem kleineren, effizienteren Code und behebt in diesem Fall das Problem mit remote gehostetem Code.

Dateien automatisch bearbeiten

Eine zunehmend gängige Methode, mit der remote gehosteter Code in Ihre Codebasis eingegeben werden kann, ist die Unterabhängigkeit einer Bibliothek, die Sie einschließen. Wenn die Bibliothek X die import-Bibliothek Y aus einem CDN abrufen möchte, müssen Sie sie trotzdem aktualisieren, um sie aus einer lokalen Quelle laden zu können. Bei modernen Build-Systemen können Sie einfach Plug-ins erstellen, um eine Remotereferenz zu extrahieren und direkt in Ihren Code einzufügen.

Das würde bedeuten, dass Code, der so aussieht:

import moment from "https://unpkg.com/moment@2.29.4/moment.js"
console.log(moment())

Sie könnten ein kleines Rollup-Plug-in erstellen.

import { existsSync } from 'fs';
import fetch from 'node-fetch';

export default {
  plugins: [{
    load: async function transform(id, options, outputOptions) {
      // this code runs over all of out javascript, so we check every import
      // to see if it resolves as a local file, if that fails, we grab it from
      // the network using fetch, and return the contents of that file directly inline
      if (!existsSync(id)) {
        const response = await fetch(id);
        const code = await response.text();

        return code
      }
      return null
    }
  }]
};

Sobald Sie den Build mit dem neuen Plug-in ausführen, wird jede Remote-import-URL erkannt, unabhängig davon, ob es sich um unseren Code, eine Unterabhängigkeit oder eine Unterabhängigkeit handelt.

npx rollup --input main.js --config ./rollup.config.mjs --file compiled.js

Dateien manuell bearbeiten

Die einfachste Option besteht darin, den Code zu löschen, der den RHC verursacht. Öffnen Sie die Datei in einem Texteditor Ihrer Wahl und löschen Sie die Zeilen, die gegen die Richtlinien verstoßen. Dies ist im Allgemeinen nicht empfehlenswert, da es spröde ist und vergessen werden könnte. Dies erschwert die Verwaltung Ihres Projekts, wenn eine Datei namens „library.min.js“ nicht tatsächlich library.min.js ist. Anstatt die Rohdateien zu bearbeiten, ist die Verwendung eines Tools wie patch-package eine etwas aufwendigere Option. Mit dieser sehr nützlichen Option können Sie Änderungen nicht an der Datei selbst, sondern an einer Datei speichern. Es basiert auf Patchdateien, genau wie bei Versionsverwaltungssystemen wie Git oder Subversion. Sie müssen nur den nicht richtlinienkonformen Code manuell ändern, die diff-Datei speichern und das Patch-Paket mit den Änderungen konfigurieren, die Sie anwenden möchten. Eine vollständige Anleitung finden Sie in der Projekt-Readme-Datei. Wenn Sie ein Projekt patchen, empfehlen wir Ihnen unbedingt, sich an das Projekt zu wenden, um anzufordern, dass Änderungen vorgelagert werden. Während „patch-package“ die Verwaltung von Patches erheblich einfacher macht, ist es noch besser, nichts zu aktualisieren, wenn es nötig ist.

Was tun, wenn der Code nicht verwendet wird

Mit zunehmender Codebasis können Abhängigkeiten (oder die Abhängigkeit einer Abhängigkeit oder eine Abhängigkeit von ...) Codepfade beibehalten, die nicht mehr verwendet werden. Wenn einer dieser Abschnitte Code zum Laden oder Ausführen von RHC enthält, muss er entfernt werden. Es spielt keine Rolle, ob sie leer oder ungenutzt ist. Wenn sie nicht verwendet wird, muss sie entfernt werden, entweder durch Treehaking oder durch Patchen der Bibliothek.

Gibt es eine Behelfslösung?

Im Allgemeinen gilt: Nein. RHC ist nicht zulässig. Es gibt jedoch einige Fälle, in denen dies zulässig ist. Dies sind fast immer Fälle, in denen es keine andere Option gibt.

Nutzerskripts-API

Nutzerskripts sind kleine Code-Snippets, die normalerweise vom Nutzer bereitgestellt werden und für Nutzerskript-Manager wie TamperMonkey und Violentmonkey bestimmt sind. Diese Manager können von Nutzern geschriebenen Code nicht bündeln. Daher bietet die User Script API eine Möglichkeit zum Ausführen von Code, der vom Nutzer bereitgestellt wird. Dies ist kein Ersatz für chrome.scripting.executeScript oder andere Umgebungen für die Codeausführung. Nutzer müssen den Entwicklermodus aktivieren, um Aktionen ausführen zu können. Wenn das Prüfteam des Chrome Web Store der Meinung ist, dass dies auf andere Weise als vorgesehen (z.B. durch den Nutzer bereitgestellter Code) verwendet wird, kann dies abgelehnt oder der Eintrag aus dem Store entfernt werden.

chrome.debugger

Über die chrome.debugger API haben Erweiterungen die Möglichkeit, mit dem Chrome-Entwicklertools-Protokoll zu interagieren. Dies ist das gleiche Protokoll, das auch für die Entwicklertools von Chrome verwendet wird, und es zahlt noch viele weitere Tools. Damit kann eine Erweiterung Remote-Code anfordern und ausführen. Genau wie Nutzerskripts ist es kein Ersatz für chrome.scripting und bietet eine viel bessere Nutzererfahrung. Während der Verwendung wird dem Nutzer oben im Fenster eine Warnleiste angezeigt. Wenn das Banner geschlossen oder geschlossen wird, wird die Debugging-Sitzung beendet.

Screenshot der Adressleiste in Chrome mit der Meldung „Debugger-Erweiterung hat das Debugging in diesem Browser gestartet“
Screenshot der Adressleiste in Chrome mit der Meldung „Debugger-Erweiterung hat das Debugging in diesem Browser gestartet“

In einer Sandbox ausgeführte iFrames

Wenn Sie einen String als Code auswerten müssen und sich in einer DOM-Umgebung befinden (z.B. in einem Inhaltsskript und nicht in einem Erweiterungsdienst-Worker), können Sie auch einen iFrame in einer Sandbox verwenden. Erweiterungen unterstützen Elemente wie eval() standardmäßig nicht. Schädlicher Code kann die Sicherheit der Nutzer gefährden. Wenn der Code jedoch nur in einer bekannten sicheren Umgebung ausgeführt wird, z. B. in einem iFrame, der vom Rest des Webs in einer Sandbox ausgeführt wurde, werden diese Risiken erheblich reduziert. In diesem Kontext kann die Content Security Policy, die die Verwendung von eval blockiert, aufgehoben werden, sodass Sie beliebigen gültigen JavaScript-Code ausführen können.

Wenn der Anwendungsfall nicht abgedeckt ist, können Sie sich über die Mailingliste chromium-extensions an das Team wenden oder ein neues Ticket eröffnen, um Hilfe vom One Stop-Support anzufordern.

Was zu tun ist, wenn du mit einem Ergebnis nicht einverstanden bist

Die Durchsetzung von Richtlinien kann sehr differenziert sein und die Überprüfung erfordert manuelle Eingaben. Das bedeutet, dass das Chrome Web Store-Team manchmal zustimmen kann, eine Überprüfungsentscheidung zu ändern. Wenn Sie der Meinung sind, dass bei der Überprüfung ein Irrtum vorliegt, können Sie mit dem One Stop-Support Einspruch gegen die Ablehnung einlegen.