Apply CSP nonce when createElement is called

Hi!

Firstly, thanks for your work on this project! 👋

Today I used patch-package to patch @hotwired/turbo@7.1.0 for the project I’m working on.

There is an issue which is documented here https://github.com/hotwired/turbo/pull/501/files but that fix doesn’t exist in this file.

Here is the diff that solved my problem:

diff --git a/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js b/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
index 963422f..1b164fe 100644
--- a/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
+++ b/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
@@ -1215,6 +1215,9 @@ class ProgressBar {
         const element = document.createElement("style");
         element.type = "text/css";
         element.textContent = ProgressBar.defaultCSS;
+
+        element.nonce = document.head.querySelector('meta[name="csp-nonce"]')?.getAttribute('content')
+
         return element;
     }
     createProgressElement() {

This issue body was partially generated by patch-package.

[gucki]

Unfortunately, the file doesn’t contain any helpful comments. But I’ll find out anyway 😉 But thank you very much for your help. I think we are done here, as the initial issue with turbo.es2017-esm.js is resolved by your fix.

[rience]

Here’s what I could suggest you to do

1. Open web developer console and click link to loadWidgetCss.js - you’ll probably see a code that is building style tag.
   • You might consider adding code that is reading csp tag from head and apply to that style element e.g. element.nonce = ''
2. While looking at loadWidgetCss.js - take a look at top of this file - maybe you’ll find information where does it come from