Fundamentals 4: Intro to Web & Client-Side Security
by Savannah
As you know, the Internet is a really cool and fun place! It follows the client-server model, where clients like your phone or laptop request information from servers, who provide this information. Pages on the Internet consist of HTML (providing the content of the webpage), CSS (styling for the content), and JavaScript (allowing for pages to be interactive).
Unfortunately for website creators, there exists many possibile website vulnerabilities accessible straight from your browser! This is client side security, which deals with vulnerabilites that can be exploited straight from the client. When looking into client side security, Chrome Dev Tools is your best friend. It allows you to look at the website sources, run JavaScript, see network requests, edit cookies, and more.
Slides
Challenges
We will be doing challenges web/control-you, web/sourcery, and web/cooking, web/acm-netsec, and web/terms-and-conditions, available on our platform: https://platform.acmcyber.com. These challenges are ordered by increasing difficulty, but feel free to jump around if you want.
There are more challenges available on our platform if you'd like to try them out.
Resources
The following resources are great to learn more about the topics covered in the slides.
- Chrome DevTools Documentation: The comprehensive resource for various features of Chrome DevTools. Frequently, the Chrome DevTools Developer Advocacy team will put together blog posts and videos to help show off new features and how to use them.
- MDN Web Docs: Document Object Model (DOM): The DOM API has a lot of features that are well documented by MDN. This is a great resource to figure out how to use different features of the DOM API when working on client-side web challenges.
- How to hack the Chrome Dinosaur game: A great exercise in understanding why attempting to secure code on the client-side is a losing battle. This article goes through various tricks for how to hack the Chrome Dinosaur game!