Merge pull request #1254 from codergeek121/use-nonce-and-content-attr…

…ibute-for-csp

Read the csp meta tag nonce attribute and fall back to content

src/core/drive/progress_bar.js

@@ -1,4 +1,4 @@
-import { unindent, getMetaContent } from "../../util"
+import { unindent, getCspNonce } from "../../util"
 
 export const ProgressBarID = "turbo-progress-bar"
 
@@ -108,8 +108,9 @@ export class ProgressBar {
     const element = document.createElement("style")
     element.type = "text/css"
     element.textContent = ProgressBar.defaultCSS
-    if (this.cspNonce) {
-      element.nonce = this.cspNonce
+    const cspNonce = getCspNonce()
+    if (cspNonce) {
+      element.nonce = cspNonce
     }
     return element
   }
@@ -119,8 +120,4 @@ export class ProgressBar {
     element.className = "turbo-progress-bar"
     return element
   }
-
-  get cspNonce() {
-    return getMetaContent("csp-nonce")
-  }
 }

src/util.js

@@ -5,7 +5,7 @@ export function activateScriptElement(element) {
     return element
   } else {
     const createdScriptElement = document.createElement("script")
-    const cspNonce = getMetaContent("csp-nonce")
+    const cspNonce = getCspNonce()
     if (cspNonce) {
       createdScriptElement.nonce = cspNonce
     }
@@ -169,7 +169,7 @@ export function getVisitAction(...elements) {
   return isAction(action) ? action : null
 }
 
-export function getMetaElement(name) {
+function getMetaElement(name) {
   return document.querySelector(`meta[name="${name}"]`)
 }
 
@@ -178,6 +178,15 @@ export function getMetaContent(name) {
   return element && element.content
 }
 
+export function getCspNonce() {
+  const element = getMetaElement("csp-nonce")
+
+  if (element) {
+    const { nonce, content } = element
+    return nonce == "" ? content : nonce
+  }
+}
+
 export function setMetaContent(name, content) {
   let element = getMetaElement(name)