UPSTREAM FIX

magento2-39040: Async CSS never loading on checkout pages with critical CSS path enabled

Community fix magento2-39040 merged into magento/magento2 on 2024-10-18, released in 2.4.8.

Fixes async CSS never loading on checkout pages with critical CSS path enabled edited

Pull request title: CSP issues combined with dev/css/use_css_critical_path
Pull request: magento/magento2#39040
Issues: #39020 human
Author: @Mohamed-Asar
Merged: 2024-10-18
Fixed in: 2.4.8
Reported on: 2.4.7-p1
Categories: Other
Components: magento/module-theme

Labels

Area: Other Developer Tools
Component: Other
Priority: P2
Severity: —
Reported on (labels): 2.4.7-p1

Issue

Title and steps come from the upstream issue and pull request.

Description

Restricted CSP policy (introduced in 2.4.7 for checkout pages) prevents inline js to be executed so CSS files which were supposed to be loaded asynchronously are never loaded.

Steps to reproduce

1. Enable dev/css/use_css_critical_path in order to facilitate critical CSS functionality
2. Add some items to cart
3. Visit checkout page

Expected result

Checkout pages are rendered with proper css styles

Actual result

Restricted CSP policy (introduced in 2.4.7 for checkout pages) prevents inline js to be executed so CSS files which were supposed to be loaded asynchronously are never loaded.

Dev Console gives such output:
<img width="1682" alt="Screenshot 2024-08-07 at 14 50 21" src="https://github.com/user-attachments/assets/27b5e8ef-e09f-4719-a3a6-e7a7569fbbca">

For following elements:
<img width="1319" alt="Screenshot 2024-08-07 at 14 55 20" src="https://github.com/user-attachments/assets/85c1349f-211a-4cd1-b011-064e7c2ebdec">

Taken from the upstream issue.

Code match per tag

Each tag was checked with git apply --check against that tag's files. A clean match means the change applies; it is not a test result. Tags that already contain the fix are marked.

Line	Code match per tag	Tests
2.4.6	2.4.6 conflict 2.4.6-p1 conflict 2.4.6-p2 conflict 2.4.6-p3 conflict 2.4.6-p4 conflict 2.4.6-p5 conflict 2.4.6-p6 conflict 2.4.6-p7 conflict 2.4.6-p8 conflict 2.4.6-p9 conflict 2.4.6-p10 conflict 2.4.6-p11 conflict 2.4.6-p12 conflict 2.4.6-p13 conflict 2.4.6-p14 conflict 2.4.6-p15 conflict	2.4.6: no test data 2.4.6-p1: no test data 2.4.6-p2: no test data 2.4.6-p3: no test data 2.4.6-p4: no test data 2.4.6-p5: no test data 2.4.6-p6: no test data 2.4.6-p7: no test data 2.4.6-p8: no test data 2.4.6-p9: no test data 2.4.6-p10: no test data 2.4.6-p11: no test data 2.4.6-p12: no test data 2.4.6-p13: no test data 2.4.6-p14: no test data 2.4.6-p15: no test data
2.4.7	2.4.7 conflict 2.4.7-p1 conflict 2.4.7-p2 conflict 2.4.7-p3 conflict 2.4.7-p4 conflict 2.4.7-p5 conflict 2.4.7-p6 conflict 2.4.7-p7 conflict 2.4.7-p8 conflict 2.4.7-p9 conflict 2.4.7-p10 conflict	2.4.7: no test data 2.4.7-p1: no test data 2.4.7-p2: no test data 2.4.7-p3: no test data 2.4.7-p4: no test data 2.4.7-p5: no test data 2.4.7-p6: no test data 2.4.7-p7: no test data 2.4.7-p8: no test data 2.4.7-p9: no test data 2.4.7-p10: no test data
2.4.8	2.4.8 conflictcontains the fix 2.4.8-p1 conflictcontains the fix 2.4.8-p2 conflictcontains the fix 2.4.8-p3 conflictcontains the fix 2.4.8-p4 conflictcontains the fix 2.4.8-p5 conflictcontains the fix	2.4.8: no test data 2.4.8-p1: no test data 2.4.8-p2: no test data 2.4.8-p3: no test data 2.4.8-p4: no test data 2.4.8-p5: no test data
2.4.9	2.4.9 conflictcontains the fix	2.4.9: no test data

Triage

Model @cf/cloudflare/clef. Probability this is a bug fix: 96.9%. Probability it is security relevant: 59.6%.

Show the model's answers and probabilities

Question	Answer	Probabilities	Confidence
Change kind	bugfix	bugfix 93.5%, refactor 2.1%, feature 1.4%, tests_only 1.3%, dependency 1.1%, docs_only 0.7%	85.0%
Area	frontend	frontend 74.9%, checkout 14.8%, framework 3.7%	52.6%
Reported version	2.4.7-p1	2.4.7-p1 58.5%, 2.4.7 6.1%, 2.4.7-p2 1.2%	34.0%
Scope	0.74 of 2	1 42.9%, 0 41.7%, 2 15.4%	7.3%
Risk	0.83 of 2	0 41.7%, 1 33.7%, 2 24.6%	2.2%
Worth backporting	1.29 of 2	2 51.0%, 1 26.4%, 0 22.5%	7.2%

Download

For cweagans/composer-patches, choose a version below and download the bundle. Copy its magento2-39040/ folder into patches/composer/, merge composer.patches.json into composer.json, then run composer install. Test files are always removed; paths are relative to each package root, using the default -p1 level.

No checked release lacks this fix with a clean code match, so no bundle is offered.

Bundle README (what the ZIP ships)

# magento2-39040

Community fix merged upstream into magento/magento2, adapted by magento.watch.
This is not a patch published by Adobe.

Pull request: https://github.com/magento/magento2/pull/39040
Issue: https://github.com/magento/magento2/issues/39020
Author: @Mohamed-Asar
Source commit: 751f00e8a3beb4e38677823ee0cd6914dad12ea3
Modifications: test files and documentation removed, paths rewritten relative to each Composer package.
Licence: OSL-3.0 / AFL-3.0, as the original Magento Open Source code.
Maintainer: Łukasz Bajsarowicz (@lbajsarowicz)

Licence: Magento Open Source code under OSL-3.0 and AFL-3.0. The bundle carries the original author, source commit and the list of modifications.