Incorrect JavaScript File Loading Order After Enabling CSP module

[0m3r]

I am encountering an issue with the loading order of JavaScript files (require.js, mixins.js, requirejs-config.js) after enabling Content Security Policy (CSP) in Magento 2. This appears to be breaking JavaScript bundling, causing improper execution order and related issues.

Reproduction Steps:

1. Enable CSP in Magento 2.
2. Notice the incorrect loading order of JavaScript files: require.js, mixins.js, requirejs-config.js.
3. This issue also affects JavaScript bundling functionality, leading to performance degradation.

Screenshots:

• Before enabling CSP: Correct file order (Screenshot below)

• After enabling CSP: Incorrect file loading order

Cause:

It seems that the issue is related to CSP configurations interfering with the loading order and possibly the integrity attribute (hash) of JavaScript assets, specifically in how property groups are handled within GroupedCollection.

In this file, the integrity attributes (hash) should be ignored when grouping properties.

Proposed Workaround: (doesn't work properly broke integrity :( )

I suggest modifying the grouping logic to disregard the integrity attribute when comparing asset properties.

Example workaround code:

private function clearGroupProperties(array $properties)
{
    if (isset($properties['attributes']['integrity'])) {
        unset($properties['attributes']['integrity']);
    }
    return $properties;
}

/**
 * Retrieve existing or new group matching the properties
 *
 * @param array $properties
 * @return PropertyGroup
 */
private function getGroupFor(array $properties)
{
    /** @var $existingGroup PropertyGroup */
    foreach ($this->groups as $existingGroup) {
        $existingGroupProperties = $existingGroup->getProperties();
        if ($this->clearGroupProperties($existingGroupProperties) == $this->clearGroupProperties($properties)) {
            return $existingGroup;
        }
    }
    /** @var $newGroup PropertyGroup */
    $newGroup = $this->propertyFactory->create(['properties' => $properties]);
    $this->groups[] = $newGroup;
    return $newGroup;
}

Expected Outcome:

• After this modification, JavaScript files should load in the correct order.
• JavaScript bundling should function correctly even with CSP enabled.

[m2-assistant[bot]]

Hi @0m3r. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce.

• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[engcom-Hotel]

Hello @0m3r,

Thanks for the report and collaboration!

We have tried to debug the issue in the latest Magento 2.4-develop branch. The Magento_Csp module is by default enabled:

And in the below order, we are getting the JS:

Please let us know if we missed anything. If possible provide some screenshot of the issue you are facing.

Thanks

[m2-assistant[bot]]

Hi @engcom-Hotel. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• [ ] 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• [ ] 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• [ ] 5. Add label Issue: Confirmed once verification is complete.
• [ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

[0m3r]

Hello @0m3r,

Thanks for your report and collaboration!

We have tried to debug the issue on the latest Magento 2.4-develop branch, where the Magento_Csp module is enabled by default:

Based on our testing, JS files are being loaded in the following order:

Could you please confirm if we missed any details? If possible, share a screenshot of the issue you're experiencing.

---

However, I noticed that in your screenshot, there are no integrity attributes in the JS files.

If the CSP module is functioning as expected, each <script> tag should include integrity and crossorigin attributes. For instance:

<script type="text/javascript" integrity="sha256-qZR6SoVi/2gScRr1Ri/V7kSumk8bGuqbxgAm6rk4mXQ=" crossorigin="anonymous" src="https://localhost/static/version1730205070/frontend/Magento/luma/en_US/requirejs/require.js"></script>
<script type="text/javascript" integrity="sha256-yDKNxvV6YgRUT2Gx4998ZUjjBDjOROiAXhXmj/U3qXU=" crossorigin="anonymous" src="https://localhost/static/version1730205070/frontend/Magento/luma/en_US/mage/requirejs/mixins.js"></script>
<script type="text/javascript" integrity="sha256-3NxYK6jpOVI1aAe2LhwO4B70+2vCf8BhTbMR/QP8MQg=" crossorigin="anonymous" src="https://localhost/static/version1730205070/frontend/Magento/luma/en_US/requirejs-config.js"></script>

For more information on Subresource Integrity Hash Generation, refer to Adobe's documentation.

The integrity hash generation process starts once you deploy static content:

bin/magento setup:static-content:deploy -f

Warning: Running bin/magento cache:flush will remove integrity hashes from specific cache storage.

[engcom-Hotel]

Hello @0m3r,

Thanks for the input!

We are able to reproduce the Actual Result, please refer to the below screenshot for reference:

But can you please tell us the issue you are facing with this behavior.

Thanks

[0m3r]

I’m experiencing a recursion issue in mage/requirejs/static.js and a memory leak in the browser. After extensive debugging, I found that the JavaScript load order is crucial. The issue occurs when static.js is loaded after mixins.js.

In app/code/Magento/RequireJs/Block/Html/Head/Config.php#L107-L137, the script load order is strictly defined. However, when the CSP (Content Security Policy) module is enabled, it disrupts this order, leading to the issue.

[engcom-Hotel]

Hello @0m3r,

Thanks for the input!

We are confirming this issue for further processing.

Thanks

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-13313 is successfully created for this GitHub issue.

[m2-assistant[bot]]

:white_check_mark: Confirmed by @engcom-Hotel. Thank you for verifying the issue.
Issue Available: @engcom-Hotel, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[denguyen-tvit]

Is there any update regarding the resolution of this issue?