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..

[FragsterAt]

I need this too! Is there any working workaround?

[Duoquote]

I am using axios which uses XMLHttpRequest internally, which works fine on android but do not work on iOS at the moment, my versions are;

    "@capacitor/android": "^6.0.0",
    "@capacitor/app": "^6.0.0",
    "@capacitor/app-launcher": "^6.0.0",
    "@capacitor/assets": "^2.0.4",
    "@capacitor/browser": "^6.0.0",
    "@capacitor/camera": "^6.0.0",
    "@capacitor/core": "^6.0.0",
    "@capacitor/device": "^6.0.0",
    "@capacitor/filesystem": "^6.0.1",
    "@capacitor/ios": "^6.0.0",
    "@capacitor/preferences": "^6.0.0",

[zrev2220]

I am unable to use Bing Maps with a security-enabled API key because of this issue. Are there any plans to fix this soon?

[tachibana-shin]

I am unable to use Bing Maps with a security-enabled API key because of this issue. Are there any plans to fix this soon?

Let's fork this library and modify the swift code

[davisriska]

Does someone maybe have a patch or a workaround for this? My issue is that ios is not sending referer or origin header. In android it works fine, as these are sent.

EDIT:
I was using Angular HttpClient with CapacitorHttp. And there were no referer or origin passed in requests. After switching angulars HttpClient to fetch api, referer was passed in requests. So it seems the patch for XMLHttpRequest and fetch api are different.