Rebuilding Serenity

Have you ever seen Firefly? I have. Many, many times. What about the movie Serenity? I literally love them both. At the end of Serenity, the music is literally too moving for words. I have always found it so so so so healing. And so that's what today's blog theme is focused around. It is called Funeral/Rebuilding Serenity.

But let's just focus on the latter part. And it's a beautiful memory. Because the name of the spaceship is Serenity, and they need to rebuild it. But Rebuilding Serenity implies, of course, rebuilding peace.

And hey, it continues my space theme from last week!

If you haven't seen it already, I highly recommend watching the TV series and the movie. It is basically the most cult TV series of all time. At the end of the only season ever made, before it got cancelled, due to the episodes being aired at unhelpful times and in the wrong order, all of the characters will feel like your best friends. And the fans literally crowd-funded the follow-up movie - now show me where that's ever been done before.

OWASP Top 10 for Web

I am taking OWASP's Top 10 for Web internet security training course (for web developers, I am assuming).

Server Side Request Forgery - Brief Notes

Vulnerability
Attack Surface

"Attack surface mapping is the process of analysing an application's core functionality, business logic, and control flow to identify potential inputs or vectors through which an attacker could to try to ender an application environment."

Backend Code

It was very advanced (but then they broke it down a bit).
It mentions passing arguments, and methods.
It mentioned more methods - but then I realised this was in Java - (even more) why I didn't get any of it.

Server Side Request Forgery - Longer Version

This was based on a real life incident - the Capital One data breach 'that exposed the records of almost 106 million customers'. Apparently, the hacker "exploited a Server Side Request Forgery (SSRF) vulnerability to access AWS cloud endpoints." These are often "encountered in functionality" associated with PDF generation and file uploads.

I can see how the "Change Card Image" service creates a vulnerability within the web. On the fake bank's website, "the Card Design Studio applet allows users to upload a user-supplied image". Using the widget URL, the hacker can the the parameter/value pairs. The hacker sees a URL being passed as a parameter (this rings a bell to me as I have been learning JavaScript functions and now know what a parameter is).

The hacker then tries to replace the original URL with his own URL. He is able to trick the 'preview applet' into using an external image. This worked because the bank application server itself "made the HTTP request to fetch the image URL and rendered the image". This in itself is the server side request forgery.

In other words, this is the "ability to manipulate a web application into sending unauthorized requests to a third-party site or resources". Arrrrrgh this is crazy! 😲 And so complicated. It's a lot t to learn!!!

This course then showed me the applet's Backend Code and ARRRRRGH, did it get complicated.

Okay I'm pretty extremely lost here, but THEN, what happened NEXT, is that "by passing [an] AWS metadata URL arugment t othe URL parameter url, [the hacker' manages to retrieve all categories of instance metadata associated with [the bank's] webserver!".

Ummmmm... that sounds bad, right? Then the hacker uses IAM roles (=he ) which I know (!!!) from working in a previous tech team that this is to do with authentication (and stuff) and like logins (and stuff). So the hacker STEALS some IAM credentials. And then he uses that to put it directly into the server (somehow!!!).

This returns a bunch of tokens. These are basically access keys.

He then does some command line mojo and boom! That's it. He gets access t oa ton of things

Moving Forwards From Here

Okay so this was meant to be Top 10 but I think one is enough for today.

I'd like to continue to do the others - and I'll happily do them another time!!!

There are 2 more I'd really like to do (as there seem to actually be a lot more than 10!):

TikTok Cross Site Scripting (because I actually know what Tik Tok is...)
SQL Injection (because I actually know what SQL is, and I have coded in it before).

MDN Stuff (More To Come Later)

Okay so on Friday I said I wanted to look up two JS things on the MDN: the Math built-in object and the Math.random method.

Math

So first of all let's quote the MDN directly.

"Math," it says, "is a built-in object that has properties and methods for mathematical constants and functions. It's not a function object".

As if I even know what a function object is!!!

"Math works with the Number type. It doesn't work with BigInt"..

Here are a few more useful sentences on the Math built-in object from the MDN.

Math is a global object.
It is not a constructor.
All properties and methods of Math are static

I don't even know or understand what that means, but let me type that out again:

All methods and properties of Math are static.
All properties and methods of Math static.

You refer to the constant pi and Math.PI and to the sine function as Math.sin(x), where x is the method's argument
Constants are defined with the full precision of real numbers in JavaScript.

Yeah right. As if I really know what any of this means.

I will leave the Math.random method for tomorrow or Wednesday as tomorrow I am likely to be swamped...

Chakra UI

So some of my colleagues have been talking about Chakra UI - and it came up as a keyword in Wednesday's post. So Artur sent me a link (this is his area of expertise) and I have been having a look. By its own definition, Chakra UI is: "a simple, modular and accessible component library that ives you the building blocks you need to build your React applications".

Okay so I went to YouTube because I was still confused. And what it has described it as so far was:

A component library for React

As if I even know what this means
What is a component library

So when you use Chakra in React, you get access to all of its "pre-built and pre-styled" components.

Like:

Button Components
Input Components
Avatars
Lists.

It is:

"A really quick and easy way to mock up React websites".

Using "pre-built components".
"So that we don't have to make them from scratch".

State Management

Another word my colleagues are CONSTANTLY using is state management and in the same blog post I noted that I didn't know what it was. Then as if by magic one of my LinkedIn friends Farshad made a post about it. So even with the really great post I was a bit confused at first so I started with this sentence and it really helped: (Imagine you are adding items to a shopping cart)

"The state of the shopping cart (items added, price of the items needed etc.) needs to be accurately saved and reflected as the user navigates through the application". In the example the user would be annoyed if they added tickets to their cart but they were not present in the checkout area.

This also affects video streaming services e.g. like when YouTube or Netflix remember where you were in the video or in the show.

So what do we need to do in order to enforce this (and to enable it/to actually make it happen)?

Keep track of:

Values of variables
The state of an application

This is important because:

It helps ensure that an application is:

Stable
Predictable
Easy to Maintain

It helps:

Improve the performance of an application - how?

By reducing unnecessary re-rendering.

100% of the credit goes to Farshad here! I have just paraphrased his post.

Lazy Loading

So one of the words that came up today during my team meeting was lazy loading. I couldn't believe it - I thought it was a direct criticism of others' work until I realised that this was a technical term (I'm getting better at picking up on these).

So my first search across YouTube seems to suggest that it has something to with images.

But what the MDN tells me (and remember, on Friday, I said that I needed to start using the MDN more often): is that lazy loading is a strategy to load resources only when they are needed if they are non-essential. I think it identifies them as well, although I'm not sure how it does that. Apparently one of the ways we can do this is by shortening the critical rendering path - yeah right, as if I know what that is.

Critical Rendering Path

"The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen" - (MDN). Well there you go, now I know.

It also says that:

"Optimizing the critical render path improves render performance".

Okay, well now I know, now.

More Keywords

Business Logic

Guys, what is business logic? I've been hearing it everywhere. I've been hearing it absolutely everywhere.

What is business logic? What is business logic??!

Become A TypeScript Wizard

I mentioned in my team meeting this morning that I had been revising TypeScript on Friday (following my impromptu sessions with Artur and Mark on Thursday - still so HYPED over these). One of the Senior Engineers, Richard, sent me this link to this YouTube channel, which is called "Become a TypeScript Wizard".

YES PLEASE!!!

I am really SO EXCITED to watch this. I'm not sure what the best approach to this is or what the best timings are - but all I know is that I just REALLY WANT TO LEARN TYPESCRIPT.

Beginning to Understand the Great Code of DOOM

Remember this?

let fred = function(var1, var2, f1){

return f1(var1, var2);
}

let funk = function (v1, v2){

return v1 * v2;

}

let result = fred(5,6, funk)

That's right! It's the GREAT CODE OF DOOM from last Tuesday's Codebar session with Jules.

Adam made it all click for me with just once sentence:

"So you passed 5 & 6 to fred and then fred passes 5 & 6 to f1"

And that's it. I thought you were passing the variables to f1 (i.e. funk) and so I couldn't make sense of why they were the same as in fred - but you are passing them to fred. YOU ARE PASSING THEM TO fred. And then fred INPUTS THEM INTO f1.

Which in this case is funk.

I CAN GO HOME NOW.

BYE.

Search This Blog

Susanna Codes