Inject javascript into object function

Question

I have an object function like this:

var batman = function () {
    this.constructor.prototype.go = function(params){
        ......
    }
}

When calling batman.go() I'm passing an object in with a few keys such as:

{
    a:1,
    b:2,
    action:function(){..code to scan and inject into...}
}

My question is, how do I in batman.go() function, scan through the input param function code of 'action' and if a match is found, inject code into a certain place.

The code I am looking for is:

history.pushState({name:'homepage'},null,uri);

I want to inject so it looks like this:

history.pushState({id:an_id_variable,name:'homepage'},null,uri);

What is being inserted is:

id:an_id_variable

If i understood you corectly: I don't think it can be done without using eval() function which is a huge security risk — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Dec 3, 2019 at 21:29
Does this answer your question? What are some real world uses for function.toString()? — tevemadar
– tevemadar, Commented Dec 3, 2019 at 21:29
@KrzysztofKrzeszewski there is no security for your code in the browser. eval() is a toy compared to what the developer console can do. — tevemadar
– tevemadar, Commented Dec 3, 2019 at 21:32
so if i use eval how can that be done? the actual scan and replacement/injection. And what security risk could that create? — Jason
– Jason, Commented Dec 3, 2019 at 21:51

Klaycon · Accepted Answer · 2019-12-03 22:32:26Z

1

Use function.toString() to get the source of params.action, String.replace() to find and replace occurences of the snippet in question, and then the Function() constructor to dynamically create a new function with the amended source code:

var batman = function () {
    this.constructor.prototype.go = function(params){
        ...
        let newAction = new Function(params.action.toString().replace(
            /history\.pushState\({name:'homepage'},null,uri\);/g,
            `history.pushState({id:${an_id_variable},name:'homepage'},null,uri);`
        ));
        //use newAction() however you like
    }
}

It should be noted that if any end user has any amount of control over the content that can go in params.action, this would allow for completely arbitrary code injection by that user - but as pointed out in comments, arbitrary code can already be run on browsers via developer console. Just be aware of the security implications of a solution like this.

Also note that using the Function constructor binds the function to the global scope and it will lose any this context. You can bind it to an appropriate this context with function.bind() like this:

newAction = newAction.bind(params.bindTarget);

Then, when newAction executes, whatever params.bindTarget references will be this.

edited Dec 3, 2019 at 22:32

answered Dec 3, 2019 at 22:03

Klaycon

11.1k23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jason Over a year ago

This looks like exactly what i need thank you. your last note regarding 'this', I might need it, can i pass in a copy/reference ?

Klaycon Over a year ago

Sure, you can just pass in whichever object the function should be bound to and store the return value of newAction.bind(params.bindTarget) and do as you wish with it.

Jason Over a year ago

bind is totally new to me and im not sure im following, would it be too much to ask you to add a sample to your answer?

Klaycon Over a year ago

@Jason 1. I assumed that you would want to insert the value contained in an_id_variable into the new function code, so I used an ES6 template literal to accomplish that easily. It's equivalent to "history.pushState({id:" + an_id_variable + ",name:'homepage'},null,uri);" 2. From the error it seems like you're just writing the new Function(...) part as a standalone statement, without assigning it to anything or calling it, which can never be valid, it must be stored or used somehow.

Klaycon Over a year ago

That's reasonable, solutions involving dynamically editing code are rarely clean or really desirable. Best of luck with the rest of your project!

|

Collectives™ on Stack Overflow

Inject javascript into object function

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related