feat: send Referer header on ios

[jayenashar]

Feature Request

Description

Hello, I am using a service that secures web apps using the HTTP Referer header. This service does allow the capacitor:// scheme which is default on iOS. I am having an issue were capacitor on iOS is not sending the header, even though it does send the Origin header and other headers. The service offers a js npm module which uses XMLHttpRequest. I am not having issues on Android.

Platform(s)

iOS

Preferred Solution

Add the HTTP Referer header to XMLHttpRequests.

Alternatives

Overriding XMLHttpRequest to inject the header. (Haven't tried it, yet.)

Additional Context

Attached safari debugger and found this:

GET /path HTTP/1.1
Accept: /
Origin: capacitor://localhost
Host: host.name.com
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
Accept-Language: en-us
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

[jayenashar]

The alternative doesn't work for loading images in an <img>. Any way to tell capacitor to send the Referer?

Here is the code I wrote for the alternative. It shows an error on android, as it's not allowing setting the referer. On iOS, it silently fails to add the referer.

window.XMLHttpRequest = class extends window.XMLHttpRequest {
  open(...args) {
    const retval = super.open(...args);
    this.setRequestHeader('Referer', window.location.toString());
    return retval;
  }
}

[dducrest]

Has anyone discovered or proposed any alternatives?

[jayenashar]

you can try https://github.com/capacitor-community/http as a replacement for window.XMLHttpRequest

[dducrest]

@jayenashar i will. thank you for the suggestion.

[Dante1349]

#6387 this could fix the problem

[luxferre]

need this too, for domain-restricted external images,raster map tiles in particular

[tachibana-shin]

For those who can't set referer I believe the problem is that default Request doesn't accept that. We can patch it like this:

self.Request = class extends Request {
    headers = new Headers()
    constructor(body, initParams) {
        super(body, initParams)
        this.headers = new Headers(initParams?.headers)
    }
}

Use

const output = await fetch("https://google.com", {
  headers: { referer: "https://google.com" }
})
.then(res => res.arrayBuffer())

With this patch I can even enable CapacitorHttp from the WebWorker

Tested on Android 7 - 14

[repay]

Anyone actually found a workaround that works for iOS?
Several services that needs referer that cant be used as of now..