Quiero que mi clave API esté oculta y no expuesta públicamente.
Puedo pensar en algunas formas de cómo transferir la clave API, a través de document.getelementbyId , .queryselector , input - hidden; pero la clave API seguirá estando visible en la página HTML.
¿Cuál es la mejor solución?
El factor importante a tener en cuenta aquí es que cualquier JavaScript se ejecuta en la máquina del cliente .
Es su máquina y tienen el control total de lo que se ejecuta en ella .
Puede minimizar, puede ofuscar, puede probar todos los métodos posibles, pero la clave API finalmente tendrá que volver a formularse de alguna manera dentro del navegador del cliente. Y dado que el navegador del cliente es suyo , esencialmente no tiene control sobre lo que pueden hacer con la clave API. Además, la pestaña de red en el navegador del cliente mostrará todas las solicitudes que realiza la aplicación web, incluida la que se envía con la clave API.
Si se trata de una API externa de terceros que requiere una clave de API, la solución es tener un punto final que realice la autenticación por usted y que actúe como una interfaz entre su aplicación de front-end y la API.
Si esta es su propia API y necesita exponer puntos finales de API que no deberían estar disponibles públicamente, necesitará una forma de autenticar a los usuarios. Comenzar con tokens web JSON será un gran comienzo, pero la forma en que introduzca los JWT dependerá en gran medida de su aplicación.
Póngalo en un archivo .env como una variable y expórtelo al archivo donde lo necesite, los archivos .env no siempre se muestran en el navegador.
Ejemplo; cree un archivo api.env y luego en el archivo:
const key = "your API KEY goes here" luego expórtelo ( key ) al archivo donde lo necesite.
Los archivos .env nunca se mostrarán al frente