Hacemos una revisión completa cada post en nuestro espacio con la meta de enseñarte siempre la información con la mayor veracidad y certera.
Solución:
En resumen: no, no puede proteger su API key en una aplicación del lado del cliente.
Este artículo entra en más detalles
Dos opciones
- Realice las llamadas a la API del lado del servidor y luego proporcione información al cliente desde allí
- Requerir que el cliente use su propia API keys
Incluso con su solución PHP, no puede ocultar su ID de usuario. Se puede imprimir fácilmente en la consola del navegador accediendo consle.log(userId);. Por lo que sé, todo lo que está disponible para el lado del cliente es vulnerable y puede decodificarse fácilmente. Incluso si ofuscas tu api key todavía se puede decodificar desde el lado del cliente.
Lo correcto es crear un contenedor de PHP alrededor de las llamadas a la API que requieren keysy luego llame a ese contenedor desde Javascript.
Si está leyendo esta página en 2020 y no desea desarrollar un código del lado del servidor por cualquier motivo (ahorrar costos de alojamiento, etc.), la función sin servidor podría ser la solución.
Esto también llama a la API de terceros desde el lado del servidor, pero no tiene que desarrollar un proxy de API del lado del servidor completo.
Netlify tiene documentación sobre esto. Supongo que otros proveedores como AWS lambda, la función de nube de Google ofrece cosas similares pero no estoy seguro.
https://github.com/netlify/code-examples/tree/master/function_examples/token-hider
ventajas
Sin administración de servidor
Contras
Dependencia de un proveedor