Cómo crear un sitio web seguro con CloudFront Password Protect

Publicado: 2023-01-15

Amazon Web Service (AWS) es el servicio de computación en la nube más popular en la actualidad. Permite que las empresas y los individuos alojen sus aplicaciones y sitios web en los servidores de Amazon de forma económica.

Uno de los componentes críticos de AWS es Amazon CloudFront. Es una red de entrega de contenido (CDN) creada para maximizar la velocidad de carga de cualquier visitante de su sitio web alojado en AWS.

Pero, ¿sabe que puede usar CloudFront para bloquear su sitio web detrás de una solicitud de contraseña? Esta guía le mostrará cómo utilizar la función de protección con contraseña de AWS CloudFront para proteger su sitio web.

  • ¿Qué es la protección con contraseña de CloudFront?
  • Cómo proteger un sitio web de CloudFront con una contraseña
    • Usando [correo electrónico protegido]
    • Aprovechamiento de AWS S3 y Lambda para agregar autenticación básica

¿Qué es la protección con contraseña de CloudFront?

Amazon CloudFront acelera el acceso de los usuarios a su aplicación y sitio web mediante la entrega de contenido a través de varios centros de datos en todo el mundo. Cuando un usuario accede a su sitio web, el contenido se entrega desde el centro más cercano a su posición geográfica. Esto, como resultado, acelera la velocidad de carga.

Siempre que utilice Amazon CloudFront para distribuir contenido, puede utilizar la función de protección con contraseña del sistema. El sistema aún funciona si su sitio web está alojado dentro de un depósito S3 o una instancia EC2.

Este es el esquema de un sistema CloudFront estándar. Describe cómo fluye una solicitud de los visitantes de la web (a la derecha) a través de CloudFront y otros subsistemas para llegar al origen (donde se almacena el contenido). En el origen, los datos se recuperan y vuelven a los visitantes.

ppwp-cloudfront-password-protect-system

Puede parecer confuso, especialmente para las personas que acaban de oír hablar de CloudFront por primera vez. Pero entender este gráfico y sus componentes es crucial para las secciones posteriores.

Cómo proteger un sitio web de CloudFront con una contraseña

Puede usar varios métodos para insertar una solicitud de contraseña en su sitio web servido por CloudFront. Le mostraremos 2 formas en esta guía.

Usando [correo electrónico protegido]

[email protected] es una función de CloudFront que le permite ejecutar códigos personalizados más cerca de los clientes. De esa manera, se mejora el rendimiento de carga. Si elige implementar [email protected], cada vez que un visitante solicite recuperar contenido para su sitio web, primero tendrá que pasar por esta función.

Si tuviera que modificar [email protected] para que funcione solo si el usuario proporciona una contraseña correcta, tiene más o menos una capa de protección de contraseña para su sitio web.

Esa es la idea básica detrás de este método de seguridad de CloudFront.

ppwp-lambda-borde

Paso 1: implementar la función [email protected]

[email protected] es una función de Lambda que se implementa solo en la región us-east-1 (Norte de Virginia). Entonces, para implementarlo, deberá iniciar sesión en la región correcta:

  1. Inicie sesión en su cuenta de AWS, luego haga clic en Crear función .
  2. Se le pedirá que ingrese el nombre de la función. Elige algo básico como BasicAuth . Como tiempo de ejecución, elija Node.js 12.x.
  3. Finalice la creación presionando el botón Crear función .
  4. Ahora verá un archivo llamado index.js en la ventana Código de función . Haga clic en él y verá un código Lambda predeterminado. Reemplácelo con este código personalizado:
 'uso estricto';

exportaciones.handler = (evento, contexto, devolución de llamada) => {

// credenciales de autenticación
var i = 0, authStrings = [], authCredentials = [
'usuario1: contraseña de usuario',
];

// construir cadenas de autenticación básicas
authCredentials.forEach(elemento => {
authStrings[i] = "Básico" + new Buffer(elemento).toString('base64');
yo++;
}
);

// obtener solicitud y encabezados de solicitud
const solicitud = evento.Registros[0].cf.solicitud;
encabezados const = request.headers;

// requiere autenticación básica
if (tipo de encabezados.autorización == 'indefinido' ||
!authStrings.includes(headers.autorización[0].valor)) {

respuesta constante = {
estado: '401',
statusDescription: 'No autorizado',
cuerpo: 'No autorizado',
encabezados: {
'www-authenticate': [ {clave: 'WWW-Authenticate',
valor: 'Reino básico="Autenticación"'} ]
},
};

devolución de llamada (nulo, respuesta);
}

// continuar el procesamiento de la solicitud si se aprobó la autenticación
devolución de llamada (nulo, solicitud);
};

La credencial de inicio de sesión predeterminada se almacena en esta función en la línea:

 'usuario1: contraseña de usuario',

El formato es “cuenta:contraseña” . Puedes cambiarlo por lo que quieras. Además, también puede agregar más credenciales de inicio de sesión duplicando esta línea.

5. Una vez que se haya reemplazado el código personalizado, haga clic en Implementar para enviar el código.

6. Navegue hasta el menú Acciones en la parte superior, haga clic en Publicar nueva versión y luego seleccione Publicar . No cambie ninguna configuración allí.

7. Localice la cadena de ARN en la parte superior derecha de la pantalla y cópiela. Este paso es crucial. La cadena de ARN se ve así:

 arn:aws:lambda:us-east-1:XXXXXXXXXXXX:function:basicAuth:1

Paso 2: configurar la relación de confianza

  1. Vaya a la consola de IAM e inicie sesión.
  2. Ingrese el nombre de su función [email protected] ( BasicAuth en el paso anterior).
  3. Busque la pestaña Relaciones de confianza y haga clic en Editar . Reemplace el código interior con esto:
 {
"Versión": "2012-10-17",
"Declaración": [
{
"Efecto": "Permitir",
"Director de escuela": {
"Servicio": [
"lambda.amazonaws.com",
"edgelambda.amazonaws.com"
]
},
"Acción": "sts:AssumeRole"
}
]
}

4. Finalice el proceso haciendo clic en Actualizar política de confianza .

Paso 3: configurar el comportamiento de la memoria caché

  1. Vaya a CloudFront e inicie sesión. Haga clic en el sitio web servido por CloudFront que desea bloquear con una contraseña.
  2. Elija Comportamientos , busque la casilla de verificación Patrón de ruta de URL y márquela. Continúe haciendo clic en Editar .
  3. Busque una sección llamada Asociaciones de funciones Lambda . Busque un menú desplegable y busque Seleccionar tipo de evento , luego Solicitud del espectador . Pegue la cadena de ARN que copió anteriormente en el paso 1.
  4. Presiona Sí, Editar . Después de esto, CloudFront tardará unos 5 minutos en reiniciarse y volver a cargar la nueva configuración.

Paso 4: Vuelva a revisar el sitio web

Visite su sitio web después de que CloudFront se haya reiniciado. Si recibe un aviso de inicio de sesión, lo ha logrado.

Debería verse algo como esto:

ppwp-lambda-cloudfront-password-protect

Aprovechamiento de AWS S3 y Lambda para agregar autenticación básica

En este método, utilizaremos un enfoque combinado de AWS S3 y Lambda para lograr lo mismo que hicimos anteriormente: crear un formulario de autenticación básico para el sitio web.

Paso 1: Cree un depósito S3

AWS S3 (Simple Storage Service) es la solución de almacenamiento en la nube de AWS. Le da la posibilidad de almacenar cualquier tipo de datos en los servidores de Amazon. En S3, un "depósito" contiene y controla el acceso a los objetos (los datos de su contenido).

  1. Puede crear un depósito a través de la Consola de administración de AWS. Haga clic en la pestaña S3 y luego en Crear depósito.
  2. Ingrese el nombre y la región de alojamiento (elija la más cercana a usted para facilitar la prueba). Haz clic en Crear y ¡listo!

Paso 2: Haz un archivo de prueba

  1. Cree un archivo de prueba como un archivo index.html simple con el código de inicio en él.
 <h2>Hola Mundo</h2>

2. Puede cargar este archivo en el depósito recién creado a través del menú Objetos .

Paso 3: generar una distribución de CloudFront

  1. Navegue hasta el panel de control de CloudFront y presione Crear distribución .
  2. Elija el dominio de origen como el depósito de S3 que acaba de crear. Actualice la política del depósito y la configuración de OAI (Identidad de acceso de origen) a su gusto.
  3. Ingrese el nombre del archivo que desea proteger ( index.html ) en el cuadro de objeto raíz predeterminado opcional.
  4. Cree la distribución de CloudFront y ¡listo! Ahora tiene un punto final de CloudFront.

Paso 4: Cree una función Lambda personalizada

  1. Ahora, desde su Consola de administración de AWS, navegue a la pestaña Lambda y presione Crear función .
  2. Seleccione la opción Usar un blueprint y busque CloudFront , luego elija la plantilla de generación de respuesta de CloudFront . Haga clic en Configurar una vez que lo haya seleccionado.
  3. En la siguiente pantalla, ingrese el nombre de la función (AuthenticationTest) y el nombre del rol (S3-Auth). Elija Rol de ejecución como Crear el nuevo rol a partir de las plantillas de políticas de AWS .
  4. A continuación, pegue los detalles del punto final de CloudFront que acaba de crear en el cuadro Distribución . En Comportamiento de caché , déjelo como * . Y, por último, en el evento de CloudFront , seleccione Solicitud del espectador .
  5. Haga clic en Implementar para crear la nueva función.

Paso 5: Modifique la función Lambda

  1. Reemplace el código Lambda predeterminado con este código personalizado.
 'uso estricto';
exportaciones.handler = (evento, contexto, devolución de llamada) => {

// Obtener solicitud y encabezados de solicitud
const solicitud = evento.Registros[0].cf.solicitud;
encabezados const = request.headers;

// Configurar autenticación
const authUser = 'nombre de usuario';
const authPass = 'contraseña';

// Construir la cadena de autenticación básica
const authString = 'Básico' + new Buffer(authUser + ':' + authPass).toString('base64');

// Requerir autenticación básica
if (tipo de encabezados.autorización == 'indefinido' || encabezados.autorización[0].valor != authString) {
const body = 'No autorizado';
respuesta constante = {
estado: '401',
statusDescription: 'No autorizado',
cuerpo cuerpo,
encabezados: {
'www-authenticate': [{clave: 'WWW-Authenticate', value:'Basic'}]
},
};
devolución de llamada (nulo, respuesta);
}

// Continuar el procesamiento de la solicitud si se aprobó la autenticación
devolución de llamada (nulo, solicitud);
};

Puede cambiar el nombre de usuario y la contraseña a su gusto.

2. Haga clic en Implementar en la parte superior para guardar el código. Luego, vaya a Acciones e Implemente en [email protected] para insertar el código.

3. Pegue la dirección del extremo de CloudFront en el cuadro Distribución , deje el comportamiento de la memoria caché como * y seleccione el evento de CloudFront como Solicitud del espectador . Una vez hecho esto, se creará un nuevo disparador de CloudFront.

4. Luego, despliéguelo y espere 5 minutos.

5. Visite su sitio web nuevamente. Ahora debería presentarle un aviso de inicio de sesión, cortesía del sistema de autenticación de CloudFront.

Aproveche al máximo la función de protección con contraseña de CloudFront

Hay muchas razones por las que un administrador web querría bloquear su sitio web. Podría deberse a que su sitio web necesita mantenimiento, mayor seguridad o protección contra el acceso no autorizado.

Cualquiera que sea el caso, espero que esta guía pueda ayudarlo a implementar con éxito un esquema de contraseña utilizando la protección de contraseña de CloudFront.

Hay otra forma de proteger con contraseña un sitio web: usando PPWP Pro. ¡Echale un vistazo!