Need to monitor AJAX requests in Chrome on an iOS device?

I have implemented a method to intercept AJAX requests on my website by modifying the XMLHttpRequest.prototype open and send methods. This approach has been successful in all browsers I tested, except for Chrome on iOS (iPhone) where it seems to continuously execute the code I altered in the prototype, eventually causing the page to crash.

Here is a basic example of the code snippet I am using:

var open = XMLHttpRequest.prototype.open; // Storing the original function
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
    alert('open'); // My custom code here
    open.call(this, method, url, async, user, pass); // Calling the original function
 };

You can view a simple demonstration of this behavior on JSBin with Chrome on iOS: Demo

Based on this answer, the code I am using is considered safe and should not cause any issues. Strangely, Chrome for iOS is the only browser exhibiting this unexpected behavior.

This issue has been perplexing me for the past two days, so any suggestions or workarounds would be greatly appreciated.

javascriptiosajaxchrome-ios

Answer №1

Tips for Intercepting AJAX Requests on Chrome for iOS

If you're looking to intercept XMLHttpRequests on various browsers, here's some code that could help:

(function(open) {
  XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
    // Code to intercept the open request
    alert("Intercepted: " + url);
    open.apply(this, arguments);
  };
})(XMLHttpRequest.prototype.open);

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://google.com",true);
xmlhttp.send();

However, there is a known issue with Chrome for iOS regarding repeated open() calls. This problem has been documented and explored in the links below, along with explanations and potential workarounds.

One key observation from research is that Chrome on iOS makes periodic asynchronous requests to local services upon page load, which may trigger multiple XMLHttpRequest.open() calls. To tackle this behavior, it's important to differentiate between Chrome's internal requests and interception codes to ensure smooth functioning as demonstrated in a JSBin test demo.

(function(open) {
  XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
    var d1 = document.getElementById('urls');

    // Exclude Chrome on iOS security check URLs
    if(url.indexOf("/chromecheckurl") < 0 && url.indexOf("/chrome") !== 0) {
        // Handle desired interceptions
        d1.insertAdjacentHTML('beforeend', '<b>'+url+'</b><br/>');
    } else {
        // Ignore internal Chrome requests
        d1.insertAdjacentHTML('beforeend', '<i>'+url+'</i><br/>');
    }

    open.apply(this, arguments);
  };
})(XMLHttpRequest.prototype.open);

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://google.com",true);
xmlhttp.send();

This explanation delves into the repeated open() calls bug encountered in Chrome for iOS and offers insights into effective workarounds for smoother operations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a multipart/form-data request using JavaScript/jQuery

After much searching and experimentation, I have been trying to understand the process of constructing a request to be sent using something similar to $.ajax({ contentType: "multipart/form-data", type: "POST", data: ...

javascriptjqueryajax

What is the best way to retrieve the border-color inline style using jQuery?

I have a HTML tag like this. <span id="createOrderFormId:accountNo" style="border-color: red;"><</span> To retrieve the style value for the border-color property, I tried using the following jQuery code: $( document ).ready(function() { ...

javascriptjqueryhtmlcss

Is there a way to move the data source for a viewTable from a different Swift file?

I've been struggling with this issue for quite some time and can't seem to find a solution. How can I populate the titles in the tableView in this particular setup? While I am aware of the conventional method of declaring an array in the ViewCon ...

iosswiftuitableview

Issue with ISO-8859-1 character encoding in table formatting

I have set my website to use ISO-8859-1 encoding and special characters are displaying correctly. However, I'm facing an issue with the datatables plugin which does not seem to recognize special characters in the table data. Do I need to configure an ...

javascriptphpjquerydatatablescharacter-encoding

Transferring an array from PHP to JavaScript via an Ajax response

Welcome to my first post on stackoverflow. I usually find answers from existing posts, but this time I'm facing a problem that none of the suggested solutions have been able to fix. Currently, I have a JavaScript function that makes an AJAX request t ...

javascriptphpajax

Dynamic Dropdown Menu in Zend Framework with Autofill Feature

I've been diligently working on a code to automatically populate dropdowns onchange, right after selecting the necessary values from an autocomplete search field. However, I am facing an issue where my autofill feature fails to work after making a sel ...

javascriptphpjqueryajaxzend-framework

Leveraging Web Services in Outlook Mail Add-On

I am facing a challenge with an Outlook Mail Add-In that I need assistance with. Using an Office 365 developer account, the Mail Add-In displays online in a browser as shown in this screenshot: https://i.stack.imgur.com/ZQ9qt.png My objective is to trigge ...

jqueryajaxrestoffice-addinsoffice-js

retain the input data from the form by using the keyup event

Currently, I have a scenario where an input field is used to capture user input. Instead of displaying the entered value directly, I am looking to store it in a variable and subsequently use it to retrieve data from a database. Below is the code snippet I ...

javascriptphpjqueryajax

Avoid the scenario in which JQuery .HTML replaces the existing .HTML content before it is shown

In my current implementation, I am using a multidimensional array to store values and loop through it based on specific criteria. This process involves determining if a number matches and if it has a set status, such as "487 Online." The data in the array ...

javascriptjqueryhtmlcss

Integrating Speech-to-Text functionality into a React Native chat application: A step-by-step guide

For our project, my friends and I are developing a chat application that will incorporate Google's Speech-To-Text, Text-to-Speech, and Translation APIs. We have successfully integrated Gifted Chat and Firebase into the app, with Text-to-Speech already ...

javascriptreact-nativespeech-to-textgoogle-speech-apireact-native-gifted-chat

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

javascripthtmlcss

Achieving success despite facing rejection

I am currently utilizing the bluebird settle method in order to verify results for promises without concerning myself with any rejections. Interestingly, even though I have rejected the promise within the secondMethod, the isFulfilled() still returns tru ...

javascriptnode.jsbluebird

Identifying Inaccurate Device Date Using JavaScript

Is there a way to detect if the device's date is inaccurate using javascript? (For example, displaying an alert if the current date is 2016/6/16 but the device date is 2016/6/15) ...

javascriptdate

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

Avoiding React App from refreshing when form is submitted

Every time I hit the enter key while typing in the form, the application refreshes. My goal is to capture the input from the form as a value and set the state with that value. <form> <input value={input} disabled= ...

javascriptreactjsformsbuttoninput

JavaScript Language Conversion Templating

I'm currently revamping the frontend for Facebook's internationalization XFBML tag, which has been nonfunctional for a while. I'm almost done with the updates but I have hit a roadblock: swapping out tokenized translations without losing dat ...

javascriptjqueryfacebookjquery-templatesxfbml

One beneficial aspect of utilizing JavaScript closures for events is when defining a click event

There are two common ways to write code in JavaScript that accomplish the same task: Option A. SomeObject.prototype.hideElement = function(e, element){ e.stopPropagation(); hide(element); } Option B. SomeObject.prototype.hideElement = function( ...

javascript

MVC5 Toggle Button for Instant Display and Concealment

I used to utilize this method in Web Form development by targeting the id and name of the input radio button. However, I am encountering difficulties implementing it in MVC5. Can someone kindly point out where I might be going wrong? Upon selecting a radi ...

javascriptjqueryasp.net-mvc

Are Node environment variables persistent?

First Example: package.json Scripts "scripts": { "start": "node app.js", "test": "NODE_ENV=test mocha --reporter spec" }, Command to Run Test: if (process.env.NODE_ENV === "test") { cons ...

javascriptnode.jspackage

What is causing the lack of impact from comments on application.css.scss and application.js in Rails?

Recently, I've been experiencing a strange issue with the way application.js is utilized in Rails. My code looks like this: //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap //= require_tree . //= require underscor ...

javascriptcssruby-on-railscomments