feature #321 [LiveComponent] Allow to disable CSRF per component (norkunas)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Allow to disable CSRF per component

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | Fix #320
| License       | MIT

This allows to configure `#[AsLiveComponent('..', csrf: false)` to disable CSRF protection per component like we can do in Symfony Forms.

Commits
-------

7eda046 [LiveComponent] Allow to disable CSRF per component

Author: weaverryan

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.2.0
+
+-   Allow to disable CSRF per component
+
 ## 2.1.0
 
 -   Your component's live "data" is now send over Ajax as a JSON string.

src/LiveComponent/src/Attribute/AsLiveComponent.php

@@ -26,7 +26,8 @@ public function __construct(
         ?string $template = null,
         private ?string $defaultAction = null,
         bool $exposePublicProps = true,
-        string $attributesVar = 'attributes'
+        string $attributesVar = 'attributes',
+        public bool $csrf = true,
     ) {
         parent::__construct($name, $template, $exposePublicProps, $attributesVar);
     }
@@ -39,6 +40,7 @@ public function serviceConfig(): array
         return array_merge(parent::serviceConfig(), [
             'default_action' => $this->defaultAction,
             'live' => true,
+            'csrf' => $this->csrf,
         ]);
     }
 

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

@@ -9,6 +9,7 @@
 use Symfony\Contracts\Service\ServiceSubscriberInterface;
 use Symfony\UX\LiveComponent\LiveComponentHydrator;
 use Symfony\UX\TwigComponent\ComponentAttributes;
+use Symfony\UX\TwigComponent\ComponentMetadata;
 use Symfony\UX\TwigComponent\EventListener\PreRenderEvent;
 use Symfony\UX\TwigComponent\MountedComponent;
 use Twig\Environment;
@@ -33,9 +34,10 @@ public function onPreRender(PreRenderEvent $event): void
             return;
         }
 
-        $attributes = $this->getLiveAttributes($event->getMountedComponent());
+        $metadata = $event->getMetadata();
+        $attributes = $this->getLiveAttributes($event->getMountedComponent(), $metadata);
         $variables = $event->getVariables();
-        $attributesKey = $event->getMetadata()->getAttributesVar();
+        $attributesKey = $metadata->getAttributesVar();
 
         if (isset($variables[$attributesKey]) && $variables[$attributesKey] instanceof ComponentAttributes) {
             // merge with existing attributes if available
@@ -62,7 +64,7 @@ public static function getSubscribedServices(): array
         ];
     }
 
-    private function getLiveAttributes(MountedComponent $mounted): ComponentAttributes
+    private function getLiveAttributes(MountedComponent $mounted, ComponentMetadata $metadata): ComponentAttributes
     {
         $name = $mounted->getName();
         $url = $this->container->get(UrlGeneratorInterface::class)->generate('live_component', ['component' => $name]);
@@ -75,7 +77,7 @@ private function getLiveAttributes(MountedComponent $mounted): ComponentAttribut
             'data-live-data-value' => twig_escape_filter($twig, json_encode($data, \JSON_THROW_ON_ERROR), 'html_attr'),
         ];
 
-        if ($this->container->has(CsrfTokenManagerInterface::class)) {
+        if ($this->container->has(CsrfTokenManagerInterface::class) && $metadata->get('csrf')) {
             $attributes['data-live-csrf-value'] = $this->container->get(CsrfTokenManagerInterface::class)
                 ->getToken($name)->getValue()
             ;

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

@@ -107,6 +107,7 @@ public function onKernelRequest(RequestEvent $event): void
 
         if (
             $this->container->has(CsrfTokenManagerInterface::class) &&
+            $metadata->get('csrf') &&
             !$this->container->get(CsrfTokenManagerInterface::class)->isTokenValid(new CsrfToken($componentName, $request->headers->get('X-CSRF-TOKEN')))) {
             throw new BadRequestHttpException('Invalid CSRF token.');
         }

src/LiveComponent/src/Resources/doc/index.rst

@@ -629,6 +629,20 @@ Your only job is to make sure that the CSRF component is installed:
 
     $ composer require symfony/security-csrf
 
+If you want to disable CSRF for a single component you can set
+``csrf`` option to ``false``::
+
+    namespace App\Twig\Components;
+
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+    #[AsLiveComponent('my_live_component', csrf: false)]
+    class MyLiveComponent
+    {
+        // ...
+    }
+
 Actions, Redirecting and AbstractController
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

src/LiveComponent/tests/Fixtures/Component/DisabledCsrf.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+/**
+ * @author Tomas Norkūnas <[email protected]>
+ */
+#[AsLiveComponent('disabled_csrf', defaultAction: 'defaultAction()', csrf: false)]
+final class DisabledCsrf
+{
+    #[LiveProp]
+    public int $count = 1;
+
+    #[LiveAction]
+    public function increase(): void
+    {
+        ++$this->count;
+    }
+
+    public function defaultAction(): void
+    {
+    }
+}

src/LiveComponent/tests/Fixtures/templates/components/disabled_csrf.html.twig

@@ -0,0 +1,3 @@
+<div{{ attributes }}>
+    Count: {{ this.count }}
+</div>

src/LiveComponent/tests/Fixtures/templates/csrf.html.twig

@@ -0,0 +1 @@
+{{ component('disabled_csrf') }}

src/LiveComponent/tests/Functional/EventListener/AddLiveAttributesSubscriberTest.php

@@ -58,4 +58,20 @@ public function testCanUseCustomAttributes(): void
         $this->assertNotNull($div->attr('data-live-csrf-value'));
         $this->assertArrayHasKey('_checksum', $data);
     }
+
+    public function testCanDisableCsrf(): void
+    {
+        $response = $this->browser()
+            ->visit('/render-template/csrf')
+            ->assertSuccessful()
+            ->response()
+            ->assertHtml()
+        ;
+
+        $div = $response->crawler()->filter('div');
+
+        $this->assertSame('live', $div->attr('data-controller'));
+        $this->assertSame('/_components/disabled_csrf', $div->attr('data-live-url-value'));
+        $this->assertNull($div->attr('data-live-csrf-value'));
+    }
 }

src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php

@@ -133,6 +133,25 @@ public function testInvalidCsrfTokenForComponentActionFails(): void
         $this->fail('Expected exception not thrown.');
     }
 
+    public function testDisabledCsrfTokenForComponentDoesNotFail(): void
+    {
+        $dehydrated = $this->dehydrateComponent($this->mountComponent('disabled_csrf'));
+
+        $this->browser()
+            ->throwExceptions()
+            ->get('/_components/disabled_csrf?data='.urlencode(json_encode($dehydrated)))
+            ->assertSuccessful()
+            ->assertHeaderContains('Content-Type', 'html')
+            ->assertContains('Count: 1')
+            ->post('/_components/disabled_csrf/increase', [
+                'body' => json_encode($dehydrated),
+            ])
+            ->assertSuccessful()
+            ->assertHeaderContains('Content-Type', 'html')
+            ->assertContains('Count: 2')
+        ;
+    }
+
     public function testBeforeReRenderHookOnlyExecutedDuringAjax(): void
     {
         $dehydrated = $this->dehydrateComponent($this->mountComponent('component2'));