Search code examples
safarihttp2server-push

Cross origin Server Push extra request issue on Safari v12+ (both MacOS and iOS)


Problem: Safari is doing a request with the pushed path but to the site host, resulting in 404s.

Scenario: Cross origin asset that is server pushed. Asset's host and site's host are different domains.

Browser: Safari v12+ (also v13) in both MacOS and iOS.

It is worth noting that the server push feature it self works, but Safari makes this extra request to the host. Also this doesn't happen on Safary v10 or v11.


Solution

  • I ran into this too, and confirmed (by re-writing with Charles Proxy) that Safari does load resources in a link header from the cross-origin domain if the link header uses an absolute path that includes a domain.

    This type of HTTP response will not work in Safari:

    HTTP/2 200
    content-type: application/javascript; charset=utf-8
    ... other headers
    link: </script.js>; rel=preload; as=script; crossorigin
    

    Instead, you need to include the full domain and protocol, like so:

    HTTP/2 200
    content-type: application/javascript; charset=utf-8
    ... other headers
    link: <https://www.example.com/script.js>; rel=preload; as=script; crossorigin
    

    This is different from most server push tutorials which have a path that's absolute from the root of the domain (e.g. /script.js), but I've confirmed that it works correctly in Safari even when the server-push response is for a JavaScript resource on a different domain than the one that the HTML page lives on.