The main struggle was implementing the Authentication using cookies and tokens while making sure that the endpoints followed the validation rules. I didn't really struggle with this, but implementing Argon2 was a process where I had to be safe. I needed to make sure credentials were secure and error messages that I set to debug didn't leak sensitive info (like if a user name already exists, etc).
The difficulty here was managing the login state and rendering based on the users permissions. Reflecting how the UI would look based on who is log in was something I really had to hone in on. Examples is when to show edit and delete buttons. I also realized I had to store the username and handle the welcome messages when the page refreshes. In general, keeping the react state in sync with the actual cookie data was tough.
I would say that deployment was the hardest part of this assignment. I first struggled the with Caddy reverse proxy setup because I had a small issue in my caddyfile, where I wrote ishanpatel.com instead of ishanmpatel.com. It was a small mistake, but it was VERY tough to find out. It was also partly due to waiting for DNS propogation on my porkbun (adding cs478). When I finally got that figured out, I ran into another issue where my backend was working, but my app was a blank white screen because I believe my express card was taking requests from old JS files. I had to reorder my middleware and fix directory structure to ensure the public folder was being served correctly.
I was not vulnerable to XSS attacks. I would say that my app was largely protected from XSS because of how I used REACT. It handles variables that have JSX, so it renders the commands as plaintext rather than an executable line. The Helmet package also helps with handling inline script calls because it restricts where resources can be loaded from.
My app was not vulnerable to CSRF attacks. This was because I configured the authentication cookies it an attribute that ensured that the browser wouldn't send the session cookie during the cross site requests. This means the attacker can't trick a user into clicking the link that would delete their data. I also made sure the actions like POST, PUT and DELETE properly check for a valid session token.
I added rate limiting directly to my application code by using the express-rate-limit package. I made a limiter for the login and set 15 requests for 15 minutes. I used an uncomplicated firewall to ensure only verified port were open.
I used helmet ot set headers. One of the prominent ones was Content-Security-Policy that helps prevent XSS by communicating with the browser of wanted scripts. Strict-Transport-Security (HSTS) is used to ensure data is always encrypted in transit X-Frame-Options: SAMEORGIN was used to stop clickjacking
I used PM2 to manage the server process, as suggested by the instructions. It automatically restarted the app whenever it crashed. Obviously, Tailscale was used for backend access , which also allowed server managemnet.