Hook for subresource integrity

[jscheid]

trafficstars

Hi, I'm maintaining webpack-subresource-integrity and I'd like to help make the two plugins work together, to ensure integrity for injected link rel="stylesheet" tags.

For this there would need to be a way for our plugin to add attributes (integrity and crossorigin) somewhere around here.

One approach could be a hook that receives an object with the tag name and all attributes. rel and href would be needed by our plugin, but I guess for completeness it should also include onload and onerror. It would return an object with the same structure. The code would then look something like this:

let tag = {
    tagName: 'link',
    attributes: {
        rel: '"stylesheet"',
        onload: 'resolve',
        onerror: 'reject',
        href: `${mainTemplate.requireFn}.p + ${linkHrefPath}`,
    }
};

// up for debate where this hook would be declared, what name to use,
// how to handle backward compatibility etc.
if (compilation.hooks.mutateInjectedTag) {
    tag = compilation.hooks.mutateInjectedTag.call(tag);
}

Template.indent([
    `var el = document.createElement(${JSON.stringify(tag.tagName)})`
].concat(Object.entries(tag.attributes).map(([name, value]) => (
    `el[${JSON.stringify(name)}] = ${value}`
))).concat([
    "...",
]);

This aims to be generic, so that it could be used for other plugins that inject tags or that want to modify injected tags.

It's just a suggestion of course, there are other approaches that would also work. But first, what do you think of the general idea, would you accept a PR for this?

[alexander-akait]

@jscheid PR welcome :+1:

[michael-ciniawsky]

At best this would be usable as generic hook to add code to the JS side of affairs (e.g for HMR aswell)

[josephliccini]

This feature would be great, is it still on the roadmap for this plugin?

[jahed]

It's been a while so just wanted to know, is the approach still agreed upon? i.e. using compilation.hooks.mutateInjectedTag?

[ScriptedAlchemy]

I wouldn't mind seeing this implemented. If i have the time ill look at doing so

[patriksletmo]

I discovered a need of this functionality in one of my projects, so I decided to open a PR with an implementation (#526). Along this PR I have also prepared changes to webpack-subresource-integrity that makes use of this new functionality to implement the support @jscheid referenced in the original post.

Feel free to submit feedback on the PR, I am open for suggestions!