Progress Bar Won't Render if CSP is Turned On (#501)

hotwired · Dec 19, 2021 · 201f8b3 · 201f8b3
1 parent aa9724d
commit 201f8b3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/src/core/drive/progress_bar.ts b/src/core/drive/progress_bar.ts
@@ -110,6 +110,9 @@ export class ProgressBar {
     const element = document.createElement("style")
     element.type = "text/css"
     element.textContent = ProgressBar.defaultCSS
+    if (this.cspNonce) {
+      element.nonce = this.cspNonce
+    }
     return element
   }
 
@@ -118,4 +121,8 @@ export class ProgressBar {
     element.className = "turbo-progress-bar"
     return element
   }
+
+  get cspNonce() {
+    return document.head.querySelector('meta[name="csp-nonce"]')?.getAttribute("content")
+  }
 }
diff --git a/src/tests/fixtures/rendering.html b/src/tests/fixtures/rendering.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="csp-nonce" content="123" />
     <title>Turbo</title>
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
     <script src="/src/tests/fixtures/test.js"></script>
@@ -40,6 +41,7 @@ <h1>Rendering</h1>
       <p><a id="permanent-element-link" href="/src/tests/fixtures/permanent_element.html">Permanent element</a></p>
       <p><a id="permanent-in-frame-element-link" href="/src/tests/fixtures/permanent_element.html" data-turbo-frame="frame">Permanent element in frame</a></p>
       <p><a id="permanent-in-frame-without-layout-element-link" href="/src/tests/fixtures/frames/without_layout.html" data-turbo-frame="frame">Permanent element in frame without layout</a></p>
+      <p><a id="delayed-link" href="/__turbo/delayed_response">Delayed link</a></p>
     </section>
     <div id="permanent" data-turbo-permanent>Rendering</div>
 

diff --git a/src/tests/functional/rendering_tests.ts b/src/tests/functional/rendering_tests.ts
@@ -17,6 +17,13 @@ export class RenderingTests extends TurboDriveTestCase {
     this.assert(await newBody.equals(await this.body))
   }
 
+  async "test progress bar inline style has nonce"() {
+    await this.remote.execute(() => window.Turbo.setProgressBarDelay(0))
+    await this.clickSelector("#delayed-link")
+
+    this.assert.ok(await this.hasSelector("script[nonce='123']"), "displays progress bar")
+  }
+
   async "test triggers before-render and render events for error pages"() {
     this.clickSelector("#nonexistent-link")
     const { newBody } = await this.nextEventNamed("turbo:before-render")