On Function Hijacking in JS

  es6, Front end, frontend, html5, javascript

When it comes to hijacking, the first reaction may be something bad. Function hijacking is not evil, but depends on the user. Although this concept is rarely used in front-end areas, it still has certain use value in security areas, custom business and other scenarios. Therefore, this article will go with everyone to understand what function hijacking in JS is and what is the use of it.

Basic concept

Function hijacking, as its name implies, is to hijack a function before it runs and add the functions we want. When this function actually runs, it is no longer the original function, but with the added function. This is also common to us.hook functionOne of the principles of.

At first glance, it looks like a rewrite of a function. Rewriting functions can also be understood as a form of function hijacking, but this is disgusting. As a hijacker, one should also abide by professional ethics and return the person intact after obtaining benefits from kidnapping, so we have to recall the original functions of the function in appropriate places.

Broadly speaking, in fact, we often encounter the concept of “hijacking”. For example, when a website is hijacked by an operator, the advertisement of the operator will pop up when browsing the website.

Example analysis

Now let’s give a simple example, hijackingalert()Function, add a little bit of functionality to it:

let warn = alert
 window.alert = (t) => {
 if (confirm('How are you?'  )) warn(t)
 }
 
 alert('Help me...!  !  !'  )

You can open the developer tool and try this example, and you will find only youconfirmIf you click OK inside, it will pop up.Help me...! ! !.

Next, we will encapsulate the contents of this part into a common function:

const hijack = (obj, method, fun) => {
 let orig = obj[method]
 obj[method] = fun(orig)
 }

First we define ahijackFunction, it will save the original function first, then execute the custom function, and the original function will be called inside the custom function.

Then we’ll hijackconfirm()Functions:

hijack(window, 'confirm', (orig) => {
 return (text) => {
 alert('HELP ME PLZ!  !  !'  )
 if (orig.call(this, text)) {
 alert('YOU SEEMS FINE AND I AM LEAVING, GOOD BYE!'  )
 } else {
 alert('HOLD ON!   I AM COMING!  !'  )
 }
 }
 })

The function is very simple and will not be described in detail. Call it directly.confirm()You will know:
Codepen example

Anti-hijacking

Create a new page, open your developer tools console, and enteralert, you will see such output:

function alert() { [native code] }

Then use the code at the beginning of this article toalert()Hijacking, and then re-enter in the consolealert, you will see such output:

function (t) => {
 if (confirm('How are you?'  )) warn(t)
 }

From the above example, we can know that to see whether a function has been hijacked, we only need to print it directly. For the system’s native functions,[native code]That means it is pure and pollution-free.

Function hijacking

Besides adding functions to functions, it can also use function hijacking to track malicious users’ information. General XSS attacks will be used firstalert()When testing methods that can output information, we can start with the nativealert()To hijack, enter the tracking information code, and finally release the original function. When malicious users are testingalert()He was immediately followed by us, but he was not aware of it.

Postscript

The function hijacking of JS is not a new thing either. I just met this knowledge point in my recent work and felt strange, so I spent some time researching and recording the results. If you find any mistakes, please correct them!

Thank you for your reading, and welcome to pay attention to my column. I will not regularly share my learning experience, develop experience, and carry dry goods outside the wall. See you next time!


References:
Javascript Function Hijacking | Magic Glory
JavaScript Function Hijacking-Xie Canyong
Need to hook into a javascript function call, any way to do this?