Turbo executes scripts that violate CSP if csp-nonce meta tag is present

[Lief-PW]

Context

If a Page has Content Security Policy (CSP) with a nonce value for scripts only script with the nonce should be executed. This means that if there is a XSS vulnerability in a page, the XSS scripts will not run.

Some script loaders will add a nonce value to scripts so that they can run if there is a <meta name="csp-nonce">. This is ok for loading a known list of safe scripts, but circumvents the purpose of a CSP if doing this for any script in some HTML.

Problem

If a page has a <meta name="csp-nonce"> tag turbo will apply that nonce to all scripts. This means that scripts that would be blocked on a browser page load will execute if that page is loaded with turbo. This means that pages are no longer protected from XSS by the CSP.

Expected Behaviour

When a CSP has a nonce value for scripts and a page has a csp-nonce meta tag, scripts should only be executed if they have a valid nonce.

Posible Solution

Update src/utils.js:activateScriptElement to preserve the original scripts nonce.

export function activateScriptElement(element) {
  if (element.getAttribute("data-turbo-eval") == "false") {
    return element
  } else {
    const createdScriptElement = document.createElement("script")
      createdScriptElement.textContent = element.textContent
      createdScriptElement.async = false
      copyElementAttributes(createdScriptElement, element)
      if (element.nonce) {
          createdScriptElement.setAttribute('nonce', element.nonce)
      }
    return createdScriptElement
  }
}

[dari-us]

Same here, this is a really annoying and subtle security issue as it completely invalidates XSS protection for Turbo Streams.

To "fix", I removed the code that sets the Nonce in activateScriptElement since in Rails the default Nonce is stable per session, so the server always delivers the same Nonce.

In scenarios where the Nonce is truly random, the correct way to handle Nonces in Turbo Streams would be to check the Nonce sent in the server response against all Nonces of the <script> elements of the same response and replace only the matching Nonces with the current document's Nonce to activate the <script> elements and maintaining XSS protection.

I tried something like this by using Turbo's turbo:before-stream-render, but that event leaves a lot to be desired (i.e. it is neither possible to access the response object to read the Nonce, nor is it possible to alter the content of the Turbo Stream in event.detail.newStream).

If anyone knows how to solve this via a Turbo event, let me know (preferably with support for truly random Nonces).