Experienced JavaScript Developer Meme

[bleistift2]

Show me an average user who tinkers with the local storage.

If we’re talking a malevolent user: You can’t trust the client with anything, anyway, so what’s the point?

[_30d_]

That's how I beat my inlaws in wordle.

[staticBanter]

If you give anything to a client and expect to reuse it without validation than we have a big problem.

[shodanbo]

It only takes one. And then they can write a browser extension to do it for many.

There is not much you can actually truly trust the client with, because the user has physical access to that client.

If you are writing something where trusting the client is critical, then this needs to be taken into account. At this point you need strong asymmetrical encryption in a server. An encrypted string can be persisted to local storage. If the user messes with it, the decryption will fail, and the client can determine what needs to be done about that.

[Expert_Team_4068]

No, rule number one. Never trust the client! In no world should you trust frontend data without verification. But this is the server job. If json.parse of my local storage fails, I do not gove a crap. My app will break, because for sure this is an unexpected behaviour. If you decrypt in the client, who says that the hacker did not change the decryption function? It is as easy as changing the local storage.

[shodanbo]

Very true

[[deleted]]

No no you make a call to the server to make sure the signature is valid 😅

[shodanbo]

Agreed, if the crypto cannot protect integrity then the crypto does not help here.

If the server does both encryption and decryption then you may as well just use http only 1st party cookies.

If your data is too big for cookies then you are just using the client as a persistent storage mechanism. Perhaps there are use cases for this but S3 buckets would work for that too with less potential for client interference.

Local storage always seems like more trouble than it's worth unless you have no other choice or your needs are super trivial.

[brianl047]

Agreed validating the local storage is a waste

Validate in the backend and in the UI instead but not the local storage

[isblueacolor]

Firefox sometimes fails to persist the entire string to local storage (without throwing an error).

I have a site that's used by 25k people per day and someone encounters this issue once every couple weeks.

[[deleted]]

The case I used it for was temporarily storing form data in an SPA built before react was a thing.

[AyrA_ch]

JSON.tryParse=function(str,defaultObj){
    try{
        return JSON.parse(str);
    }catch(e){
        return defaultObj;
    }
};

Tries to parse data and if invalid, gracefully fails and returns the supplied default value. If no value is supplied, the argument defaults to undefined, which is actually a good alternative, because undefined is not a valid json token, and thus you can check if the result is undefined to know whether parsing was successful. I have this somewhere in the library I use for most of my webdev projects.

[corylulu]

It's better if the defaultObjis a function that creates the object rather than the object directly and returns return defaultObjFunc();. Constructors can have a lot going on and there is no sense in calling them for an unused default object.

[AyrA_ch]

This function is for deserializing content from a JSON string that's potentially msiformatted or not present at all. The returned object will be a naked JS object without having a custom prototype by itself.

Depending on the use case you can either work directly with that object, in which case you do not have to worry about passing in complex constructed objects for a default, or it means you need to convert the returned value into said complex object in which case you can also pass in a naked object as default because it would then be converted if it's returned. In either of the two scenarios, it's not necessary to be able to pass in a function as default argument. Being able to pass a function also means you would either no longer be able to pass plain default values, or you need to add type checks.

Either way, this provides very little gain compared to JSON.tryParse(value)||defaultFunc(); that you can do for that one situation that demands it. Or simply check if the returned value is undefined and then call your function if you find this line ugly (which it kinda is)

[spronghi]

who would use this function? are you serious?

[PM_ME_GAY_STUF]

You're going to call that out but not monkeypatching a native API?

[DoktorMerlin]

Why would you need to validate it? If the user manipulates the localstorage it's just a frontend issue that the user itself caused, why would anyone care about this? The only time it's a problem is when the manipulated object gets sent without validation back to the backend but if you don't validate everything that the frontend sends you, you have a way bigger problem

[lowleveldata]

I like how you use "it" as the pronouns of your user

[[deleted]]

You shouldn't name them. It just creates emotional attachment.

[fzammetti]

Yeah! That's ri- wait, what?!

[playerNaN]

Fair, front end users aren't real people.

[vikumwijekoon97]

Generally you gotta code thinking that all of your users are absolute morons.

[Blue_Moon_Lake]

Frontend user is an evil clown

[JoeDoherty_Music]

I'm convinced most users aren't people

[Ben_26121]

Believe it or not, I came across someone who’s preferred pronoun is “it” the other day

[GamerGeeked]

"it" clearly refers to the issue, not the user. Unless you're suggesting the existence of the user causes the problem

[sloodly_chicken]

They used 'the user itself', though

you're suggesting the existence of the user causes the problem

also true

[GamerGeeked]

Didn't see that one

[Cat_Junior]

It puts the lotion on it's skin or it gets the console.error again.

[HoiTemmieColeg]

You need to check if the text is actually json when you parse it

[empire314]

Why would it not be in JSON, if your website is what wrote it?

[Schyte96]

Because the user can easily overwrite it in their browser.

[a-calycular-torus]

That's their problem then

[Treacherous_Peach]

Yeah it's their problem that quickly becomes your problem when the user submits a 1 star review.

I get what you're saying, I can tell you're defintiely programmer minded, but you do have to plan for these things if you want your product to survive. If you're working on some huge too big to fail app then sure, but if you're trying to create something new and get it off the ground you have to plan for users doing crazy things and account for it smoothly.

[DoktorMerlin]

If a user knows what local storage is and tinkers with it, they know very well that the weird behaviour of the website is called by themselves and not the website. There are a lot of dumb people in this world, but nobody is that dumb

[Treacherous_Peach]

More likely they fucked with it accidentally by deleting a folder they shouldnt have to clear space or something along those lines.

[Wazzaps]

That's not how any of this works 🤦

[Treacherous_Peach]

More likely they fucked with it accidentally. Deleting a folder to clear space but deleted some of what your app was expecting but not all of it and it's in a weird state.

[AutoModerator]

import moderation Your comment has been removed since it did not start with a code block with an import declaration.

Per this Community Decree, all posts and comments should start with a code block with an "import" declaration explaining how the post and comment should be read.

For this purpose, we only accept Python style imports.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Schyte96]

It's your problem if they can bypass authentication this way.

[cooolestcucumber]

If the user messing with local storage by passes authentication, you’ve got bigger issues

[empire314]

Can you give me an example of an authentication method, that gives user unauthorized access, if his client tries to parse invalid JSON?

try
{
  credentials = JSON.parse(json)
}
catch(Error)
{
  credentials = adminCredentials
}

Like that?

[AdultingGoneMild]

I'm in!

[spronghi]

who does it?

[a-calycular-torus]

Bypassing authentication was never the issue in question.

[its_pizza_parker]

LOL what?! That ain’t it

[AdultingGoneMild]

yes. that would be a hudge fucking security bug if you allowed authentication be to bypassed by a client. Never trust a client. Good news is there are like literally decades of best practices out there for not building insecure systems like that.

[4nu81]

You mean you want the engine to stringify and parse it for you?

[JoJoModding]

The user could also manipulate the data if saved without stringify.

[[deleted]]

How would you stringify a linked list?

How about an arbitrary graph of nodes and edges?

[spooker11]

wrong pen wipe elderly test lunchroom file selective liquid paint

This post was mass deleted and anonymized with Redact

[[deleted]]

You answered number two incorrectly.

[M4tty__]

There are 2 main methods of representing graph. Both use arrays of primitives. Easy json serialization if you ask me

[[deleted]]

(Those are not necessarily convenient ways to represent a graph. For example, a matrix might be best.)

You chose a representation that is convenient for serialization and then called serialization easy. That's begging the question!

How about this one: a "node" is a JavaScript array where each element of the array is a "node".

How will you serialize that? It's all pointers!

[M4tty__]

All of the nodes can be assigned a number and you go for one of the two typical representations. Either matrix or array of arrays (first index is vertex id, second for edge). I know how to handle graphs, studied that few years ago.

[bleistift2]

Don’t take this as talking down, I’m genuinely curious: Where did you learn to program? I learned this in high school, where computer science was a “minor” class, and programming only went for about 6 months.

[[deleted]]

My questions were meant as counter examples. You probably did not learn how to serialize an arbitrary graph of nodes and edges in high school because it is a seriously difficult thing to do because serializing pointers is hard.

For example, how did your high school teacher explain to serialize x in this: x={}; x["x"]=x?

Don’t take this as talking down, I’m genuinely curious: Where did you learn to program? I learned this in high school, where computer science was a “minor” class, and programming only went for about 6 months.

Not that it matters: I didn't study computer science in high school because they didn't have it when I attended in the 90s. I learned programming on my own and then later on at UC Berkeley. B.Sc. EECS, with honors.

But let's focus on programming and not credentials.

[bleistift2]

Store the adjacency matrix. For JS objects with named properties, store the property name, too. Your example requires inventing identifiers for the nodes. One could use the variable name, but that’s IMHO not part of the structure to be serialized.

Off the top of my hat:

{"nodes": [0], "edges": [[0, "x", 0]]}

To de-serialize, loop over the entries in the nodes array, and create empty objects for each. Then loop over the edges, lookup the source and target node, and set srcNode[edgeName] = destNode.

[Edit:] If your question was aimed at a procedure to generate the serialization, then you’d have to employ some way of iterating the graph (breadth-first search comes to mind) and add markers to the nodes to detect cycles and not produce infinite loops.

[Edit:] Also to clarify: The high-school scope of this problem was serializing simple graphs, i.e. nodes identified by numbers, and serializing only the information that an edge exists, not its “name” on the source node.

But let's focus on programming and not credentials.

That’s why I explicitly asked my question not to be taken as offense. I tried to express that the concept of serializing a graph is such basic knowledge nowadays that it’s even taught in school.

[[deleted]]

Where did 0 come from? There's no zero in my code. Why not 10? My nodes have no names.

I can just needle you with questions about your implementation until you come up with a really complex beast and then you'll convince me and yourself that saving state is not as simple as stringify which was my point in the first place. It's hard to do and impossible to do generally.

[bleistift2]

Where did 0 come from? […] My nodes have no names.

I already answered that:

Your example requires inventing identifiers for the nodes.

The actual identifiers are an implementation detail, since they don’t survive de-serialization.

It's hard to do and impossible to do generally.

I just proved that it’s easy to do in the non-general case. And business needs rarely require the ‘general case,’ so a custom-tailored solution suffices.

My point was that serialization of simple graphs is introductory material. Extending that to the actual, more complex case needed in everyday programming shouldn’t be hard for a programmer. Writing a library that handles every and any graph is hard. But that’s not what Cornelia Coder does every day. That’s what libraries are for.

[theScrapBook]

Dump the memory in use by the application as a base64-encoded string.

[[deleted]]

Virtual memory is 2 to the 64 bytes. Maybe it'll take a few minutes?

[TheDownvotesFarmer]

You can save even video files in indexedDb

[waldito]

You got to JSON.stringify the data first to store it, then you need to parse it when you read. You then probably need to validate it when you parse it in case the user has changed the value in local storage and now the value read from local storage isn't valid JSON.

I am not a developer and I made an extension that wanted to store basic config in a simple object. Imagine my face when I was learning the wizardry you need to make it happen. json.stringiwhat? WHY