Me está costando encontrar una respuesta a mi pregunta, y sin duda es porque no sé qué buscar, pero espero que alguien aquí pueda ayudar :)
Implementé el casco usando un nonce en mi aplicación de nodo que aloja una aplicación de reacción.
Implementación de casco en la aplicación de nodo:
app.use((req, res, next) => { res.locals.cspNonce = crypto.randomBytes(16).toString("hex"); next(); }); app.use( helmet.contentSecurityPolicy({ useDefaults: true, directives: { scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`], styleSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`], }, }) );El único lugar en toda mi aplicación de reacción donde estoy importando scripts y hojas de estilo es el encabezado de mi página index.html. Entonces, mi pregunta es, ¿qué debo agregar al script y las etiquetas de enlace a continuación para poder usar el CSP con nonce correctamente?
reaccionar índice de la aplicación.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" nonce="What to put here, if it even goes here?" /> <script type="text/javascript" src="https://code.jquery.com/jquery.min.js" nonce="How do I implement the res.locals.cspNonce here?" > </script> <title>Some title</title>El nonce debe inyectarse a través de plantillas, de modo que el nonce que siempre se genera al acceder a una ruta esté siempre actualizado.
Las aplicaciones de React son en su mayoría SPA donde el contenido de la página no se recarga totalmente desde el servidor, pero se actualiza parcialmente a través de XMLHttpRequest().
Por lo tanto, no hay posibilidad técnica de actualizar el valor de 'nonce' cuando las partes de la página se "recargan", porque <meta http-equiv='Content-Security-Pilicy'...> en la sección <head> no se puede cambiado cuando la página "actualiza" de esa manera.
Por esta razón, React usa 'hash-values' en lugar de nonces.
El 'nonce-value' en las aplicaciones React solo se puede usar cuando la representación del lado del servidor se usa para toda la página, lo que tiene muchos inconvenientes y se usa muy raramente. Y en este caso, la aplicación perderá todos los beneficios de React.
Mantenedor de casco aquí.
Debe establecer el atributo nonce de las etiquetas <link> y <script> . Por ejemplo, si el nonce generado es abc123def456 , hará algo como esto:
<script nonce="abc123def456" src="https://example.com/script.js"></script>Debido a que los nonces solo se usan una vez, no puede usar nonces con HTML estático. En otras palabras, necesita la representación de HTML del lado del servidor para usar los nonces de CSP.
Si eso es un problema para ti, no tienes que usar nonces. Puede haber otras formas de solucionar el problema, como usar hashes CSP para scripts en su lugar.