400 bad request ("Unable to verify your data submission.") when Adding product to cart

Question

When a user tries to add something into the cart the following error appears:

400 bad request ("Unable to verify your data submission.")

2021-02-23 09:08:42 [-][-][fff512a7677a0fcf3272bd46e2fc3270][error][yii\web\HttpException:400] yii\web\BadRequestHttpException: Ihre Dateneingabe konnte nicht überprüft werden oder ist ungültig. in /path/vendor/yiisoft/yii2/web/Controller.php:202
Stack trace:
#0 /path/vendor/craftcms/cms/src/web/Controller.php(138): yii\web\Controller->beforeAction(Object(yii\base\InlineAction))
#1 /path/vendor/yiisoft/yii2/base/Controller.php(178): craft\web\Controller->beforeAction(Object(yii\base\InlineAction))
#2 /path/vendor/craftcms/cms/src/web/Controller.php(190): yii\base\Controller->runAction('update-cart', Array)
#3 /path/vendor/yiisoft/yii2/base/Module.php(528): craft\web\Controller->runAction('update-cart', Array)
#4 /path/vendor/craftcms/cms/src/web/Application.php(274): yii\base\Module->runAction('commerce/cart/u...', Array)
#5 /path/vendor/craftcms/cms/src/web/Application.php(577): craft\web\Application->runAction('commerce/cart/u...', Array)
#6 /path/vendor/craftcms/cms/src/web/Application.php(253): craft\web\Application->_processActionRequest(Object(craft\web\Request))
#7 /path/vendor/yiisoft/yii2/base/Application.php(386): craft\web\Application->handleRequest(Object(craft\web\Request))
#8 /path/www/index.php(32): yii\base\Application->run()
#9 {main}
2021-02-23 09:08:42 [-][-][fff512a7677a0fcf3272bd46e2fc3270][info][application] $_GET = [
    'p' => 'shop/product'
]

$_POST = [
    'action' => 'commerce/cart/update-cart'
    'redirect' => 'cbfe8c19da16c2536194408ca0939abfb84103fa6f70889e9e9bddc69715bd14purchase/cart'
    'qty' => '1'
    

It only happens when the browser is kept open for a long time. So I guess the token is renewed on the server but the old token is still in the browser.

Is there a way to remove the old token brom the client?

• The Blitz plugin installed which caches the product page (But not the cart)
• There is also a Cloudflare in front of the webpage.

I guess these caching products add to this complexity. Cloudflare might be involved in this as well or probably the main contributor.

Anyone experienced this?

Answer 1

The CSRF token is likely expiring. Since pages are cached with Blitz, you must use some strategy to ensure that a fresh CSRF token is loaded into the page on each page that is statically served. The simplest way to do this is to use the Dynamic Content feature in Blitz, specifically craft.blitz.csrfInput().

<form method="post">
   {{ craft.blitz.csrfInput() }}
   {# ... #}
 </form>