Rebuilding Serenity

-

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.



Comments

Post a Comment

Popular posts from this blog

Hello World

-
Image
 Hello from Susanna Codes! Hi everyone,  My name is Susanna and I'm a 28-year-old aspiring software engineer from Brighton! As I type this, listening to music from "Le Fabuleux Destin d'Amelie Poulain" (it reminds me of home, in Luxembourg, where I am from - I'm missing home quite a lot lately!) and look forward to some Irish Cream tea in my afternoon break, I am thinking: How lucky I am that my amazing colleague Rosana helped me out with a plan for my software engineer journey (she directed me to the front-end first). How HTML and CSS would not have been my first languages of choice had I not been guided in this direction, as in my head they were seen as 'less-serious' langages. How done I am with what other people think of me and if other people see the 'front-end' as softer then so be it! Everyone has to start somewhere. I am so grateful to be on this journey, with Codecademy's Front-End Engineer Career Path.  Thank you to Async Brighton as ...
Read more

Yosemite

-
Image
Yosemite I'll never forget the first time I head the song Yosemite by Lana del Rey. I very nearly clicked away.  It was quite near the start of my Software Engineering journey, right near when I start learning the Front-End/Web Development. I was listening to Arcadia by LDR before, maybe twice, and then Blue Banisters came on. I nearly clicked away in the first 30 seconds but I forced myself to keep listening anyway.  I'll never forget how that song has made me feel. It became my song of 2022 even though I only discovered it in November. I can still listen to it every day and get that complete sense of wonder and of awe that I felt the first time that I heard it. That ending of the song is completely amazing, and it just completely just blows me away every time. "Withstanding all the time, changes, and seasons..." - LDR Concise Body Arrow Functions Why am I so bad at arrow functions? Whyyyyyyyyyyy?  Just kidding, I am beginning to get them. But why are they so hard? ...
Read more

Where To Hide A Star

-
Image
Where To Hide A Star I haven’t read this book but I just saw this title of a forthcoming children’s book on the train and so I wanted to write a blog post based off of this as well. The last six months have been… rewarding and fulfilling. I have managed to make all of my dreams come true and to defy expectations,  Sometimes the best place to hide is in plain sight and if you reread all of my blogs over the last six months (all 200 of them) you would know exactly what I’m struggling at work and what was going on. And why. But I’ve managed to overcome most of my challenges. Neurodiversity. Being very new in the field relative to the expectations of the job. Being in a new workplace environment. All stuff which I can handle and I am doing just fine. Because I am amazing and fabulous and I can do anything. I am loving the job. I am thriving. I am loving just getting on with it. I love my work. I am having massive breakthroughs. On Thursday I had what felt like the biggest breakthrough ...
Read more