Frage Verwenden von API-Schlüsseln in einer reaktiven App


Ich habe eine React-App, die zwei Dienste von Drittanbietern verwendet. Die App wurde mit verwendet react-create-app.

Beide dieser Dienste erfordern einen API-Schlüssel.

Ein Schlüssel wird über ein Script-Tag wie folgt geliefert:

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

Der andere API-Schlüssel wird in einer Anfrage verwendet. Ich speichere den eigentlichen Schlüssel in einer Konstante und benutze ihn zur Bildung der Anfrage. So was:

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

Google's Best-Practice-Tipps zur Handhabung von API-Schlüsseln sagt:

API-Schlüssel nicht direkt in Code einbetten

Das bringt mich zu meiner ersten Frage:

1. Wie man Variablen in verwendet index.html?

In meinem index.html Datei, ich habe zwei Tags, die so aussehen:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Offensichtlich, %PUBLIC_URL%ist eine Variable. Wie kann ich eine Variable hinzufügen? %MY_KEY% um zu vermeiden, den API-Schlüssel direkt in meinen Code einzubetten?

So etwas zu bekommen:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

In Bezug auf diese Frage ist es sicher, den API-Schlüssel in einer Konstanten zu speichern, wie ich es für MY_OTHER_KEY?

Google sagt auch:

Speichern Sie keine API-Schlüssel in Dateien im Quellbaum Ihrer Anwendung

Dies bringt mich zu meiner zweiten Frage:

2. Ist der API-Schlüssel noch nicht im Paket enthalten?

Sag, ich mache was Google sagt und ich

... speichern Sie sie in Umgebungsvariablen oder in Dateien außerhalb Ihres   Quellbaum der Anwendung

Angenommen, ich speichere einen Schlüssel in einer externen Datei. Diese Datei wird, so nehme ich an, irgendwann gelesen und der Inhalt entweder in das Bundle kopiert oder auf andere Weise referenziert. Wird der Schlüssel im Bündel nicht sichtbar sein, außer vielleicht schwerer zu finden? Wie hilft das genau?

3. Gibt es eine kanonische Art, API-Schlüssel in einer Reactive-App zu verwenden? Oder liegt es an den einzelnen Entwicklern?

Selbsterklärend, ich suche nach dem reaktiven Weg, dieses Problem zu lösen, falls es eines gibt.

Danke für Ihre Hilfe!


10
2017-10-19 20:00


Ursprung


Antworten:


1. Wie benutzt man Variablen in index.html?

Antwort 1 : Bitte geh durch Benutzerdefinierte Umgebungsvariablen hinzufügen um herauszufinden, wie Sie Umgebungsvariablen des Typs hinzufügen, den Sie als Beispiel gezeigt haben.

2. Ist der API-Schlüssel noch nicht im Paket enthalten?

Antwort 2: Auch wenn Sie Ihren Schlüssel haben (MY_KEY) als Umgebungsvariable im Skript-Tag, wird es auf der Seite gerendert und ist sichtbar. In der Regel sind dies Browser-Schlüssel und sollen auf der Client-Seite verwendet werden. Diese können eingeschränkt werden, indem Sie in Ihrer Anfrage den Header Http Referer angeben. Mehr über die Wirksamkeit der Sicherung dieser Schlüssel Hier. API-Schlüssel (wie MY_OTHER_KEY) sollten nicht auf der Client-Seite verwendet werden und sollten nicht im Skript-Tag gerendert oder auf der Client-Seite JS gespeichert werden.

3. Gibt es eine kanonische Art, API-Schlüssel in einer Reactive-App zu verwenden? Oder liegt es an den einzelnen Entwicklern?

Antwort 3: Die kanonische Methode, einen API-Schlüssel eines Drittanbieters zu verwenden, besteht darin, dass Ihre App auf der Clientseite eine Anfrage an Ihre Backend-API sendet. Ihre Back-End-API formatiert die Anforderung dann gemäß der API des Drittanbieters, fügt den Schlüssel hinzu und führt den Aufruf zur API des Drittanbieters durch. Sobald die Antwort empfangen wurde, kann sie entweder entpackt und in Domänenobjekte übersetzt werden, die Ihre Front-End-App verstehen würde, oder sie kann die unbearbeitete Antwort an die Front-End-App zurücksenden. Auf diese Weise bleibt der API-Schlüssel im Backend und wird nie an die Client-Seite gesendet.


11
2017-10-19 21:16