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]

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.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 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.