Angular http client not working with translation on in IOS chrome browser

[vinitsingh64]

🐞 bug report

Description

I have angular project built in angular 10. I am getting issue in calling api from IOS chrome browser when i turn on google translation from browser.

If i do not turn on translation it is giving me correct response for API

However when i turn on translation i am getting this error.

InvalidAccessError The object does not support the operation or argument

Error is happening only when i do translation from browser if i do translation from settings in Iphone the it is working fine.

and it is also working fine in all browsers in laptop.

If use javascript fetch function instead of angular HttpClient then it is working fine with HttpClient request is not even going to server. It is giving error even before sending request.

I tried to reproduce same issue in stackblitz but if i create any app on stackblitz than translate button is disabled there. You can see this stackblitz app created by me - https://angular-9-starter-gf561h.stackblitz.io/

You can see in stackblitz this trnaslate option in dislabled. but it is enabled in my local app. And once i click on that button than httpClient stops working

To Regenerate issue 1) Install latest angular app 2) add any httpClient service in app 3) run app and open in. Iphone chrome 4) Api call will stop working after clicking on translate button in IOS chrome.

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Angular Version:

10.0.0

Anything else relevant?

[petebacondarwin]

I haven't been able to test this myself but from looking at the issue and reading around, it appears as though the "translate" extension in Chrome is intercepting the HTTP request and throwing the error.

I note that you say that a direct us of fetch is not affected by this issue. Can you try using the browser's XmlHttpRequest object as well? This might help identify if it is something in the Angular HttpClient or perhaps a issue between XHR and translation.

[coryasilva]

Were seeing a similar issue when lastpass or requestly chrome extensions are enabled...

[Passarinho4]

The same issue occurred in my app. Disabling of translate extension and everything works fine. IOS + Chrome. I tried only Angular HTTP client.

[zemlakov]

Got the same issue. It is definitely some internal problem of HttpClient.

[orfeapapa]

Same issues here:

xhr
POST https://translate.googleapis.com/translate_a/t?anno=3&client=te_lib&format=html&v=1.0&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&logld=vTE_20210224_00&sl=en&tl=zh-CN&tc=2&sr=1&tk=204229.379515&mode=1 [200]
info
07:09:27
xhr
POST https://translate.googleapis.com/translate_a/t?anno=3&client=te_lib&format=html&v=1.0&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&logld=vTE_20210224_00&sl=en&tl=zh-CN&tc=3&sr=1&tk=907763.724557&mode=1 [200]
info
07:09:28
xhr
POST https://translate.googleapis.com/translate_a/t?anno=3&client=te_lib&format=html&v=1.0&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&logld=vTE_20210224_00&sl=en&tl=zh-CN&tc=4&sr=1&tk=446036.6634&mode=1 [200]
info
07:09:28
ui.click
div.tier-intro > p.ql-editor > p > font > font
info
07:09:33
navigation
to: /sensualcrave/checkout?payableType=tier&payableId=10
from: /sensualcrave
info
07:09:50
console
^^^^^^HTTP ERROR INTERCEPTOR^^^^^^^: InvalidAccessError: The object does not support the operation or argument.
arguments: ["^^^^^^HTTP ERROR INTERCEPTOR^^^^^^^:",{"column":1724519,"line":1,"message":"The object does not support the operation or argument.","name":"InvalidAccessError","sourceURL":"https://www......com/main-es2015.js","stack":"https://www......com/main-es2015.js:1:1724519\n_trySubscribe@https://www......com/main-

[petebacondarwin]

Please can someone on this thread demonstrate that using XHR (without the Angular http client) does not have this problem?

[vinitsingh64]

@petebacondarwin , As i mentioned above i had tried with Javascript fetch method and it was working fine with that. So problem must be related to angular HttpClient.

[petebacondarwin]

By XHR I mean the native XmlHttpRequest object, which Angular's HttpClient uses. It does not rely upon fetch so proving it works with fetch does not help us here.

[vinitsingh64]

@petebacondarwin , I checked ti today with native XmlHttpRequest request. Native XmlHttpRequest is working event after translation in IOS chrome, while Angular HttpClient is not working.

[DmitryEfimenko]

I think this also could be due to older IOS version or a particular browser version. Some of our logs captured the following user agent:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/98.0.4758.97 Mobile/15E148 Safari/604.1

This could also be relevant: https://stackoverflow.com/questions/65247153/angular-http-client-not-working-with-translation-on-in-ios-chrome-browser

It looks like the issue could be due to returning an empty response from the server rather than a JSON object, which results in an issue in a particular case of IOS/Chrome version

[electrofLy]

also experiencing this with the latest angular version, using IOS + Chrome

[pkozlowski-opensource]

It sounds like a particular extension is intercepting HTTP requests and alters them in a way that "upsets" HttpClient. @DmitryEfimenko has a plausible explanation but we would need to confirm it.

We would totally appreciate help in reproducing and narrowing down the issue. What is the request that trigger the error? What is the response returned from the extension in question?

[teug91]

I have only seen this on error on these clients:

• Chrome Mobile iOS 103.0
• Chrome Mobile iOS 102.0
• Mobile Safari 15.5

You can reproduce it using the Getting Started repo. I forked the repo, recreated the lock file using node 16, then deployed using Vercel. On Chrome iOS 15.5 I went to https://angular-getting-started-xi.vercel.app/welcome, translated to some language, then clicked on "Product List".

If I don't translate, I get the list of products.

Site: https://angular-getting-started-xi.vercel.app/welcome Repo: https://github.com/teug91/Angular-GettingStarted

[JoostK]

@teug91 While I can repro using Mobile Chrome on iOS, I cannot get this to break using Mobile Safari. That's a problem for debugging, as I can only connect to Mobile Safari using Desktop Safari's Web Inspector. Can you share steps to reproduce in Mobile Safari?

[Zuckjet]

I have encountered the same problems too. But I don't think it is Angular's bug, I may think it is ios chrome's translation bug. And I have submit a bug to chromium and described my reason, see: https://bugs.chromium.org/p/chromium/issues/detail?id=1346628

For anyone who is also interested in this problem, you can upvote this chromium issue, so that the chromium team can tell whether it is a chromium bug or not.

[Zuckjet]

I have encountered the same problems too. But I don't think it is Angular's bug, I may think it is ios chrome's translation bug. And I have submit a bug to chromium and described my reason, see: https://bugs.chromium.org/p/chromium/issues/detail?id=1346628

For anyone who is also interested in this problem, you can upvote this chromium issue, so that the chromium team can tell whether it is a chromium bug or not.

This chromium bug has been confirmed and fixed. What caused this bug is that:

But when translation is enabled, if we call XMLHttpRequest.prototype.open(method, url), iOS chrome will change it to XMLHttpRequest.prototype.open(method, url, undefined). But if we call XMLHttpRequest.prototype.open(method, url, true) explicitly, it works as expected.

Although the chromium bug has been fixed, but for previous iOS chrome, it still exists. Is it good to send a PR to add a true async parameter for XMLHttpRequest.prototype.open method in Angular ?

[teug91]

@JoostK Sorry for the late response. I haven't been able to reproduce on Safari. Maybe the client was wrongly reported as Safari somehow.

[henninga]

Any workaround for this bug, even though it is caused by chrome ios? Or are there a angular fix for this as well?

Edit: I added this to my index.html file just to see if it works and indeed it seems to work. The code is from chrome's ios fix linked above.

if (typeof XMLHttpRequest.prototype.realOpen === 'undefined') {
    XMLHttpRequest.prototype.realOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
      this.savedMethod = method;
      this.savedUrl = url;
      this.savedAsync = async;
      this.savedUser = user;
      this.savedPassword = password;
      const realAsync = arguments.length > 2 ? async : true;
      this.realOpen(method, url, realAsync, user, password);
    };
  }

[hisham]

+1 still happening it seems (iOS 14.8 with Google browser)