Skip to content

Hook for subresource integrity #40

Closed
@jscheid

Description

@jscheid

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions