[stimulus-bundle] CSRF: support input outside the form

[DavidPetrasek]

Q	A
License	MIT
Doc issue/PR	none

Solves the following situation:

<form id="foo">
    ...
</form>

<input type="hidden" id="foo__token" name="foo[_token]" data-controller="csrf-protection" form="foo" value="csrf-token">

[github-actions]

Thanks for the PR 😍

How to test these changes in your application

1. Define the SYMFONY_ENDPOINT environment variable:

   # On Unix-like (BSD, Linux and macOS)
   export SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1531/index.json
   # On Windows
   SET SYMFONY_ENDPOINT=https://raw.githubusercontent.com/symfony/recipes/flex/pull-1531/index.json

2. Install the package(s) related to this recipe:

   composer req symfony/flex
   composer req 'symfony/stimulus-bundle:^2.24'

3. Don't forget to unset the SYMFONY_ENDPOINT environment variable when done:

   # On Unix-like (BSD, Linux and macOS)
   unset SYMFONY_ENDPOINT
   # On Windows
   SET SYMFONY_ENDPOINT=

Diff between recipe versions

In order to help with the review stage, I'm in charge of computing the diff between the various versions of patched recipes.
I'm going keep this comment up to date with any updates of the attached patch.

symfony/stimulus-bundle

2.8 vs 2.9

diff --git a/symfony/stimulus-bundle/2.9/assets/bootstrap.js b/symfony/stimulus-bundle/2.9/assets/bootstrap.js
new file mode 100644
index 00000000..2689398a
--- /dev/null
+++ b/symfony/stimulus-bundle/2.9/assets/bootstrap.js
@@ -0,0 +1,2 @@
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);
diff --git a/symfony/stimulus-bundle/2.9/assets/controllers/hello_controller.js b/symfony/stimulus-bundle/2.9/assets/controllers/hello_controller.js
new file mode 100644
index 00000000..e847027b
--- /dev/null
+++ b/symfony/stimulus-bundle/2.9/assets/controllers/hello_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}
diff --git a/symfony/stimulus-bundle/2.9/assets/controllers.json b/symfony/stimulus-bundle/2.9/assets/controllers.json
new file mode 100644
index 00000000..a1c6e90c
--- /dev/null
+++ b/symfony/stimulus-bundle/2.9/assets/controllers.json
@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}
diff --git a/symfony/stimulus-bundle/2.8/manifest.json b/symfony/stimulus-bundle/2.9/manifest.json
index ff66e874..2e3358cd 100644
--- a/symfony/stimulus-bundle/2.8/manifest.json
+++ b/symfony/stimulus-bundle/2.9/manifest.json
@@ -2,5 +2,67 @@
     "bundles": {
         "Symfony\\UX\\StimulusBundle\\StimulusBundle": ["all"]
     },
-    "aliases": ["stimulus", "stimulus-bundle"]
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "aliases": ["stimulus", "stimulus-bundle"],
+    "conflict": {
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": [
+                "",
+                "    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)",
+                "    .enableStimulusBridge('./assets/controllers.json')"
+            ],
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": [
+                "import './bootstrap.js';"
+            ],
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/bootstrap.js",
+            "content": [
+                "import { startStimulusApp } from '@symfony/stimulus-bridge';",
+                "",
+                "// Registers Stimulus controllers from controllers.json and in the controllers/ directory",
+                "export const app = startStimulusApp(require.context(",
+                "    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',",
+                "    true,",
+                "    /\\.[jt]sx?$/",
+                "));"
+            ],
+            "position": "top",
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/bootstrap.js",
+            "content": [
+                "import { startStimulusApp } from '@symfony/stimulus-bundle';",
+                "",
+                "const app = startStimulusApp();"
+            ],
+            "position": "top",
+            "requires": "symfony/asset-mapper"
+        },
+        {
+            "file": "templates/base.html.twig",
+            "content": [
+                "            {{ ux_controller_link_tags() }}"
+            ],
+            "position": "after_target",
+            "target": "{% block stylesheets %}",
+            "warn_if_missing": true,
+            "requires": "symfony/asset-mapper"
+        }
+    ]
 }

2.9 vs 2.13

diff --git a/symfony/stimulus-bundle/2.9/manifest.json b/symfony/stimulus-bundle/2.13/manifest.json
index 2e3358cd..adbf1ec8 100644
--- a/symfony/stimulus-bundle/2.9/manifest.json
+++ b/symfony/stimulus-bundle/2.13/manifest.json
@@ -53,16 +53,6 @@
             ],
             "position": "top",
             "requires": "symfony/asset-mapper"
-        },
-        {
-            "file": "templates/base.html.twig",
-            "content": [
-                "            {{ ux_controller_link_tags() }}"
-            ],
-            "position": "after_target",
-            "target": "{% block stylesheets %}",
-            "warn_if_missing": true,
-            "requires": "symfony/asset-mapper"
         }
     ]
 }

2.13 vs 2.20

diff --git a/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js b/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js
new file mode 100644
index 00000000..511fffa5
--- /dev/null
+++ b/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js
@@ -0,0 +1,81 @@
+const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
+const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
+
+// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
+// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
+// and thus this event-listener will not be executed.
+document.addEventListener('submit', function (event) {
+    generateCsrfToken(event.target);
+}, true);
+
+// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
+// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
+document.addEventListener('turbo:submit-start', function (event) {
+    const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
+    Object.keys(h).map(function (k) {
+        event.detail.formSubmission.fetchRequest.headers[k] = h[k];
+    });
+});
+
+// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
+document.addEventListener('turbo:submit-end', function (event) {
+    removeCsrfToken(event.detail.formSubmission.formElement);
+});
+
+export function generateCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    let csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+    let csrfToken = csrfField.value;
+
+    if (!csrfCookie && nameCheck.test(csrfToken)) {
+        csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
+        csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
+    }
+    csrfField.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (csrfCookie && tokenCheck.test(csrfToken)) {
+        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie + '; path=/; samesite=strict';
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+export function generateCsrfHeaders (formElement) {
+    const headers = {};
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return headers;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        headers[csrfCookie] = csrfField.value;
+    }
+
+    return headers;
+}
+
+export function removeCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        const cookie = csrfCookie + '_' + csrfField.value + '=0; path=/; samesite=strict; max-age=0';
+
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+/* stimulusFetch: 'lazy' */
+export default 'csrf-protection-controller';
diff --git a/symfony/stimulus-bundle/2.13/manifest.json b/symfony/stimulus-bundle/2.20/manifest.json
index adbf1ec8..277af529 100644
--- a/symfony/stimulus-bundle/2.13/manifest.json
+++ b/symfony/stimulus-bundle/2.20/manifest.json
@@ -7,6 +7,8 @@
     },
     "aliases": ["stimulus", "stimulus-bundle"],
     "conflict": {
+        "symfony/framework-bundle": "<7.2",
+        "symfony/security-csrf": "<7.2",
         "symfony/webpack-encore-bundle": "<2.0",
         "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
     },

2.20 vs 2.24

diff --git a/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js b/symfony/stimulus-bundle/2.24/assets/controllers/csrf_protection_controller.js
index 511fffa5..bcf6b14c 100644
--- a/symfony/stimulus-bundle/2.20/assets/controllers/csrf_protection_controller.js
+++ b/symfony/stimulus-bundle/2.24/assets/controllers/csrf_protection_controller.js
@@ -23,7 +23,7 @@ document.addEventListener('turbo:submit-end', function (event) {
 });
 
 export function generateCsrfToken (formElement) {
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+    const csrfField = getCsrfField(formElement);
 
     if (!csrfField) {
         return;
@@ -46,7 +46,7 @@ export function generateCsrfToken (formElement) {
 
 export function generateCsrfHeaders (formElement) {
     const headers = {};
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+    const csrfField = getCsrfField(formElement);
 
     if (!csrfField) {
         return headers;
@@ -62,7 +62,7 @@ export function generateCsrfHeaders (formElement) {
 }
 
 export function removeCsrfToken (formElement) {
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+    const csrfField = getCsrfField(formElement);
 
     if (!csrfField) {
         return;
@@ -77,5 +77,17 @@ export function removeCsrfToken (formElement) {
     }
 }
 
+function getCsrfField (formElement) 
+{
+    // Input element is placed inside the form
+    const qSel = 'input[data-controller="csrf-protection"], input[name="_csrf_token"]';
+    const csrfField = formElement.querySelector(qSel);
+    if (csrfField) {return csrfField;}
+
+    // Input element is placed outside the form
+    return Array.from(document.querySelectorAll(qSel))
+        .find((field) => field.form === formElement) || null;
+}
+
 /* stimulusFetch: 'lazy' */
 export default 'csrf-protection-controller';
diff --git a/symfony/stimulus-bundle/2.20/assets/bootstrap.js b/symfony/stimulus-bundle/2.24/assets/stimulus_bootstrap.js
similarity index 100%
rename from symfony/stimulus-bundle/2.20/assets/bootstrap.js
rename to symfony/stimulus-bundle/2.24/assets/stimulus_bootstrap.js
diff --git a/symfony/stimulus-bundle/2.20/manifest.json b/symfony/stimulus-bundle/2.24/manifest.json
index 277af529..786a649f 100644
--- a/symfony/stimulus-bundle/2.20/manifest.json
+++ b/symfony/stimulus-bundle/2.24/manifest.json
@@ -17,7 +17,7 @@
             "file": "webpack.config.js",
             "content": [
                 "",
-                "    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)",
+                "    // enables the Symfony UX Stimulus bridge (used in assets/stimulus_bootstrap.js)",
                 "    .enableStimulusBridge('./assets/controllers.json')"
             ],
             "position": "after_target",
@@ -26,13 +26,13 @@
         {
             "file": "assets/app.js",
             "content": [
-                "import './bootstrap.js';"
+                "import './stimulus_bootstrap.js';"
             ],
             "position": "top",
             "warn_if_missing": true
         },
         {
-            "file": "assets/bootstrap.js",
+            "file": "assets/stimulus_bootstrap.js",
             "content": [
                 "import { startStimulusApp } from '@symfony/stimulus-bridge';",
                 "",
@@ -47,7 +47,7 @@
             "requires": "symfony/webpack-encore-bundle"
         },
         {
-            "file": "assets/bootstrap.js",
+            "file": "assets/stimulus_bootstrap.js",
             "content": [
                 "import { startStimulusApp } from '@symfony/stimulus-bundle';",
                 "",