You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Initially I didn't think much of it (as I don't experience with this at all), but after a bit of researching I landed at the Asset Preloading and Resource Hints with HTTP/2 and WebLink documentation. Here I've found the following section:
According to the Preload specification, when an HTTP/2 server detects that the original (HTTP 1.x) response contains this HTTP header, it will automatically trigger a push for the related file in the same HTTP/2 connection.
After following the link I saw this:
So basically "integrity metadata" is part of the (so-called) "preload entry".
Reproduction
./config/webpack-encore.yaml
webpack_encore:
# The path where Encore is building the assets - i.e. Encore.setOutputPath()output_path: '%kernel.project_dir%/public/build'# If multiple builds are defined (as shown below), you can disable the default build:# output_path: false# Set attributes that will be rendered on all script and link tagsscript_attributes:
defer: true# link_attributes:# If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')# crossorigin: 'anonymous'# Preload all rendered script and link tags automatically via the HTTP/2 Link headerpreload: true
./webpack.config.js
Very basic (truncated) config example, as it only concerns the option .enableIntegrityHashes()
There is currently nothing here that adds the integrity to the link, regardless where is should get this info from (we shall see later it can be retrieved from the TagRenderer).
TagRenderer
The TagRenderer has 2 methods thare are directly called from inside the PreLoadAssetsEventListener, which are getRenderedScripts() and getRenderedStyles().
Looking at both methods they will return either the script or styles that are available from $this->renderedFiles. However, both the scripts and styles keys contain simple string arrays of hrefs, as they were added to these arrays in TagRenderer.php#L80 and TagRenderer.php#L118 respectively.
After finding out all of the above, I've started trying to think of way on how to "fix" this without making breaking changes 🙃
TagRenderer::getAttributes()
In order to be able to get and use the integrity inside the PreLoadAssetsEventListener, we need to find a way to have the TagRenderer return the complete attributes result (which contains the integrity hash).
To do this I've thought of adding a private property $attributes with a public method getAttributes() (similar to the existing getRenderedScripts() and getRenderedStyles() methods). At the end of the loop it will append to the array of $this->attributes in a similar it way as it does for $this->renderedFiles, however now for all attributes and not just the src or href.
There are no longer warnings in the Chrome console regarding preload integrity mismatch.
TLDR
As I really would like this to be fixed, I can create a (draft) PR for this if that's okay. I'm not sure if the above solution is a proper way to do this in a technical sense, but that's what I came up with for now. 🙂
Could you possibly spare some time to take a look at this? I've just found the related PR #161 which has been open for well over a year, signifying the same issue with a proposed fix, but is has never been merged.
Problem
I've been scratching my head for a while on why I'm getting warnings in my Chrome console denoting the following:
A preload for 'https://example.com/build/850.b58e0264.css' is found, but is not used due to an integrity mismatch.
This happens when I enable integrity hashes in my
webpack.config.js
and havepreload: true
in thewebpack_encore.yaml
.Looking at the
Link
response header I see the following:Initially I didn't think much of it (as I don't experience with this at all), but after a bit of researching I landed at the Asset Preloading and Resource Hints with HTTP/2 and WebLink documentation. Here I've found the following section:
After following the link I saw this:
So basically "integrity metadata" is part of the (so-called) "preload entry".
Reproduction
./config/webpack-encore.yaml
./webpack.config.js
Very basic (truncated) config example, as it only concerns the option
.enableIntegrityHashes()
Cause
After finding out that the missing integrity in the
Link
response header might be the cause of the issue, I set out in trying to debug it 🕵️I've found that the files involved are
PreLoadAssetsEventListener
andTagRenderer
.PreLoadAssetsEventListener
In
PreLoadAssetsEventListener.php#L50-L68
this part is apparently creating the preload links.There is currently nothing here that adds the
integrity
to the link, regardless where is should get this info from (we shall see later it can be retrieved from theTagRenderer
).TagRenderer
The
TagRenderer
has 2 methods thare are directly called from inside thePreLoadAssetsEventListener
, which aregetRenderedScripts()
andgetRenderedStyles()
.webpack-encore-bundle/src/Asset/TagRenderer.php
Line 124 in 75cb918
webpack-encore-bundle/src/Asset/TagRenderer.php
Line 129 in 75cb918
Looking at both methods they will return either the script or styles that are available from
$this->renderedFiles
. However, both thescripts
andstyles
keys contain simple string arrays of hrefs, as they were added to these arrays in TagRenderer.php#L80 and TagRenderer.php#L118 respectively.The
integrity
for both is available as can be seen in TagRenderer.php#L62 and TagRenderer.php#L100, but can/is not being used anywhere else.Possible solution
After finding out all of the above, I've started trying to think of way on how to "fix" this without making breaking changes 🙃
TagRenderer::getAttributes()
In order to be able to get and use the integrity inside the
PreLoadAssetsEventListener
, we need to find a way to have theTagRenderer
return the complete attributes result (which contains the integrity hash).To do this I've thought of adding a private property
$attributes
with a public methodgetAttributes()
(similar to the existinggetRenderedScripts()
andgetRenderedStyles()
methods). At the end of the loop it will append to the array of$this->attributes
in a similar it way as it does for$this->renderedFiles
, however now for all attributes and not just thesrc
orhref
.TagRenderer
PreLoadAssetsEventListener
After adding
TagRenderer::getAttributes()
it can now be used in thePreLoadAssetsEventListener
.It boils down to adding the following snippet in both foreach statements:
PreLoadAssetsEventListener
Result
After applying the above solution I see the following
Link
header in my response.There are no longer warnings in the Chrome console regarding preload integrity mismatch.
TLDR
As I really would like this to be fixed, I can create a (draft) PR for this if that's okay. I'm not sure if the above solution is a proper way to do this in a technical sense, but that's what I came up with for now. 🙂
The text was updated successfully, but these errors were encountered: