Replace default global variables in contemporary web browsers

Question

Replace default global variables in contemporary web browsers

After reading the John Resig article on overriding globals in the browser, I attempted to replicate the code in my own browser. However, to my surprise, nothing happened when I ran the example.

Here is the code snippet:

var sec = {};
function Array() { 
    alert(1); 
    sec = this; 
};

Even when I executed ["zdxc", "sd", 1111, 11.1] in the browser console, no alert was displayed and it seemed like the Array declaration had no effect.

I'm wondering if this issue has been fixed in modern browsers or if it still works in certain versions of browsers. Any insights?

javascript json security

Answer 1

Answer №1

It's happening because you're overriding the Array constructor, which causes the new Array(); call to return your custom object instead of a true Array.

For example, when you do:

var arr = ["zdxc", "sd", 1111, 11.1];

the variable arr becomes a native Array.

But if you do:

var arr_override = new Array();

then arr_override becomes an Object as per your constructor declaration, triggering the alert statement. By overriding the constructor, the identifier loses its Array initialization and assumes the behavior defined by your custom function.

As mentioned in this answer on Stack Overflow, the Array Literal ([]) hasn't been affected by this since around 2008 in major browsers.

EDIT:

After some experimentation, it seems that modifying the behavior of the [] notation is not possible, nor is it recommended to alter Native Objects (especially their constructors). However, extending prototypes and tweaking existing properties/methods like demonstrated below is feasible:

var arr = [];
arr.push('2323');
alert(arr);

Array.prototype.push = function() { alert('trololololo'); }
arr.push(123);

I hope this clarifies things. Cheers!

Answer 2

It's happening because you're overriding the Array constructor, which causes the new Array(); call to return your custom object instead of a true Array.

For example, when you do:

var arr = ["zdxc", "sd", 1111, 11.1];

the variable arr becomes a native Array.

But if you do:

var arr_override = new Array();

then arr_override becomes an Object as per your constructor declaration, triggering the alert statement. By overriding the constructor, the identifier loses its Array initialization and assumes the behavior defined by your custom function.

As mentioned in this answer on Stack Overflow, the Array Literal ([]) hasn't been affected by this since around 2008 in major browsers.

EDIT:

After some experimentation, it seems that modifying the behavior of the [] notation is not possible, nor is it recommended to alter Native Objects (especially their constructors). However, extending prototypes and tweaking existing properties/methods like demonstrated below is feasible:

var arr = [];
arr.push('2323');
alert(arr);

Array.prototype.push = function() { alert('trololololo'); }
arr.push(123);

I hope this clarifies things. Cheers!

Replace default global variables in contemporary web browsers

Answer №1

Similar questions

Using Regular Expressions to Replace in a JSON Format

Possible revision: "Exploring ways to iterate through an array of objects in Node/Express and verify if a corresponding entry exists in a MongoDB

How is it possible for this variable to be altered without any modifications made to it in the current function?

"Using Vue 3 to teleport content to a specific element and swap out existing

Encountering an issue upon launching a new next.js project

Combining multiple arrays into a single array using JavaScript

What is the method for invoking a function with a chosen date in the @syncfusion schedule with Angular 9?

How to structure JSON data in Python

How come I am getting only a single outcome when iterating through a dataset array?

Using a JavaScript variable in a script source is a common practice to dynamically reference

How should res.render() and res.redirect() be properly utilized within Express framework?

AngularJS remove a row from a table disrupts the formatting

Placing a div on top of a link renders the link unusable

Error encountered when referencing iscrollview and iscroll js

JavaScript encountered a runtime error due to a script error: The object does not have support for the property or method 'row' when using the datatables plugin

Click on the event to save the document and print the HTML page

updating a d3js line graph in real-time using JSON information

What is the functionality of the getBlock('meta') method within DocPad?

`What is the best way to assign values to an array using data from a JSON file?`

Save a JSON-formatted string as a JSON file