add support for the `crossorigin` attribute on the pushed resources
vlukashov opened this issue · 0 comments
As a developer I want to use PRPL server with a push manifest to push JavaScript modules to the browser and expect the pushed files to be used when the browser encounters a <script type="module">
tag or a dynamic import()
directive later on the page.
As of now pushing does not work for ES modules because of the issue with non-matching credential modes between the pushed resources and the ES modules used on the page (described here).
PRPL server translates push instructions from a push manifest into Link
HTTP headers. For example, a push manifest below would add a Link: </src/components/my-app.js>; rel=preload; as=script
HTTP header to the response.
"/view1": {
"src/components/my-app.js": {
"type": "script",
"weight": 1
}
}
With that setup, having a <script type="module" src="/src/components/my-app.js"></script>
tag on a page would cause the same file to be downloaded twice. Here is a live demo (open in a browser that supports ES modules):
In order to workaround the issue, both the <script>
tag and the Link
header should have an explicit crossorigin
attribute with the same value. E.g.
<script type="module" src="/src/components/my-app.js" crossorigin></script>
and
Link: </src/components/my-app.js>; rel=preload; as=script; crossorigin
.
It would be great if PRPL server allowed adding a crossOrigin
property to push resource definitions, and used it to add a corresponding attribute to the Link
HTTP headers it creates:
"/view1": {
"src/components/my-app.js": {
"type": "script",
"weight": 1,
"crossOrigin": "anonymous"
}
}
A matching issue is also opened in the http2-push-manifest repo to ensure a better tooling support for this feature: GoogleChromeLabs/http2-push-manifest#14.