Breaking

Post Top Ad

Your Ad Spot

miércoles, 23 de octubre de 2019

Cómo evitar exponer su clave API en sus aplicaciones front-end públicas

Cómo evitar exponer su clave API en sus aplicaciones front-end públicas

El problema

Todo lo que desea hacer es obtener algo de JSON desde un punto final de API para el clima, algunas reseñas de libros o algo similar de manera similar.
La consulta de búsqueda en su front-end es bastante fácil, ¡pero debe pegar su clave API secreta allí mismo en el código de front-end para que cualquiera la encuentre con una cantidad trivial de excavación!
Además, empujar sus claves API a su repositorio GitHub es un problema importante: Dev puso claves AWS en Github. Entonces sucedieron MALAS COSAS .
"¡¿Por qué es tan difícil?!" - Tú, probablemente hace 15 minutos

La solución

Debería usar un servidor de fondo como retransmisión para obtener los resultados de la API por usted y luego pasarlos a su front-end

El nuevo problema

¡Solo está tratando de hacer una demostración de front-end para su cartera! ¡Todavía no has aprendido nada sobre las tecnologías de back-end! ¡¿Por qué es tan difícil?!

Manifestación

He encontrado este problema con la frecuencia suficiente que he decidido dejar de inventar trucos tontos e implementar una solución que funcione con un código de fondo mínimo.
En esta demostración, configuré un back-end que escucha las solicitudes POST y las envía a la API GoodReads . Para usar esto, debe implementar su propio front-end que pueda enviar la solicitud POST adecuada a este back-end. Su front-end no se comunicará con GoodReads directamente, por lo que no se expone ninguna clave API.

Necesitará

  • Nodo (esto se ha probado con v10.16.0, las versiones posteriores estarán bien, las anteriores pueden tener problemas)
  • git
  • Este repositorio: https://github.com/JacksonBates/example-goodreads-api-relay

Empezar

git clone https://github.com/JacksonBates/example-goodreads-api-relay.git
El archivo README.md contiene todo lo que debe saber, incluida la instalación y configuración.
He incluido los puntos clave aquí por conveniencia:

README.md

Instalar dependencias:
npm i
Necesita crear su propio .envarchivo para su clave:
cp .env.example .env
Luego abra el nuevo .envarchivo y pegue sus claves en el lugar correcto.
Ejemplo:
GOODREADS_API_KEY=AABBCCDDEEFF00112233445566778899
Ahora ejecute el servidor:
node app.js
En el navegador, navegue a localhost: 3000 para confirmar que el servidor se está ejecutando. Deberías ver un simpleHello World!

¿Qué sigue?

Ahora lea el app.jsarchivo a fondo.
He comentado mucho el código para ayudarlo a comprender lo que está sucediendo si no ha visto node / express mucho antes.
// app.js

// These import necessary modules and set some initial variables
require("dotenv").config();
const express = require("express");
const fetch = require("node-fetch");
const convert = require("xml-js");
const rateLimit = require("express-rate-limit");
const app = express();
const port = 3000;

// Rate limiting - Goodreads limits to 1/sec, so we should too

// Enable if you're behind a reverse proxy (Heroku, Bluemix, AWS ELB, Nginx, etc)
// see https://expressjs.com/en/guide/behind-proxies.html
// app.set('trust proxy', 1);

const limiter = rateLimit({
  windowMs: 1000, // 1 second
  max: 1, // limit each IP to 1 requests per windowMs
});

//  apply to all requests
app.use(limiter);

// Routes

// Test route, visit localhost:3000 to confirm it's working
// should show 'Hello World!' in the browser
app.get("/", (req, res) => res.send("Hello World!"));

// Our Goodreads relay route!
app.post("/api/:search", (req, res) => {
  // This uses string interpolation to make our search query string
  // it pulls the posted query param and reformats it for goodreads
  const searchString = `q=${req.query.q}`;

  // This is an IIFE (Immediately Invoked Function Expression) - that's why it's
  // wrapped in parentheses and followed immediately by more parentheses
  // It uses node-fetch to call the goodreads api, and reads the key from .env
  (async function fetchGoodReads() {
    const response = await fetch(
      `https://www.goodreads.com/search.xml?key=${process.env.GOODREADS_API_KEY}&${searchString}`,
    );
    const xml = await response.text();

    // Goodreads API returns XML, so to use it easily on the front end, we can
    // convert that to JSON:
    const json = convert.xml2json(xml, { compact: true, spaces: 2 });

    // The API returns stuff we don't care about, so we may as well strip out
    // everything except the results:
    const results = JSON.parse(json).GoodreadsResponse.search.results;

    return res.send(results);
  })();
});

// This spins up our sever and generates logs for us to use.
// Any console.log statements you use in node for debugging will show up in your
// terminal, not in the browser console!
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

Probar el relevo API

Use Postman para probar la API.
Configure Postman en POST y péguelo en la url: localhost:3000/api/search?q=hobbit
Cartero le mostrará la respuesta JSON a continuación.
Captura de pantalla de Postman mostrando el JSON devuelto de nuestro nuevo back-end

¿Cómo usas esto en tu interfaz?

Esta aplicación simple está escuchando las solicitudes de publicación en /api/, así que interactúa con ella en tu aplicación front-end de la forma en que has estado anteriormente con la API original.
Esto solo está configurado para manejar consultas de búsqueda: si desea utilizar otros puntos finales / métodos de la API de Goodreads, ¡deberá pensar cómo los implementa usted mismo!

Hospedaje

No puede implementar su front-end y aún tener esto en localhost; obviamente, también necesita implementar esto.
Recomiendo Heroku .

Crédito adicional

Si quisiera extender esto, podría considerar cómo solo podría hacer que esto sea accesible desde un rango restringido de direcciones IP para aumentar la seguridad, lo que estaba fuera del alcance de este tutorial / demostración.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas