0

So i seem to have found the ultimate problem that i believe has an easy way to get around, but me personally after 3h of research on all forums gave up XD.

So i visited an online React website that contained webplayer.js file. Inside this bundle, we have an incredibly large and nested array that stores all the variables of the app and that no recursive function can get into before exceeding recursion limits.

The reason i want to reach a variable in this js file is to be able to manipulate a variable with my own js file(trying to create a plugin/tampermonkey script, never been so though XD). So i would like to find this specific key inside the large array in for example the chrome console to be able to edit it.

If i want to manipulate a variable here thats located in this large array for example: ("video-autoplay" : true), the only way i am able to do this right now in chrome is:

  1. Place a breakpoint where the webplayer.js sets var autoPlay = Key to ("video-autoplay" : true)
  2. manually edit the variable when the breakpoint hits it...

The reason this works is when i hit the breakpoint i get into the same scope as that variable and i can simply from the chrome console now type autoPlay = False;

But to make this automated, i cannot rely on setting a breakpoint, therefore i somehow need to be able to get access to this key in the very large array.

Is there maybe a javascript function that can get this key without recursive search, maybe through a hash id(then using some sort of lookup table?) or something similar that i can inspect when i hit the breakpoint for var autoPlay = ... and try to find maybe a way to uniquely reach that variable again after im out of the scope. (i did try to add it to the watch list, but again as soon as the breakpoint continues and goes out of scope it gets deleted)

So all in all, i believe that React variables that is coded turns into an array of nested variables when building the production files. So if React can manage to instantly accessing these variable in the nested array it leads me to believe that there's got to be a lookup table of some kind that we should be able to say something like var unreachableKey = GetKeyFromNestedArray("video-autoplay")??

Big thanks beforehand! :D

Edit Attached code pieces:

This is a very small part of the array structure This is the array structure

This is one of the places i could find the variable and simply placed a breakpoint. enter image description here

ps. original file said r = t.videoAutoPlay i changed it to r = t.video-autoplay to match everything :D

CoffeDev
  • 258
  • 2
  • 12
  • 1
    You've done a great job describing the problem, but we need to see code too. – Ian Kemp Sep 28 '20 at 22:18
  • @IanKemp Oh sorry, ofcourse will upload in a sec! :D – CoffeDev Sep 28 '20 at 22:20
  • If a tiny library is permissible, something like (disclaimer: my) [J-Path](https://mitya.uk/projects/j-path) would do it. – Mitya Sep 28 '20 at 22:40
  • Please do not upload images of code. See [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) – Phil Sep 28 '20 at 23:10
  • @Phil oh sorry, did it so intellisense coloring would help visualize it better :( – CoffeDev Sep 28 '20 at 23:12
  • Recursion limit in Chrome is ~10,000 so is your object really deeper than that? Anyway, such a recursive function can be flattened by using an array as a stack, [examples](https://stackoverflow.com/questions/159590/way-to-go-from-recursion-to-iteration). P.S. And yeah, replace the pictures with actual code. – wOxxOm Sep 29 '20 at 03:47
  • @wOxxOm The array i do believe is a lot bigger than that XD – CoffeDev Sep 29 '20 at 10:47
  • @CoffeDev, I asked about the level of nesting, it's not directly related to the size. An array can be big but be only a few levels deep. Under the answer you've said `400` levels which is not a problem as Chrome can easily handle 10,000 levels of recursion. – wOxxOm Sep 29 '20 at 11:04
  • Ok! Then i understand a little better, maybe the algorithms that i used was flawed and used to many unnecessary recursive calls! I will try it out again by building a new simple algorithm and check if i can find this hidden gem in the array :D – CoffeDev Sep 29 '20 at 19:04
  • "since Object.keys() function also splits strings into separate characters" This claim is not true. `Object.keys()` returns an array of strings...period. There is some other piece of code that is iterating over the characters in those strings. Most likely it's code that expects an array but gets a string instead. – Code-Apprentice Sep 29 '20 at 20:53
  • @Code-Apprentice Oh i understand, well the point is then that it was important to safeguard against this :D – CoffeDev Sep 29 '20 at 20:56
  • @Code-Apprentice well actually just tried Object.keys("sup") and it did indeed return every index of the characters, so in someway it "splits" the word "sup" into three new keys. I think i just explained it with wrong terms XD – CoffeDev Sep 29 '20 at 20:59
  • @CoffeDev So `Object.keys()` on a string gives numeric indexes. This makes sense since that is how we refer to individual characters on a string. The problem here isn't with `Object.keys()` per se. Rather it's that in a recursive function, you are most likely expecting `Object.keys()` to be called on an object, but if you call the recursive function one level too deep, you will call `Object.keys()` with a string parameter. – Code-Apprentice Sep 29 '20 at 21:03

2 Answers2

0

You can access elements of an object matrix with this syntax:

let array = {"arr": {"nested1":{"nested2":{"nested3": "Hello!"}}}};
let deep = array["arr"]["nested1"]["nested2"]["nested3"];
console.log(deep);
Dharman
  • 30,962
  • 25
  • 85
  • 135
Mick
  • 796
  • 4
  • 8
0

I have successfully managed to get to this very nested and nasty key(there was not only dictionaries but mixed dictionaries and lists all the way)! Thoughy i may share the code for anyone in the future if needed. And i may say that it is a recursive function that managed to get it, the reason i could not get it before was that most of the codes for such a function posted here at stackoverflow also iterated through every character in every string since Object.keys() function also splits strings into separate characters which made the recursion depth go insanely deep!

So heres a refined code:

function findByKey(obj, key) {
    if(obj==null || obj==undefined ){
        return;
    }
    if(obj.constructor === Object || obj.constructor === Array){
        var keys = Object.keys(obj);
        for(i in keys){
            var i = keys[i];
            if(key == i){
                return obj; 
            }else{
                var test = findByKey(obj[i], key);
                if(test != undefined){
                    return test;
                }
            }
        }
    }else if(obj == key){
        return key;
    }
    return;

}

Big thanks to the user wOxxOm that pointed out that such a function should be able to work with the recursive depth and therefore i could manage to seek out the problem.

CoffeDev
  • 258
  • 2
  • 12