Function activateScriptElement overwrite CSP nonce with empty string causing violation

[mildred]

There is an issue with the function activateScriptElement here that I could trace it from a CSP violation in my app. It has been called from PageRenderer function copyNewHeadScriptElements.

turbo/src/util.js

Lines 1 to 15 in 055eb8f

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

The issue is that when creating the script element, the code correctly assigns the nonce to the script element using the cspNonce variable that is correctly computed. However, later on the copyElementAttributes overrides the nonce with an empty string because the DOM attribute is an empty string (element.getAttribute('nonce') is an empty string).

This is because accessing the nonce via the DOM returns an empty string for security reasons. But at this point, the HTML has probably passed multiple stages and even element.nonce is an empty string.

The solution would be to apply the nonce after copying element attributes:

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

[mildred]

Another solution would be to change copyElementAttributes to always exclude nonce which cannot be read using DOM functions...

turbo/src/util.js

Lines 17 to 21 in 055eb8f

	function copyElementAttributes(destinationElement, sourceElement) {
	for (const { name, value } of sourceElement.attributes) {
	destinationElement.setAttribute(name, value)
	}
	}

 function copyElementAttributes(destinationElement, sourceElement) {
   for (const { name, value } of sourceElement.attributes) {
-    destinationElement.setAttribute(name, value)
+    if (name != 'nonce') destinationElement.setAttribute(name, value)
   }
 }

[mildred]

Another solution would be to remove entirely the nonce from the function elementWithoutNonce and avoid keeping an empty string

turbo/src/core/drive/head_snapshot.js

Lines 108 to 114 in 055eb8f

	function elementWithoutNonce(element) {
	if (element.hasAttribute("nonce")) {
	element.setAttribute("nonce", "")
	}
	return element
	}

This function is called from Visit.loadResponse through PageSnapshot and HeadSnapshot constructor. It removes the nonce from the head script tags, but not completely

 function elementWithoutNonce(element) {
   if (element.hasAttribute("nonce")) {
-    element.setAttribute("nonce", "")
+    element.removeAttribute("nonce")
   }
 
   return element
 }

[mildred]

Apparently, when debugging the code, it seems that the nonce can be fetched using the getAttribute DOM function. This is probably allowed in a parsed DOM node, until the node is attached to the document.