0xHaise - Blog

autenticacion-con-estadoysinestado

Mon, 02 Mar 2026 00:00:00 GMT

Autenticación Stateless vs Stateful

Durante mucho tiempo, la autenticación fue stateful: el usuario ingresaba sus credenciales, el servidor creaba un ID de sesión y lo almacenaba del lado del servidor. Todos los datos del usuario se guardaban en el servidor, y cualquier servicio que necesitara esos datos debía consultar primero el almacén. Esto era aceptable porque al centralizar la información, era menos probable que los datos se corrompieran. Sin embargo, generó problemas en arquitecturas complejas, ya que consultar el almacén en cada operación resultaba costoso. De ahí surgió la idea de la autenticación Stateless.

Autenticación Basada en Cookies/Sesión (Stateful)

La autenticación basada en cookies ha sido el método predeterminado y probado para manejar la autenticación de usuarios por mucho tiempo. Es stateful, lo que significa que se debe mantener un registro de autenticación o sesión tanto en el servidor como en el cliente. El servidor necesita rastrear las sesiones activas en una base de datos, mientras que en el frontend se crea una cookie que contiene el identificador de sesión.

Flujo de autenticación con Cookies

concookies

sequenceDiagram
    actor Usuario
    participant Cliente
    participant Servidor
    participant BaseDeDatos

    Usuario->>Cliente: Ingresa credenciales
    Cliente->>Servidor: Envía credenciales (POST /login)
    Servidor->>BaseDeDatos: Verifica credenciales
    BaseDeDatos-->>Servidor: Credenciales válidas
    Servidor->>BaseDeDatos: Crea y almacena sesión
    Servidor-->>Cliente: Responde con Cookie (session_id)
    Cliente->>Cliente: Almacena cookie en el navegador

    Note over Usuario,BaseDeDatos: Solicitudes subsiguientes

    Cliente->>Servidor: Solicitud + Cookie (session_id)
    Servidor->>BaseDeDatos: Verifica session_id
    BaseDeDatos-->>Servidor: Sesión válida
    Servidor-->>Cliente: Responde con datos

    Note over Usuario,BaseDeDatos: Cierre de sesión

    Cliente->>Servidor: Logout
    Servidor->>BaseDeDatos: Elimina sesión
    Servidor-->>Cliente: Elimina cookie

Pasos:

El usuario ingresa sus credenciales de inicio de sesión.
El servidor verifica que las credenciales sean correctas y crea una sesión que luego almacena en una base de datos.
Se coloca una cookie con el ID de sesión en el navegador del usuario.
En solicitudes posteriores, el ID de sesión se verifica contra la base de datos y, si es válido, se procesa la solicitud.
Una vez que el usuario cierra sesión, la sesión se destruye tanto en el cliente como en el servidor.

Autenticación Basada en Tokens (Stateless)

La autenticación basada en tokens es stateless. El servidor no lleva registro de qué usuarios están conectados ni qué JWTs han sido emitidos. En cambio, cada solicitud al servidor va acompañada de un token que el servidor usa para verificar la autenticidad. El token generalmente se envía como un encabezado Authorization adicional en la forma Bearer {JWT}, aunque también puede enviarse en el cuerpo de una solicitud POST o como parámetro de consulta.

Flujo de autenticación con JWT (Token)

conjwt

sequenceDiagram
    actor Usuario
    participant Cliente
    participant Servidor

    Usuario->>Cliente: Ingresa credenciales
    Cliente->>Servidor: Envía credenciales (POST /login)
    Servidor->>Servidor: Verifica credenciales y firma el JWT
    Servidor-->>Cliente: Retorna JWT firmado
    Cliente->>Cliente: Almacena JWT (localStorage / cookie)

    Note over Usuario,Servidor: Solicitudes subsiguientes

    Cliente->>Servidor: Solicitud + Header: Authorization: Bearer {JWT}
    Servidor->>Servidor: Decodifica y verifica el JWT
    Servidor-->>Cliente: Responde con datos

    Note over Usuario,Servidor: Cierre de sesión

    Cliente->>Cliente: Elimina JWT del almacenamiento local
    Note right of Servidor: No se necesita contactar al servidor

Pasos:

El usuario ingresa sus credenciales de inicio de sesión.
El servidor verifica que las credenciales sean correctas y devuelve un token firmado.
El token se almacena del lado del cliente, comúnmente en localStorage, aunque también puede almacenarse en sessionStorage o en una cookie.
Las solicitudes posteriores al servidor incluyen este token como un encabezado Authorization adicional.
El servidor decodifica el JWT y, si el token es válido, procesa la solicitud.
Una vez que el usuario cierra sesión, el token se destruye del lado del cliente; no se necesita interacción con el servidor.

Ventajas del enfoque Stateless

Menor uso de memoria: Imagina si Google almacenara información de sesión de cada uno de sus usuarios.
Facilita el uso de granjas de servidores: Si necesitas datos de sesión con más de un servidor, debes sincronizarlos, normalmente mediante una base de datos. Con tokens esto no es necesario.
Reduce problemas de expiración de sesión: Las sesiones que expiran pueden causar errores difíciles de encontrar y reproducir. Las aplicaciones sin sesión no sufren de esto.
Enlazabilidad de URLs: Algunos sitios almacenan el ID de lo que el usuario está viendo en la sesión, lo que impide compartir URLs directamente. Con tokens esto no ocurre.

Desventajas del enfoque Stateless

Clave secreta comprometida: Lo mejor y lo peor del JWT es que depende de una sola clave. Si un desarrollador o administrador descuidado o malintencionado la filtra, ¡todo el sistema queda comprometido!
No se puede gestionar al cliente desde el servidor: No es posible forzar el cierre de sesión de un usuario de forma remota (por ejemplo, si le roban el móvil).
No se pueden enviar mensajes a los clientes: Al no haber registro de clientes conectados en la base de datos, no es posible hacer push de mensajes a todos ellos.
Los algoritmos criptográficos pueden quedar obsoletos: El JWT depende completamente del algoritmo de firma, y en el pasado varios algoritmos han sido deprecados.
Sobrecarga de datos: El tamaño del token JWT es mayor que el de un token de sesión normal. Cuantos más datos se añadan, más grande se vuelve linealmente.
Mayor complejidad de comprensión: El JWT usa algoritmos criptográficos de firma para verificar los datos. Si el desarrollador no los entiende bien, puede introducir vulnerabilidades de seguridad.

arquitectura-navegadores-web

Sat, 25 Oct 2025 00:00:00 GMT

¿Cómo Funcionan los Navegadores Web?

Comprender cómo funciona un navegador web es esencial para cualquier desarrollador. Esta herramienta no solo interpreta el código que escribimos, sino que lo transforma en interfaces interactivas que los usuarios pueden ver y utilizar.

¿Qué es un navegador web?

Un navegador web es una aplicación que permite acceder a sitios web. Cuando se introduce una dirección como https://www.google.com, el navegador se comunica con el servidor correspondiente, solicita los recursos necesarios (HTML, CSS, JavaScript, imágenes, etc.) y presenta la página al usuario de forma visual.

Algunos de los navegadores más utilizados son Google Chrome, Safari, Mozilla Firefox y Microsoft Edge. Actualmente, Google Chrome domina el mercado con aproximadamente un 65 % de uso global, seguido por Safari con un 18 %.

¿Qué ocurre internamente en el navegador?

Aunque la interfaz del navegador parece simple, internamente ejecuta múltiples procesos complejos. Estos procesos pueden dividirse en los siguientes componentes:

Interfaz de usuario
Motor del navegador (Browser Engine)
Persistencia de datos
Motor de renderizado (Rendering Engine)
Red (Networking)
Intérprete de JavaScript
Backend de interfaz de usuario (UI Backend)

Interfaz de usuario

Es todo aquello visible en el navegador que no forma parte directa del contenido del sitio web. Incluye:

Barra de direcciones
Botones de navegación (atrás, adelante)
Menús de configuración
Gestión de pestañas

Motor del navegador

El motor del navegador actúa como coordinador entre la interfaz de usuario, el motor de renderizado y los distintos subsistemas. Interpreta las acciones del usuario (como hacer clic en "Atrás") y determina qué procesos ejecutar. También gestiona configuraciones internas y herramientas para desarrolladores.

Persistencia de datos

El navegador puede almacenar datos localmente en el dispositivo del usuario a través de diversos mecanismos:

Cookies: datos pequeños (hasta 4 KB), enviados con cada solicitud HTTP.
Local Storage / Session Storage: almacenamiento clave-valor con capacidad de hasta 5 MB.
IndexedDB: base de datos NoSQL, asincrónica, adecuada para estructuras complejas y operaciones CRUD.
CacheStorage: almacenamiento de respuestas HTTP, utilizado comúnmente por aplicaciones offline (como las PWAs).

Motor de renderizado

Este componente es responsable de mostrar el contenido en pantalla. Toma los archivos HTML, CSS y JavaScript y los convierte en una página visual e interactiva.

Algunos motores de renderizado conocidos son:

Blink (utilizado por Chrome, Edge y Opera)
WebKit (utilizado por Safari)
Gecko (utilizado por Firefox)

Etapas del proceso de renderizado

1. Análisis (Parsing)

El archivo HTML se convierte en el DOM (Document Object Model).
El CSS se transforma en el CSSOM (CSS Object Model).
El JavaScript es interpretado por el motor correspondiente (por ejemplo, V8 en Chrome).

Nota: si el HTML contiene errores, el navegador puede corregirlos automáticamente mediante un parser tolerante.

2. Árbol de renderizado

Se construye el árbol de renderizado combinando el DOM y el CSSOM. Este árbol contiene únicamente los elementos visibles y determina cómo deben mostrarse.

Se consideran estilos como:

display: none
display: block
display: inline
display: inline-block
display: list-item

3. Diseño (Layout)

En esta fase se calculan el tamaño y la posición de cada elemento del árbol de renderizado.

Puede tratarse de:

Diseño global: se recalcula toda la estructura, por ejemplo, al redimensionar la ventana.
Diseño incremental: solo se recalculan las partes afectadas (sistema de "dirty bits").

4. Pintado (Paint)

Una vez que se ha determinado qué y dónde se va a mostrar, el navegador procede a pintar cada elemento en pantalla en el orden correspondiente:

Color de fondo
Imagen de fondo
Bordes
Elementos hijos
Contornos

Este proceso puede ser total o parcial, dependiendo de los cambios ocurridos.

Intérprete de JavaScript

Cada navegador incluye su propio motor para interpretar y ejecutar JavaScript. Algunos ejemplos son:

V8 (Chrome)
Nitro (Safari)
SpiderMonkey (Firefox)

Estos motores permiten modificar dinámicamente el DOM y reaccionar a eventos del usuario.

Backend de interfaz de usuario (UI Backend)

Este subsistema se encarga del renderizado de componentes estándar de la interfaz, tales como:

Campos de entrada
Botones
Menús desplegables
Cuadros de texto

Está estrechamente vinculado al sistema operativo para representar correctamente los controles nativos.

Conclusión

El navegador web es una plataforma altamente sofisticada. Su funcionamiento implica la coordinación de múltiples motores, procesos asincrónicos y estructuras internas. Comprender este flujo no solo ayuda a escribir código más eficiente, sino que también permite depurar errores, optimizar rendimiento y tomar decisiones más informadas en el desarrollo de aplicaciones web.

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili