Los sitios web estáticos están aumentando nuevamente. En los primeros días de Internet HTML, CSS con algo de JavaScript es todo el sitio web, desde entonces se han desarrollado una serie de marcos de back-end como Django, Larvel, Ruby en Ralis junto con WordPress que ahora potencia un tercio de los sitios web también han ganado popularidad. Los creadores de sitios web también se explotan para que cualquiera pueda tener páginas web, ya sea que tenga habilidades técnicas o no.
El desarrollo de todas estas nuevas tecnologías también presentó nuevos desafíos de seguridad. Los backends de autenticación mal codificados, la reutilización de contraseñas, el uso limitado de la autenticación multifactor para complementos obsoletos de WordPress, las bibliotecas de JavaScript vulnerables y los proveedores de alojamiento poco confiables hicieron que la seguridad fuera un aspecto importante de la web. Como los desarrolladores siempre tienden a resolver los problemas existentes para crear otros nuevos para resolverlos en el futuro, la mayoría de los desarrolladores volvieron a los buenos sitios web estáticos pero de una manera diferente.
pila de atascos:
JAM significa API de JavaScript y marcado. El término fue acuñado por Mathias Biilmann , fundador de Netlify (un host popular de JAMstack, también pionero de JAMstack). En esta palabra, «JAM stack es una arquitectura de sitio web moderna basada en JavaScript del lado del cliente, API reutilizables y marcado preconstruido» .
- JavaScript proporciona interactividad y naturaleza dinámica para el sitio web.
- Las API ayudan a agregar algunas capacidades del lado del servidor de forma segura
- El marcado ayuda a generar un sitio web a partir de archivos de origen, como archivos de descuento, plantillas HTML y CSS, utilizando un generador de sitios estáticos como Jekyll, Gatsby, Hugo y más.
Las razones más populares para la adaptación de JAMstack por parte de los desarrolladores son
- Rendimiento más rápido porque no hay representación del lado del servidor y la mayor parte del HTML ya está preconstruido, las páginas web se cargan más rápido usando CDN
- Dado que no hay un servidor para procesarlo, las páginas web son más seguras.
- Menos costoso que los sitios web normales, la mayoría de los proveedores de alojamiento estático como Netlify, Vercel, Render, GitHub Pages, GitLab Pages, Cloudflare Pages tienen un plan gratuito que es más que suficiente para la mayoría de los desarrolladores.
- La escalabilidad es fácil porque todo lo que necesita es actualizar el ancho de banda que estamos pagando
Pero una de las más útiles que generalmente extrañamos al usar sitios web estáticos es la protección con contraseña, mientras que muchos proveedores ofrecen protección con contraseña, generalmente tiene un precio, pero nuevamente, somos desarrolladores, siempre tratamos de encontrar una salida. Los sitios web estáticos incluyen JavaScript. También utilizaremos una biblioteca de JavaScript Staticrypt de Robinmoisson para proteger nuestro sitio web estático.
Este artículo requiere que nodejs y npm estén instalados en su computadora, puede obtener más información al respecto en Instalación de Node.js en Linux e Instalación de Node.js en Windows
Instalación de Staticcrypt:
StatiCrypt genera una página estática protegida con contraseña utilizando AES -256 utilizando una biblioteca crypto-js que se puede descifrar en el navegador. Puede cargar la página cifrada como un archivo normal en su sitio web y cuando se solicite el archivo, aparecerá JavaScript. usuarios para obtener una contraseña, descifrar la página y cargar su HTML.
Abra su PowerShell o terminal e instale Staticrypt usando npm
npm -g install staticrypt
Para este artículo, he tomado una plantilla HTML, en general, el sitio web sin protección con contraseña se carga normalmente como se muestra a continuación
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <title>Password Protect Site using staticrypt</title> </head> <body class="text-center"> <div class="jumbotron text-center"> <h1>Welcome to GeeksForGeeks</h1> </div> <div class="card-body"> <h4 class="h4 card-title"> This article explains a simple technique to password protect static websites </h4> </div> <div class="jumbotron text-center"> <h6 class="h6 card-text">Thank You for Reading</h6> </div> </body> </html>
Sin protección de contraseña
Ahora vaya al directorio de su proyecto y abra la terminal desde el directorio y escriba el siguiente comando
staticrypt index.html geeksforgeeks -o index.html
El comando es el siguiente
- staticrypt es el nombre de la biblioteca
- index.html es el archivo de índice de nuestro sitio web, el archivo que necesitamos cifrar
- geeksforgeeks es la contraseña del sitio web, puede usar cualquier contraseña que desee
- -o index.html es una forma de indicarle que nombre el archivo de salida como index.html
Tan pronto como ejecutemos el comando anterior, se nos pedirá una contraseña al acceder al sitio web.
solicitud de contraseña
Tan pronto como proporcionemos la contraseña correcta, se nos dará acceso a esa página.
Si no desea que la plantilla de contraseña predeterminada cree su propio formulario HTML y agregue el siguiente JavaScript.
Javascript
var keySize = 256;
var iterations = 1000;
function access(protectedText, pass) {
var salt = CryptoJS.enc.Hex.parse(protectedText.substr(0, 32));
var iv = CryptoJS.enc.Hex.parse(protectedText.substr(32, 32));
var protected = protectedText.substring(64);
var key = CryptoJS.PBKDF2(pass, salt, {
keySize: keySize / 32,
iterations: iterations,
});
var decrypted = CryptoJS.AES.decrypt(protected, key, {
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC,
}).toString(CryptoJS.enc.Utf8);
return decrypted;
}
document.getElementById(
"static-pass-form").addEventListener("submit", function (e) {
e.preventDefault();
var passphrase = document.getElementById("static-pass").value,
// Add encrypt string of the Passphrase
protectedText ="Encrypt Passphrase",
protectedHMAC = protectedText.substring(0, 64),
protectedHTML = protectedText.substring(64),
decryptedHMAC = CryptoJS.HmacSHA256(
protectedHTML, CryptoJS.SHA256(
passphrase).toString()).toString();
// If passphrase is wrong
if (decryptedHMAC !== protectedHMAC) {
alert("Bad passphrase!");
return;
}
var plainHTML = access(protectedHTML, passphrase);
document.write(plainHTML);
document.close();
});
Reemplace el valor de protectedText con el valor de yourHTML . Puede obtener el valor de HTML utilizando esta herramienta en línea . El código completo de la plantilla HTML personalizada se encuentra a continuación
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<title>Password Protect Site using staticrypt</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"
integrity=
"sha384-lp4k1VRKPU9eBnPePjnJ9M2RF3i7PC30gXs70+elCVfgwLwx1tv5+ctxdtwxqZa7"
crossorigin="anonymous"></script>
</head>
<body class="text-center">
<form id="static-pass-form">
<div class="mb-3">
<label for="password"
class="form-label">Password</label>
<input id="static-pass"
type="password"
class="form-control"
id="Password"
aria-describedby="PasswordHelp">
<div id="PasswordHelp"
class="form-text">
You need Password to access the page.
</div>
</div>
<input type="submit"
class="btn btn-primary"
value="Access" />
</form>
<script>
var keySize = 256;
var iterations = 1000;
function access(protectedText, pass) {
var salt = CryptoJS.enc.Hex.parse(protectedText.substr(0, 32));
var iv = CryptoJS.enc.Hex.parse(protectedText.substr(32, 32))
var protected = protectedText.substring(64);
var key = CryptoJS.PBKDF2(pass, salt, {
keySize: keySize / 32,
iterations: iterations
});
var decrypted = CryptoJS.AES.decrypt(protected, key, {
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC
}).toString(CryptoJS.enc.Utf8);
return decrypted;
}
document.getElementById(
'static-pass-form').addEventListener('submit', function(e) {
e.preventDefault();
var passphrase = document.getElementById('static-pass').value,
protectedText = "Encrypt Passphrase",
protectedHMAC = protectedText.substring(0, 64),
protectedHTML = protectedText.substring(64),
decryptedHMAC = CryptoJS.HmacSHA256(
protectedHTML, CryptoJS.SHA256(
passphrase).toString()).toString();
if (decryptedHMAC !== protectedHMAC) {
alert('Bad passphrase!');
return;
}
var plainHTML = access(protectedHTML, passphrase);
document.write(plainHTML);
document.close();
});
</script>
</body>
</html>
plantilla personalizada
Si usa una plantilla predeterminada o una plantilla personalizada, obtendrá su HTML original si ingresa la contraseña correcta
Página descifrada
Publicación traducida automáticamente
Artículo escrito por kushwanthreddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA