Herramientas HTML

Gratis Generador de hash CSP

Genera valores hash CSP para scripts y estilos inline. Hashea el código exacto con SHA-256, SHA-384 o SHA-512.

Cargando herramienta...

Qué es Generador de hash CSP?

A CSP hash is a base64-encoded SHA-256, SHA-384, or SHA-512 digest of an inline script or style block's exact content. When you add the hash to your CSP header as script-src 'sha256-...' or style-src 'sha256-...', the browser allows that specific inline code to run while blocking all other inline scripts or styles. This is the most secure alternative to 'unsafe-inline'.

Respuesta rápida

Use a CSP hash to allow a specific inline script or style without enabling all inline code with unsafe-inline. The hash is a cryptographic digest of the exact code content — SHA-256 is the standard. Add the hash to your CSP as script-src 'sha256-...' or style-src 'sha256-...'.

Limitaciones

  • The hash is only valid for the exact content hashed. Any whitespace, formatting, or content change produces a completely different hash and breaks the CSP allowlist.
  • Some build tools and HTML minifiers may modify inline whitespace in production, invalidating hashes generated from development code. Verify against production output.
  • CSP hashes do not work with inline event handlers (onclick, onerror) without enabling unsafe-hashes, which weakens security significantly.

Cómo usar esta herramienta

  1. Copy the exact inline script or style content from your HTML — every space, newline, and indent must match.
  2. Paste it into the text area and select the hash algorithm.
  3. Copy the hash value and add it to your CSP header or meta tag as part of script-src or style-src.

Para qué puedes usarla

  • Allow a specific inline script for a critical-path loader or analytics snippet without enabling all inline scripts.
  • Allow a small inline style block for above-the-fold critical CSS while a stylesheet loads.
  • Upgrade an existing CSP that uses unsafe-inline to hash-based allowlisting for stronger security.

Casos de uso

Ejemplos prácticos

Ejemplo

Critical-path inline style

A page needs a small inline style for the hero section above the fold. Hash the exact style block, add style-src 'sha256-...' to the CSP, and remove unsafe-inline. The browser runs only this specific style block.

Ejemplo

Inline analytics boot script

A privacy-focused site inline-loads a small analytics boot script. Hash the script, add script-src 'sha256-...', and block all other inline scripts including any that might be injected by compromised third-party resources.

Errores comunes

  • Changing even one whitespace character after generating the hash — the hash will no longer match and the script or style is blocked.
  • Using the same hash for minified and unminified versions of the same code — they produce different hashes.
  • Assuming a hash from a development environment matches the production build — code minification or templating changes the content.

Verificación

  1. Check the browser console for CSP violation reports after adding the hash — a blocked script or style shows a violation message with the expected hash.
  2. Use the browser DevTools Application panel or Security tab to inspect the active CSP policy and confirm your hash is recognized.

FAQ

Preguntas sobre Generador de hash CSP

Why does my hash stop working after I edit the inline code?

The hash is a cryptographic digest of the exact byte sequence of the inline code. Any change — adding a space, changing indentation, adding a comment, or modifying a single character — produces a completely different hash. You must regenerate the hash every time you modify the inline code. This is by design: it ensures only the exact code you approved can run.

Should I use a hash or a nonce for CSP?

Hashes are best for static inline code that rarely changes, like critical CSS or a small boot script. Nonces are better for dynamically generated inline code because a nonce changes on every page load, while a hash would need to be recomputed for every unique output. For static sites, hashes are simpler because they do not require server-side nonce generation.

What is unsafe-hashes and should I enable it?

unsafe-hashes allows hashes to be applied to inline event handlers (onclick, onerror, etc.) and javascript: URLs. This is dangerous because event handlers often contain user-influenced values. Only enable unsafe-hashes if you fully control every event handler attribute and understand that a hash match on an event handler can enable script injection if user input reaches the attribute value.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también