{{rootURL}} not working

[amk221]

• Here is an app demoing {{rootURL}} on a link tag inside index.html being replaced with fingerprint.prepend in a classic app. ✅
• Here is an app demoing {{rootURL}} on a link tag inside index.html not being replaced with publicAssetURL in an embroider app. ❌

[amk221]

It seems like perhaps the replacement technique is to use webpack's webpackPreload: true. But that feature is actively not a thing in an embroider app 🤔

[evoactivity]

Just to add to this, I'm working on the subresource integrity webpack plugin @jelhan released.

Only my css and js files defined in the index.html are getting the correct publicAssetURL whilst my favicons default to using the rootURL defined in environment.js.

The plugin uses publicPath as provided by compiler.hooks.done.tapPromise to determine what to strip from the asset location so the file can be read on the file system and hashed as part of the build process.

Original urls in index.html	Resolved by SRI plugin
https://my-cdn-url.com/assets/chunk.8d0c503ba12219847c28.js	/assets/chunk.8d0c503ba12219847c28.js
https://my-cdn-url.com/assets/chunk.cdbba80062c971287a40.js	/assets/chunk.cdbba80062c971287a40.js
/admin/apple-touch-icon.png	/admin/apple-touch-icon.png
/admin/favicon-32x32.png	/admin/favicon-32x32.png
/admin/favicon-16x16.png	/admin/favicon-16x16.png
/admin/site.webmanifest	/admin/site.webmanifest
/admin/safari-pinned-tab.svg	/admin/safari-pinned-tab.svg
https://my-cdn-url.com/assets/vendor.f37def1f2e1fb65adb6312e13fea69ac.css	/assets/vendor.f37def1f2e1fb65adb6312e13fea69ac.css
https://my-cdn-url.com/assets/ekto-admin.d41d8cd98f00b204e9800998ecf8427e.css	/assets/ekto-admin.d41d8cd98f00b204e9800998ecf8427e.css
https://rsms.me/inter/inter.css	https://rsms.me/inter/inter.css
https://my-cdn-url.com/assets/chunk.8d0c503ba12219847c28.css	/assets/chunk.8d0c503ba12219847c28.css

but because /admin/ doesn't match what publicPath is set to in a production build, and /admin/ isn't where the assets actually are, it breaks the hashing process because we can't look up the file correctly.

I'd expect every usage of {{rootURL}} in index.html to be set to what I have publicAssetsURL set to.

More context here jelhan/webpack-subresource-integrity-embroider#11 (comment)

[mansona]

So the issue that we're probably facing here is that the current webpack implementation for embroider doesn't treat the index.html as an entrypoint. Which means you can't actually use webpack effectively to change things in the index.html.

We are aware of this issue and we're in the process of changing it with the main branch of embroider which is going to "invert the control" of embroider calling webpack right now and it will make our index.html a true entry point.

Nothing has been merged to support that yet but if you want to keep track of the big changes coming in the next major release you can subscribe to this PR: #1701

[evoactivity]

I was considering creating a PR to fix this with the current way embroider works (so index.html not being an entry point) so the interim webpack-subresource-integrity-embroider can work properly, but I guess if index.html is going to become an entry point that PR wouldn't be accepted?

Once the index.html is an entrypoint we probably won't need webpack-subresource-integrity-embroider at all since webpack-subresource-integrity will just be able to do what it needs to do directly.

So until the next major embroider release I guess we'll have to find a workaround in webpack-subresource-integrity-embroider instead.

[jelhan]

Once the index.html is an entrypoint we probably won't need webpack-subresource-integrity-embroider at all since webpack-subresource-integrity will just be able to do what it needs to do directly.

From SRI perspective it is not that relevant if index.html is treated as entrypoint or not. What we would need to use the established tooling for SRI in Webpack is:

1. Having all assets managed by Webpack so that webpack-subresource-integrity sees them.
2. Generate the output index.html by Webpack so that we could use HtmlWebpackPlugin to write the integrity and crossorigin attributes into the generated index.html.

@mansona Will both be provided by the planned changes in upcoming major? That would be great. I'm happy to deprecate webpack-subresource-integrity-embroider rather sooner than later.

[jelhan]

You could workaround this limitation of Embroider similar as how webpack-subresource-integrity-embroider does: Build a Webpack plugin, which parses the index.html in done hook and adds the publicAssetURL to all resources missing it. The webpack-subresource-integrity-embroider should help you getting started.