Ayuda ocultando credenciales con JavaScript y HTML

Hola amigos, antes que nada un saludo a todos y gracias a todos los que haceís posible un sitio como este. Bueno, al lio, me llamo Luis y tengo el problema de que he hecho un visor de fotos para un banco de fotos, el cual va incrustado en una página web. La cuestión es que hay que darse de alta en el banco de fotos, yo ya tengo mi cuenta y quiero dejar mi clienteID y la contraseña fijas para que el usuario solo busque y no tenga que darse de alta en el sitio. ¿Cómo puedo hacer esto de forma que no se vean estas credenciales de ninguna forma? Es por si hay gente malintencionada y la cambia y ya te hace la faena.

Respuestas

Me temo que si la forma de acceso al banco de fotos es mediante el navegador, no hay forma de ocultar esos datos. El motivo es que de alguna manera debes acceder a los datos en claro para establecer la conexión con el banco de fotos remoto.

La única solución que se me ocurre es que hagas en el backend de tu sitio web un script sencillo donde defines el usuario + contraseña y donde haces cualquier petición que te hagan desde el navegador y devuelves el resultado que te da el banco de fotos. Sería como hacer un "proxy" basado en software. Si utilizas PHP, con la librería Guzzle puedes hacer fácilmente estas peticiones y obtener el resultado.

@javiereguiluz

28 septiembre 2015, 22:50

Esto es lo que me proporciona la API del banco de fotos:

Puede utilizar la Autorización básica para las solicitudes que no requieran un usuario. La Autorización básica es parte del protocolo HTTP y se describe en detalle en RFC1945. Enviar un encabezado de autorización que contenga su client_id y client_secret codificados en Base64.

Por ejemplo, si el agente usuario usa '1234' como client_id y '4321' como client_secret, entonces el encabezado se forma como sigue:

Autorización: Básica MTIzNDo0MzIx

Y este trozo es mi parte de código:

// Get Client ID and Client Secret for use in the Authorization header.
var clientId = "$$$$$$$$";
var clientSecret = "$$$$$$$$$";
var jqxhr = $.ajax({
  url: 'https:/bancoimagenes/images/search',
  data: opts,
  headers: {
    // Base 64 encode 'client_id:client_secret'.
    Authorization: 'Basic ' + window.btoa(clientId + ':' + clientSecret)
  }
});

Lo que está en $$$$$$ es lo que me gustaría ocultar.

Gracias por la respuesta.

@LuisGarGomez

28 septiembre 2015, 23:03

Con el código que muestras, será muy sencillo ocultar los datos porque no es obligatorio mandar el usuario + contraseña en claro. Lo único que tienes que hacer es crear una variable (por ejemplo secreto) con el resultado de codificar en base64 el usuario + contraseña. El código resultante sería el siguiente:

var secreto = 'MTIzNDo0MzIx';
var jqxhr = $.ajax({
  url: 'https:/bancoimagenes/images/search',
  data: opts,
  headers: {
    Authorization: 'Basic ' + secreto
  }
});

Para obtener el valor del secreto, simplemente ejecuta el siguiente código (suponiendo que uses PHP):

echo base64_encode($clientId.':'.$clientSecret);

Si no puedes codificar en base64 localmente, puedes usar un servicio web, como por ejemplo: https://www.base64encode.org/

@javiereguiluz

28 septiembre 2015, 23:13

Más o menos creo que he pillado lo que me quieres decir. Muchas gracias Javier :)

@LuisGarGomez

29 septiembre 2015, 0:07