-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
314 lines (277 loc) · 17.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generador de Contraseñas Seguras</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="language-selector">
<a href="index.html" id="es-lang">ES</a>
<a href="index_eng.html" id="en-lang">ENG</a>
</div>
<div class="dark-mode-switch">
<div class="switch">
<label>
<input type="checkbox" id="darkModeToggle">
<span class="lever"></span>
<i class="material-icons">brightness_4</i>
</label>
</div>
</div>
<div class="menu-icon" onclick="toggleMenu()" aria-label="Abrir menú lateral" tabindex="0" role="button">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="sideMenu" class="side-menu">
<h3><i class="material-icons">stars</i>Otros Proyectos</h3>
<ul>
<li><a href="https://www.ghu.life" target="_blank"><i class="material-icons">account_circle</i>GHU</a></li>
</ul>
<h3><i class="material-icons">article</i>Artículos</h3>
<ul>
<li><a href="#que-es-entropia">¿Qué es la entropía?</a></li>
<li><a href="#que-es-fuerza-bruta">¿Qué es la fuerza bruta?</a></li>
<li><a href="#consejos-crear-contraseñas">Consejos de seguridad</a></li>
</ul>
</div>
<div class="container">
<h1 id="generador-de-contraseñas-seguras" class="center-align blue-text text-darken-2">Generador de Contraseñas Seguras</h1>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h2 id="lock-cómo-quieres-generar-la-contraseña-lock" class="center-align blue-text text-darken-2">
<i class="material-icons">lock</i> ¿Cómo quieres generar la contraseña? <i class="material-icons">lock</i>
</h2>
<div class="row">
<div class="col s12 input-field">
<input type="number" id="length" name="length" min="14" value="14" onchange="updateLengthValue(this.value)">
<label for="length" class="password-length-label">Longitud de la Contraseña:</label>
<span id="length-warning" class="warning-text" style="display: none;"></span>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="lowercase" checked onchange="toggleOtherOptions('lowercase')">
<span class="lever blue darken-2"></span>
Minúsculas (a-z)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="uppercase" checked onchange="toggleOtherOptions('uppercase')">
<span class="lever blue darken-2"></span>
Mayúsculas (A-Z)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="numbers" checked onchange="toggleOtherOptions('numbers')">
<span class="lever blue darken-2"></span>
Números (0-9)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="symbols" checked onchange="toggleOtherOptions('symbols')">
<span class="lever blue darken-2"></span>
Símbolos (!@#$%^&*)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="brackets" onchange="toggleOtherOptions('brackets')">
<span class="lever blue darken-2"></span>
Paréntesis ([]{}())
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="high-ansi" onchange="toggleOtherOptions('high-ansi')">
<span class="lever blue darken-2"></span>
Caracteres ANSI altos (±¥µç)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="words" onchange="toggleWordCount()">
<span class="lever blue darken-2"></span>
Palabras (ej., parturición-=-quirográfico-=-tricentenarios)
</label>
</div>
</div>
<div id="word-options-row" style="display:none;">
<div class="row">
<div class="col s12 input-field">
<input type="number" id="word-count" name="word-count" min="3" value="3">
<label for="word-count">Número de Palabras</label>
</div>
</div>
<div class="row">
<div class="col s12 input-field">
<select id="language-select">
<option value="en">🇬🇧 Inglés</option>
<option value="es">🇪🇸 Español</option>
<option value="fr">🇫🇷 Francés</option>
<option value="de">🇩🇪 Alemán</option>
<option value="it">🇮🇹 Italiano</option>
</select>
<label>Elige idioma</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h2 id="mouse-mueve-el-ratón-para-generar-la-contraseña" class="center-align blue-text text-darken-2">
<i class="material-icons">mouse</i> Mueve el ratón para generar la contraseña
</h2>
<div id="password-generator-area" class="password-generator-area" aria-live="polite">
<ul>
<li><i class="material-icons">sync</i> Mueve el ratón dentro del cuadro para generar la contraseña</li>
<li><i class="material-icons">content_copy</i> Haz clic en el cuadro para copiar la contraseña al portapapeles</li>
</ul>
</div>
<div id="generated-password" class="generated-password-text center-align"></div>
<div class="password-info">
<div class="password-stats-container">
<div class="entropy-container">
<span class="entropy-label">Entropía:</span>
<span id="entropia-valor"></span>
</div>
<div class="crack-time-container">
<span class="crack-time-label">Tiempo estimado de craqueo:</span>
<span id="tiempo-craqueo"></span>
</div>
<div class="strength-container">
<span class="strength-label">Fortaleza:</span>
<span id="fortaleza-valor"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<div class="row center-align">
<div class="col s12">
<button id="copy-button" class="btn waves-effect waves-light blue darken-2">COPIAR CONTRASEÑA</button>
</div>
</div>
<div class="row center-align">
<div class="col s12">
<button id="generate-button" class="btn waves-effect waves-light blue darken-2">GENERAR CONTRASEÑA</button>
</div>
</div>
</div>
</div>
</div>
<div id="que-es-entropia" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">¿Qué es la entropía de una contraseña?</h3>
<p>La entropía de una contraseña es una medida de su fortaleza o imprevisibilidad. En el contexto de la seguridad informática, la entropía se expresa en bits y representa la cantidad de información o aleatoriedad contenida en una contraseña.</p>
<p>Una contraseña con alta entropía es más difícil de adivinar o descifrar mediante ataques de fuerza bruta o de diccionario. La entropía se calcula utilizando la siguiente fórmula:</p>
<div class="formula">
<p><strong>E = L * log<sub>2</sub>(R)</strong></p>
<p>Donde:</p>
<ul>
<li><strong>E</strong> es la entropía en bits</li>
<li><strong>L</strong> es la longitud de la contraseña</li>
<li><strong>R</strong> es el tamaño del conjunto de caracteres posibles</li>
</ul>
</div>
<p>Por ejemplo, para una contraseña de 8 caracteres que utiliza letras minúsculas y mayúsculas (52 caracteres) y números (10 caracteres), el cálculo sería:</p>
<div class="formula">
<p>E = 8 * log<sub>2</sub>(62) ≈ 47.6 bits</p>
</div>
<p>En el caso de contraseñas basadas en palabras, el cálculo es ligeramente diferente. Se utiliza el tamaño del diccionario en lugar del conjunto de caracteres:</p>
<div class="formula">
<p>E = N * log<sub>2</sub>(D)</p>
<p>Donde:</p>
<ul>
<li><strong>N</strong> es el número de palabras en la contraseña</li>
<li><strong>D</strong> es el tamaño del diccionario</li>
</ul>
</div>
<p>Una mayor entropía indica una contraseña más segura. En general, se recomienda una entropía mínima de 60 bits para una seguridad adecuada, aunque para información altamente sensible, se pueden requerir valores más altos.</p>
</div>
</div>
</div>
<div id="que-es-fuerza-bruta" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">¿Qué es la fuerza bruta y sus variantes?</h3>
<h4><i class="material-icons">security</i> Ataque de fuerza bruta</h4>
<p>Un ataque de fuerza bruta es un método de descifrado de contraseñas que consiste en probar sistemáticamente todas las combinaciones posibles de caracteres hasta encontrar la correcta. Aunque es un método garantizado para encontrar cualquier contraseña, puede ser extremadamente lento para contraseñas largas y complejas.</p>
<h4><i class="material-icons">content_paste</i> Credential Stuffing</h4>
<p>El credential stuffing es una técnica que utiliza pares de nombres de usuario y contraseñas filtrados de una brecha de seguridad para intentar acceder a otras cuentas. Este método explota la tendencia de los usuarios a reutilizar las mismas credenciales en múltiples sitios.</p>
<h4><i class="material-icons">book</i> Ataque de diccionario</h4>
<p>Un ataque de diccionario utiliza una lista predefinida de palabras y frases comunes para intentar adivinar la contraseña. Es más rápido que la fuerza bruta pura, pero menos exhaustivo. Es especialmente efectivo contra contraseñas que utilizan palabras comunes.</p>
<h4><i class="material-icons">shuffle</i> Ataques híbridos de fuerza bruta</h4>
<p>Los ataques híbridos combinan elementos de los ataques de diccionario y de fuerza bruta. Pueden comenzar con palabras de un diccionario y luego aplicar transformaciones comunes (como añadir números al final) o combinar palabras del diccionario con secuencias de caracteres generadas por fuerza bruta.</p>
<h4><i class="material-icons">flip_to_back</i> Ataques de fuerza bruta inversos</h4>
<p>En lugar de intentar descifrar una contraseña específica, los ataques de fuerza bruta inversos generan hashes de contraseñas comunes y los comparan con una base de datos de hashes robados. Este método es eficaz para descifrar múltiples contraseñas simultáneamente si se tiene acceso a una base de datos de hashes.</p>
<h4><i class="material-icons">memory</i> Aceleración de fuerza bruta por GPU</h4>
<p>La aceleración por GPU utiliza el poder de procesamiento de las tarjetas gráficas para realizar ataques de fuerza bruta mucho más rápidamente que con CPUs tradicionales. Las GPUs son particularmente eficientes en realizar múltiples cálculos simples en paralelo, lo que las hace ideales para probar un gran número de combinaciones de contraseñas rápidamente.</p>
</div>
</div>
</div>
<div id="consejos-crear-contraseñas" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">Consejos para Crear Contraseñas Seguras</h3>
<ul>
<li><i class="material-icons">text_fields</i> Usa una combinación de letras mayúsculas y minúsculas.</li>
<li><i class="material-icons">dialpad</i> Incluye números y símbolos.</li>
<li><i class="material-icons">person_outline</i> Evita usar información personal como fechas de nacimiento o nombres.</li>
<li><i class="material-icons">block</i> No reutilices contraseñas en diferentes sitios web.</li>
<li><i class="material-icons">update</i> Cambia tus contraseñas regularmente.</li>
</ul>
</div>
</div>
</div>
<div class="row center-align">
<div class="col s12">
<a href="https://es.wikipedia.org/wiki/Seguridad_de_contrase%C3%B1a" class="blue-text text-darken-2" target="_blank">Ir al artículo sobre Seguridad de Contraseñas</a>
</div>
</div>
</div>
<div id="notification" class="notification" style="display: none;">
¡Contraseña copiada al portapapeles!
</div>
<footer class="page-footer blue darken-2">
<div class="container">
Genera Contraseñas y Contraseñas Seguras con ❤️ por 00B en 2024
</div>
</footer>
<script src="entropia.js"></script>
<script src="palabras.js"></script>
<script src="script.js"></script>
<script src="modoNoche.js"></script>
</body>
</html>