JavaScript Magic Tricks: 6 Ways to Use 'alert'
Tags: javascript, webdev, alert, developer
Published: 2023-09-23 07:00:49

JavaScript Magic Tricks: 6 Ways to Use 'alert'

For JavaScript programmers, alert is something everyone can do. 
Many people start learning JavaScript by writing alert statements. 
But is alert really that simple? 
It can be as simple as it seems, or it can be quite complex, to the point that most people wouldn't even recognize it as an alert.

In this article, we will explore some unique ways of writing alert. The most conventional way to write alert is to use the following syntax:

## The first type of alert is...

```
alert("jshaman.com");
```

Let's manipulate it by storing each letter of the string into an array and concatenating it back together.

## The second type of alert is...

```
var $ = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "(", ")", "'", "\"", "[", "]", "."];
alert($[9]+$[18]+$[7]+$[0]+$[12]+$[0]+$[13]+$[32]+$[2]+$[14]+$[12]);
```

Execution result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igrqcsayy2uclnso6eg9.png)

Although it adds difficulty, it is also not complicated. Continuing to increase the difficulty, using a constructor function for execution:

## The third type of alert is...

```
var $ = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "(", ")", "'", "\"", "[", "]", "."];
[].constructor.constructor(alert($[9]+$[18]+$[7]+$[0]+$[12]+$[0]+$[13]+$[32]+$[2]+$[14]+$[12]))();
```

Execution result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4016wl3yw4vabsp4cfhn.png)

Hiding alerts during construction using arrays:

## The fourth type of alert is...

```
var $ = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "(", ")", "'", "\"", "[", "]", "."];
[].constructor.constructor($[0]+$[11]+$[4]+$[17]+$[19]+$[26]+$[29]+$[9]+$[18]+$[7]+$[0]+$[12]+$[0]+$[13]+$[32]+$[2]+$[14]+$[12]+$[29]+$[27])();
```

Execution result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04hzwsuxxq5769sxqes2.png)

Increasing the difficulty by hiding the constructor using arrays:

## The fifth type of alert is...

```
var $ = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "(", ")", "'", "\"", "[", "]", "."];
[][$[2]+$[14]+$[13]+$[18]+$[19]+$[17]+$[20]+$[2]+$[19]+$[14]+$[17]][$[2]+$[14]+$[13]+$[18]+$[19]+$[17]+$[20]+$[2]+$[19]+$[14]+$[17]]($[0]+$[11]+$[4]+$[17]+$[19]+$[26]+$[29]+$[9]+$[18]+$[7]+$[0]+$[12]+$[0]+$[13]+$[32]+$[2]+$[14]+$[12]+$[29]+$[27])();
```
Execution result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gh4qe2bqy0fv9d4xs04.png)

The alert is now very subtle:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mc9ljf5zn2qg0apcu5cl.png)

The writing method in the image is similar to techniques such as aaencode and jsfuck. Based on this, further optimization can be done to implement a decent code obfuscation algorithm.

To get back to the main topic, can we further increase the difficulty at this point?
Yes, we can.

Using JShaman to obfuscate the above js code, we can get the following code:

## The sixth type of alert is...

```
var $ = ["\u0061", "\u0062", "\u0063", "\u0064", "\u0065", "\u0066", "\u0067", "\u0068", "\u0069", "\u006a", "\u006b", "\u006c", "\u006d", "\u006e", "\u006f", "\u0070", "\u0071", "\u0072", "\u0073", "\u0074", "\u0075", "\u0076", "\u0077", "\u0078", "\u0079", "\u007a", "\u0028", "\u0029", "\u0027", "\u0022", "\u005b", "\u005d", "\u002e"];
[][$[443650 ^ 443648] + $[169829 ^ 169835] + $[338738 ^ 338751] + $[745099 ^ 745113] + $[847761 ^ 847746] + $[986395 ^ 986378] + $[591407 ^ 591419] + $[989467 ^ 989465] + $[820242 ^ 820225] + $[848420 ^ 848426] + $[782593 ^ 782608]][$[972307 ^ 972305] + $[406834 ^ 406844] + $[838220 ^ 838209] + $[317151 ^ 317133] + $[799896 ^ 799883] + $[655841 ^ 655856] + $[333562 ^ 333550] + $[745730 ^ 745728] + $[843076 ^ 843095] + $[151776 ^ 151790] + $[832229 ^ 832244]]($[519767 ^ 519767] + $[159934 ^ 159925] + $[594511 ^ 594507] + $[350336 ^ 350353] + $[221884 ^ 221871] + $[776443 ^ 776417] + $[711473 ^ 711468] + $[522129 ^ 522136] + $[783100 ^ 783086] + $[406891 ^ 406892] + $[608793 ^ 608793] + $[894660 ^ 894664] + $[537655 ^ 537655] + $[912882 ^ 912895] + $[419260 ^ 419228] + $[205354 ^ 205352] + $[804217 ^ 804215] + $[294904 ^ 294900] + $[253622 ^ 253611] + $[824879 ^ 824884])();
```
In this code, the contents of the array characters are encoded to further hide them, and the array subscripts are also encrypted.

Execution result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25oc7lpd87kiot2cx1gq.png)

Can you recognize alert when encountering such code?