1

Quiero acceder a una variable de entorno desde el cliente , en un archivo .js , ya que en este momento estoy usando la API de google y mis credenciales están visibles y expuestas en un archivo publico .js en una variable.

const APY_KEY = 'mis-credenciales'

No quiero eso así ya que quiero tener ese valor en una variable de entorno donde nadie la pueda ver y poder acceder a ella desde el lado del cliente , yo se como agregar variables de entorno en heroku que es donde mi projecto esta alojado, pero no se como invocar esa variable desde un archivo .js publico.

De el lado del servidor se que lo puedo hacer con process.env ya que estoy usando Nodejs, pero definitivamente no se como hacerlo del lado del front-end.

1 respuesta 1

1

Pues es algo difícil ya que las API's con protocolos de seguridad para el lado del cliente suelen utilizarse con keys publicas, véase la configuración de Firebase para web en donde hay que agregar al código toda la información para acceder a tu app, puesto a que toda la información es visible, no es recomendable, podrías ofuscar el código, pero al fin y al cabo la información sigue siendo publica.

Si estuvieses trabajando con serverless, PaaS, Baas, etc., te recomendaría informarte con tu proveedor para saber como trabajar con las variables de entorno y sentenciar código dentro de tu app/servicio.

Solución:

Cualquier API que necesites accesar a través de credenciales siempre estarán expuestas si están en el lado del cliente por lo no te recomiendo que envíes las credenciaes desde el servidor tampoco.

Las API de google así como muchas otras tienen SDK para el lado del servidor a de mas, no deja de ser una API REST y ya que estás trabajando con una app/express de node (asumo) y en general con cualquier tipo de backend, puedes interactuar con la API desde el lado del servidor y enviarla o renderizarla al lado del cliente ya autenticada (desde el mismo servidor), en este caso puedes instalar las API de google como modulo en node y trabajar con su SDK o simplemente utilizar peticiones http para interactuar con esta (puedes utilizar node-fetch para trabajar con window.fetch en node).

Un ejemplo sería:

.env

SECRET="someApiKey2312255"
PORT=3000
DOMAIN="mydominio.com"

server.js

const express = require("express");
const app = express();
const SomeApi = require(some-api);

app.get("/api", function(req, res){
  var dominio = req.get('host');
  if (dominio != process.env.DOMAIN) {
    res.send("No puede acceder a esta información desde este dominio");
  }else {
    var someApi = new SomeApi({
      API_KEY: process.env.SECRET,
      VR: 1.3
    })
    var myApiRespone = someApi.getApiMethod("someParam");
    foo..
    res.send(myApiRespone);
  }
});
app.listen(process.env.PORT);

Tenemos una API random que se acredita y se ejecuta del lado del servidor y envía la información solo si la petición proviene de nuestro dominio, claro que esto es una seguridad muy básica, pero ya es cuestión de imaginación.

Ahora si del lado del cliente solicitamos nuestro endpoit el resultado será:

Solicitando de mydominio.com:

fetch("/api")
.then(res => res.json())
.then(res => console.log(res)); // ===> Imprimirá la data de la API

Solicitando de otrodominio.com:

 fetch("https://mydominio.com/api")
.then(res => res.json())
.then(res => console.log(res)); // ===> Imprimirá la data de "No puede acceder a esta información desde este dominio."

Espero que te sea de ayuda, un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.