Dynamically get/set object properties using bracket notation

Get Help JavaScript
#1

Is it secure to get/set JS object properties dynamically using bracket notation?

Do I need to include some kind of guard code when I am getting/setting JS object properties dynamically?

Recently, I read an article saying something about prototype access or user can pass in things into my bracket notation to get or set properties.

Actually, I’ve got two youtube video links here, where a streamer talks about bracket notation security vulnerabilities.


Don’t watch the whole video, it’s really long, just watch where he is talking about bracket notation stuff (I have paste the time below ).
Watch time: from 3:12:35 to 3:14:10 (About 2 minutes talking bracket notation)
Bracket notation problem youtube video 1

Watch time: from 4:16:20 to 4:17:38 (About 1 minutes talking bracket notation)
Bracket notation problem youtube video 2

Do you guys know what he is actually talking about?

#2

Using the bracket/associative array notation is perfectly safe, for example:

const myObj = {
   a: 'b',
}

const getProp = val => myObj[val]

console.log(getProp('a'))

however, the youtube video seems to deal with user input. Rule 1 (okay, maybe not rule 1, but certainly high up there) of programming: never trust user input, always validate

you will always need to validate user input to prevent the input from doing something undesired. That is not associative array notation specific.

1 Like
#3

If I have something like this do I need to validate/sanitize?

const myBtn = document.querySelector('button');

const fruits = {
  fruitOne: 'Apple',
  fruitTwo: 'Orange',
  fruitThree: 'Peach'
}

btn.addEventListener('click',(e)=>{
  /* validate/sanitize fruitProperty variable?? */
  const fruitProperty = e.currentTarget.classList[0];
  /* Or using innerHTML*/
  const fruitProperty = e.currentTarget.innerHTML;

  const fruit = fruits[fruitProperty];
  console.log(fruit);
});

cause bracket notation can run javascript right? and “fruitProperty” is getting data from html element class or element innerHTML, so if the user wrote some javascript code in html element class or element innerHTML, the code will run inside of bracket notation right? I also did a test, currently the button doesn’t have any class on it, so if I click the button, it logs out undefined in console but if I add “fruitTwo” to the button element class using chrome dev tools(elements panel), it will log out ‘Orange’ in console, does above problems count as security vulnerabilities??

I actually have one more question, if I only have front end and no back end stuff like server or database, do I still need to sanitize user input? For example, if I am creating a todo list without any kind of back end stuff, so after the user click the add button, some createElement code will run and append it into another html element and that’s it, no server or store in database, is the sanitize user input still require?

Sorry for so many beginner questions, I am still really new to web development

#4

well, I would have to watch more of the video, but I don’t think you can directly compare the situations. The twitch one seems to deal with some kind of API/back-end

I would like see the entire code you have, working of just a small snippet (no html code and so forth) would involve a lot of guess-work. Which i don’t like

I would not use .innerHTML when-ever possible, in the docs there is a warning section:

Warning: If your project is one that will undergo any form of security review, using innerHTML most likely will result in your code being rejected. For example, if you use innerHTML in a browser extension and submit the extension to addons.mozilla.org, it will not pass the automated review process.

I would recommend using textContent instead

doesn’t work like that, you can’t say: When using a back-end, you always have to x (x can be anything). You always have to think about security. Even when your todo list is front-end, using textContent is still better then .innerHTML

the problem with innerHTML is that its interpreted as html, which mean we can even inject a <script></script> with executable JavaScript code

#5

After I watched those two videos and some articles about bracket notation, I was really confused, so I just quickly created a simple code so I can play around and understand more about bracket notation.
This is the full code:
html

<body>
  <button>Click</button>
</body>

js

const myBtn = document.querySelector('button');

const fruits = {
  fruitOne: 'Apple',
  fruitTwo: 'Orange',
  fruitThree: 'Peach'
}

btn.addEventListener('click',(e)=>{
  /*
     Getting data from button element's first class..
     Example:
     If the button element's first class is "fruitThree", the console.log will output "Peach" 
     and if the button element's first class is "fruitOne", the console.log will output "Apple"

 
     validate/sanitize fruitProperty variable because it might be executable js code??
  */
  const fruitProperty = e.currentTarget.classList[0];

  const fruit = fruits[fruitProperty];
  console.log(fruit);
});

and thanks to you, I understand a little more about bracket notation and user validate/sanitize but there is still few things I don’t quite get it, like for example, does the above code need to get validate/sanitize? cause if I don’t, firstly, inside of bracket notation I can run javascript code right and secondly, I found out that currently, when I click the button, it console log out “undefined” but if I add “fruitTwo” class to button element from chrome dev tool’s element panel, it will console log out “Orange”, what if someone/user wrote some javascript code instead of just add class “fruitTwo” to button element’s class, so does that count as security vulnerabilitie?? Also if this thing/data is some how sending it to the back end and there is javascript code ready to get execute inside of bracket notation, it’s quite dangerous right?

With my second question, I understand now, so it doesn’t matter if I am doing only front end or front end and back end, I always need to validate/sanitize user input.

#6

You watched a video of something far more advanced, and seem to struggle with placing everything in perspective.

no, given the JavaScript runs in the clients browser.

Too vague a description, you would have to consider security yes, but doesn’t make square brackets unsafe

I think (but I would have to watch more of the video then I like) is that he was dealing with reserved names for certain things on twitch. Which you would have to handle.

1 Like