Add Inline Form Key Updater to Page Cache | Fix Issue #13746 #27647

nicolasddev · 2020-04-08T07:01:13Z

Description (*)

This fix ensures that form keys are updated on frontend pages as soon as the form_key input field is loaded in order to prevent delays resulting in the "Invalid Form Key. Please refresh the page" error.

A script tag with a unique ID is being added and executed inline directly after each form_key input ensuring its value is updated as soon as possible.

An internally-developed extension using the same approach is running on one of our customer's production server preventing this issue from occurring. The issue was more frequently encountered on long category pages due to the fact that the HTML had to be downloaded in multiple packets.

This fix is provided by MageMontreal, a Magento Business Solution Partner.

Fixed Issue

fixes Add to Cart Form wrong Form Key in FPC #13746: Add to Cart Form wrong Form Key in FPC

Manual testing scenarios (*)

Create a long category page with several visible products
Make sure FPC is enabled and visit the page once with a browser
Using another browser or incognito, visit the same page which is now cached
Try adding a product to cart without waiting for the page to load

Comments

Before applying this fix, when a long page or a page requiring several resources was opened, the form keys on the page were not updated immediately as the below script hadn't been executed yet.

Script: Magento/PageCache/view/frontend/web/js/page-cache.js

As this fix makes sure that the form keys are each updated inline as soon as the content has been downloaded by the browser, the issue doesn't occur anymore.

Note: Uses pure JavaScript to ensure that the scripts are executed without having to wait for RequireJS or any dependencies.

Functional Requirement

Form key input fields must be integrated to the form through the Magento\Framework\View\Element\FormKey block which is best practice, in order to benefit from this fix/improvement.

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
All automated tests passed successfully (all builds are green)

m2-assistant · 2020-04-08T07:01:16Z

Hi @nicolasddev. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

ihor-sviziev · 2020-09-04T07:03:46Z

Hi @nicolasddev,
First of all thank you so much for your contribution and I'm really sorry that this PR was not processed for long time. Now I'm going to review it and will try to move it forward.

@magento run all tests

ihor-sviziev · 2020-09-04T07:06:06Z

app/code/Magento/PageCache/Plugin/Framework/View/Element/InlineFormKeyUpdater.php

+{
+    public function afterToHtml(\Magento\Framework\View\Element\FormKey $subject, $result)
+    {
+        return $result.$this->getInlineJavaScript();


Seems like this shouldn't happen in case if FPC is disabled. Am I correct?

ihor-sviziev · 2020-09-04T07:09:31Z

app/code/Magento/PageCache/view/frontend/templates/inline_form_key_provider.phtml

+<script>
+var formKey = (function () {
+
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + 'form_key' + "=");
+
+    if (parts.length == 2) {
+        return parts.pop().split(";").shift();
+    }
+
+})();
+</script>


As Magento introduced CSP - we need to use something like this:

magento2/app/code/Magento/Theme/view/frontend/templates/page/js/require_js.phtml

Line 15 in 89d3cda

echo /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false);

Seems like case with missing form_key cookie isn't covered here

magento2/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js

Lines 120 to 123 in 9544fb2

if (!formKey) {

formKey = generateRandomString(this.options.allowedCharacters, this.options.length);

$.mage.cookies.set('form_key', formKey, options);

}

I think we need to remove following code as we basically replacing it with inline implementation

magento2/app/code/Magento/PageCache/view/frontend/web/js/page-cache.js

Lines 300 to 303 in 9544fb2

domReady(function () {

$('body')

.formKey();

});

ihor-sviziev · 2020-09-04T07:12:26Z

app/code/Magento/PageCache/Plugin/Framework/View/Element/InlineFormKeyUpdater.php

+    {
+        $uniqueId = uniqid();
+
+        return '<script id="'.$uniqueId.'">document.getElementById("'.$uniqueId.'").previousSibling.value = formKey;</script>';


As Magento introduced CSP, we need to replace this code with something like this:

magento2/app/code/Magento/Theme/view/frontend/templates/page/js/require_js.phtml

Line 15 in 89d3cda

echo /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false);

gabrieldagama · 2020-09-07T14:40:20Z

The risk was set tomedium due to: the suggested changes may affect other areas/modules.

ihor-sviziev · 2020-09-22T07:42:23Z

Hi @nicolasddev,
Will you be able to update your PR?

sidolov · 2020-09-23T17:59:05Z

@nicolasddev I am closing this PR now due to inactivity.
Please reopen and update if you wish to continue.
Thank you for the collaboration!

m2-assistant · 2020-09-23T17:59:07Z

Hi @nicolasddev, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

nicolasddev added 4 commits April 8, 2020 02:06

Register the Inline Form Key Updater Plugin

f0f1869

Add the InlineFormKeyUpdater Plugin Class

69ccbb8

Insert a block for the form key provider template

d82e8d0

Add a pure JavaScript form key provider

500f52b

ghost added the Progress: pending review label Apr 8, 2020

magento-engcom-team added Area: Frontend Component: PageCache Release Line: 2.4 labels Apr 8, 2020

ghost added Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. Priority: P3 May be fixed according to the position in the backlog. labels Jun 9, 2020

ihor-sviziev self-assigned this Sep 4, 2020

Merge branch '2.4-develop' into patch-1

9951677

ihor-sviziev mentioned this pull request Sep 4, 2020

Add to Cart Form wrong Form Key in FPC #13746

Closed

ghost added Progress: review and removed Progress: pending review labels Sep 4, 2020

ihor-sviziev requested changes Sep 4, 2020

View reviewed changes

ghost added Progress: needs update and removed Progress: review labels Sep 4, 2020

gabrieldagama added the Risk: medium label Sep 7, 2020

sidolov closed this Sep 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Inline Form Key Updater to Page Cache | Fix Issue #13746 #27647

Add Inline Form Key Updater to Page Cache | Fix Issue #13746 #27647

Uh oh!

nicolasddev commented Apr 8, 2020 •

edited by sdzhepa

Loading

Uh oh!

m2-assistant bot commented Apr 8, 2020

Uh oh!

ihor-sviziev commented Sep 4, 2020

Uh oh!

ihor-sviziev Sep 4, 2020

Uh oh!

ihor-sviziev Sep 4, 2020

Uh oh!

ihor-sviziev Sep 4, 2020

Uh oh!

gabrieldagama commented Sep 7, 2020

Uh oh!

ihor-sviziev commented Sep 22, 2020

Uh oh!

sidolov commented Sep 23, 2020

Uh oh!

m2-assistant bot commented Sep 23, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	if (!formKey) {
	formKey = generateRandomString(this.options.allowedCharacters, this.options.length);
	$.mage.cookies.set('form_key', formKey, options);
	}

Add Inline Form Key Updater to Page Cache | Fix Issue #13746 #27647

Add Inline Form Key Updater to Page Cache | Fix Issue #13746 #27647

Uh oh!

Conversation

nicolasddev commented Apr 8, 2020 • edited by sdzhepa Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Fixed Issue

Manual testing scenarios (*)

Comments

Functional Requirement

Contribution checklist (*)

Uh oh!

m2-assistant bot commented Apr 8, 2020

Uh oh!

ihor-sviziev commented Sep 4, 2020

Uh oh!

ihor-sviziev Sep 4, 2020

Choose a reason for hiding this comment

Uh oh!

ihor-sviziev Sep 4, 2020

Choose a reason for hiding this comment

Uh oh!

ihor-sviziev Sep 4, 2020

Choose a reason for hiding this comment

Uh oh!

gabrieldagama commented Sep 7, 2020

Uh oh!

ihor-sviziev commented Sep 22, 2020

Uh oh!

sidolov commented Sep 23, 2020

Uh oh!

m2-assistant bot commented Sep 23, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

nicolasddev commented Apr 8, 2020 •

edited by sdzhepa

Loading