Lecture 6 - Web Security & Front-end Frameworks PDF

Lecture 6 Web Security EIE4432 WEB SYSTEMS AND TECHNOLOGIES Dr. Pauli Lai 1 Importance of Web Security 1. Protection of sensitive data ▪ Encryption techniques like SSL protect data transmission between users and websites. ▪ Secure storage mechanisms, such as hashing and encryption, safeguard sen...

Lecture 6 Web Security EIE4432 WEB SYSTEMS AND TECHNOLOGIES Dr. Pauli Lai 1 Importance of Web Security 1. Protection of sensitive data ▪ Encryption techniques like SSL protect data transmission between users and websites. ▪ Secure storage mechanisms, such as hashing and encryption, safeguard sensitive information from unauthorized access. ▪ Compliance with data protection regulations (e.g., GDPR) helps ensure user data is handled securely. ▪ Implementing access controls and user authentication mechanisms restrict unauthorized data access. 2 SSL https://www.wpbeginner.com/beginners-guide/how-to-get-afree-ssl-certificate-for-your-wordpress-website/ 3 GDPR Key elements of the GDPR The GDPR requires organisations handling personal data to do so according to its six data processing principles: a) it is processed fairly, lawfully and transparently b) it is collected and processed for specific reasons and stored for specific periods of time, and that it is not used for reasons beyond its original purpose c) only the data necessary for the purpose it is intended is collected, and not more d) it is accurate and that reasonable steps are taken to ensure it remains accurate https://theconversation.com/what-does-gdpr-mean-forme-an-explainer-96630 e) it is kept in a form that allows individuals to be identified only as long as is necessary f) it is kept securely and protected from unlawful access, accidental loss or damage 4 Importance of Web Security 2. Safeguarding user privacy and maintaining trust ▪ Web security measures like anonymization and pseudonymization protect user identities and personal information. ▪ Secure login systems, such as two-factor authentication (2FA), enhance user privacy and account security. ▪ Clear privacy policies and transparent data handling practices build user trust in the organization. ▪ Regular security audits and vulnerability assessments demonstrate commitment to user privacy. 5 2FA Source: https://doubleoctopus.com/security-wiki/authentication/what-is-2fa/ 6 Importance of Web Security 3. Preventing unauthorized access and data breaches ▪ Implementing strong user authentication mechanisms (e.g., passwords, biometrics) mitigates the risk of unauthorized access. ▪ Regular security updates and patches address vulnerabilities that could be exploited by attackers. ▪ Implementing secure coding practices helps prevent common attack vectors like injection attacks. https://fully-verified.com/userauthentication-methods/ 7 Common Threats & Vulnerabilities 1. Cross-Site Scripting (XSS) attacks 2. SQL injection attacks 3. Cross-Site Request Forgery (CSRF) 4. Phishing and social engineering attacks 5. Malware and viruses 6. Brute-force attacks and password cracking 7. Denial of Service (DoS) attacks 8 Common Threats & Vulnerabilities 1. Cross-Site Scripting (XSS) attacks ▪Exploiting vulnerabilities in web applications to inject malicious scripts into web pages viewed by users. ▪Can lead to session hijacking, cookie theft, and unauthorized access to user data. ▪Prevention measures: ▪ Input validation ▪ Output encoding ▪ Using security frameworks that mitigate XSS attacks ▪Regular security testing and code reviews help identify and address XSS vulnerabilities. 9 Cross-Site Scripting (XSS) Explained https://youtu.be/EoaDgUgS6QA?si=EE_gOwFhsyS8Oyzt&t=186 10 What is cross-site scripting? Source: https://www.cloudflare.com/learning/security/threats/cross-site-scripting/ 11 Full story on session hijacking, cookie theft, and unauthorized access to user data (7 min) https://youtu.be/cbmBDiR6WaY?si=0rQOuHZq0myojV3E 12 XSS https://youtu.be/DqK_OYat-3M?si=L81leTSN6Edsvje6 13 Common Threats & Vulnerabilities 2. SQL injection attacks ▪Exploiting poorly sanitized user input to execute unauthorized SQL queries on a database. ▪Can lead to unauthorized data disclosure, modification, or deletion. ▪Prevention measures: ▪ Using prepared statements or parameterized queries ▪ Input validation ▪ Enforcing least privilege access controls ▪Regular security assessments and code reviews can help identify and mitigate SQL injection vulnerabilities. 14 Source: https://www.cloudflare.com/learning/security/threats/sql-injection/ 15 Source: https://www.cloudflare.com/learning/security/threats/sql-injection/ 16 Common Threats & Vulnerabilities 4. Phishing and social engineering attacks ▪Social engineering is a security attack that relies on human interaction to trick users into breaking standard security procedures. ▪Deceptive techniques to trick users into revealing sensitive information or performing malicious actions. ▪Can include fake emails, websites, or phone calls impersonating legitimate entities. ▪Prevention measures: ▪User education and awareness ▪Spam filters ▪Multi-factor authentication 17 What is Social Engineering? Source: https://www.skysnag.com/blog/what-is-social-engineering-definition-types-more/ 18 What is Social Engineering? https://youtu.be/9U-JgdUkaTQ?si=nKPYYGMlsSdNMJff 19 Common Threats & Vulnerabilities 7. Denial of Service (DoS) attacks ▪ Overwhelming a web server or network with a flood of requests, rendering it inaccessible to legitimate users. ▪ Can exploit vulnerabilities in network infrastructure or consume server resources to cause service disruptions. 20 What is a DDoS attack? Source: https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/ 21 DDoS Attack Explained https://youtu.be/ilhGh9CEIwM?si=tVN9L0cS_bCjl4uz 22 Real-life examples of DDoS What was the largest DDoS attack of all time? The biggest DDoS attack to date took place in September of 2017. The attack targeted Google services and reached a size of 2.54 Tbps. Google Cloud disclosed the attack in October 2020. The attackers sent spoofed packets to 180,000 web servers, which in turn sent responses to Google. The attack was not an isolated incident: the attackers had directed multiple DDoS attacks at Google's infrastructure over the previous six months. What are some other famous DDoS attacks? ▪ The February 2020 attack reported by AWS ▪ The February 2018 GitHub DDoS attack ▪ And more … Source: https://www.cloudflare.com/learning/ddos/famous-ddos-attacks/ Preventive measures for DDoS attacks 1. DDoS Protection Services 2. Network Traffic Monitoring 3. Load Balancing and Scalability 4. Firewalls and Intrusion Prevention Systems (IPS) 5. Rate Limiting and Traffic Shaping 6. Web Application Firewall (WAF) 7. Incident Response Plan 8. Regular Updates and Patching 9. Employee Awareness and Training 10.Redundancy and Backup 24 Cryptographic Hash Functions ▪ Hashing ▪ ▪ ▪ ▪ Data transformation into fixed-size output for integrity verification and unique identification. Deterministic and irreversible process with properties like speed, uniqueness, and data integrity. Not the same as encryption; focuses on data integrity and non-reversible transformation. Key tool in password storage, digital signatures, data integrity verification, and certificate fingerprinting. ▪ There are 3 common types of hashing function: ▪ MD5 ▪ SHA-1 ▪ SHA-256 25 Cryptographic Hash Functions ▪ MD5: ▪ Widely used hash function, but considered weak due to vulnerabilities and collision attacks. ▪ Produces a 128-bit hash value, commonly represented as a 32-character hexadecimal string. ▪ Fast and efficient, but not recommended for security-critical applications. ▪ SHA-1: ▪ Commonly used, but considered weak and vulnerable to collision attacks. ▪ Produces a 160-bit hash value, commonly represented as a 40-character hexadecimal string. ▪ Deprecated for security purposes and replaced by more secure hash functions. ▪ SHA-256: ▪ Part of the SHA-2 family, widely adopted and considered secure for most applications. ▪ Produces a 256-bit hash value, commonly represented as a 64-character hexadecimal string. ▪ Provides a higher level of security compared to MD5 and SHA-1. 26 Cryptographic Hash Functions Hash Function Output Size Security Level Common Usage MD5 128 bits Weak Non-critical applications, checksums SHA-1 160 bits Weak Digital signatures, nonsensitive data SHA-256 256 bits Strong Password hashing, digital certificates, sensitive data 27 Salting in SHA-256 ▪ Adding a unique random value to input data before hashing. ▪ Each salted hash becomes unique, preventing precomputed attacks like rainbow tables. ▪ Increases complexity, making it harder for attackers to crack passwords. 28 Cryptographic Hash Functions ▪ Application of Hash Function in Web App: Password Hashing ▪ Protect user passwords by converting them into irreversible, hashed representations that are more secure against unauthorized access. ▪ Online Tool to try: https://emn178.github.io/onlinetools/sha256.html ▪ Imagine you are inputting a password. ▪ The tool will convert your password string into another uncrackable string for storing your hashed-password in database.the 29 Cryptographic Hash Functions JavaScript can be used to implement the password hashing function as well 30 Password Hashing, Salts, Peppers | Explained! https://youtu.be/--tnZMuoK3E?si=eX65Jhe0b730cw8Z 31 Secure Communication: HTTPS ▪ HTTPS is the secure version of HTTP, employing SSL/TLS encryption for secure web communication. ▪ SSL/TLS ensures confidentiality, integrity, and authentication of data transmitted between clients and servers. ▪ Visual indicators like padlock icon and "https://" signify a secure HTTPS connection. ▪ HTTPS protects sensitive information from eavesdropping and tampering, enhancing overall security on the web. 32 Secure Communication: HTTPS Digital certificates and public key infrastructure (PKI): ▪ Digital certificates bind public keys to entities' identities, establishing trust in secure communication. ▪ Certificate Authorities (CAs) issue and verify certificates, acting as trusted third-party organizations. ▪ Certificate chains and trust hierarchy ensure the authenticity and integrity of certificates in the PKI. ▪ Certificate validation involves: ▪ Checking expiration ▪ Revocation status ▪ Verifying digital signatures to ensure trustworthiness https://www.thesecuritybuddy.com/blockchain/public-keyinfrastructure-and-blockchain/ 33 Secure Communication: HTTPS Benefits of HTTPS in securing web communications: ▪ Data encryption ensures confidentiality, preventing unauthorized access to sensitive information. ▪ HTTPS protects against tampering and ensures data integrity during transmission. ▪ Authentication verifies the identity of the server, protecting against impersonation and man-in-the-middle attacks. ▪ HTTPS improves user trust, search engine rankings, and overall website credibility. 34 What is PKI? How does PKI work? https://youtu.be/7U0MgZmx-Lw 35 Lecture 6 Front-end Frameworks EIE4432 WEB SYSTEMS AND TECHNOLOGIES Dr. Pauli Lai 36 Back in the days ▪Frameworks or tools are born in response to a certain problem that needs to be solved. ▪The most critical task of the front-end is to visualize data and status. ▪In the past, when using native JavaScript to perform DOM operations, you had to use a long list of programs to capture elements (such as document.getElementsByClassName(‘.el’)) before the web page elements could interact with users. ▪→ jQuery was born, and we only needed to use `$(' el')` can easily do the same thing, and also solves annoying cross-browser problems. 37 Back in the days ▪The next thing we face is the problem of status management. ▪Everything was plugged into the HTML page → Spaghetti Code ▪Separation of concerns at the presentation level → separated HTML, CSS and JavaScript ▪Separation of concerns at the architecture level → The MVC design pattern divides the program into data logic layer (Model), operation interface layer (View), and operation management layer (Controller). ▪Vue and Angular use the concept of MVVM to extend the two-way binding of data and logic. These frameworks make development more focused on data status. ▪It’s not that outdated technologies or tools cannot be used now, it’s just that as time passes and technology advances, we have better methods, ▪→ the old technologies slowly fade away. Learning libraries or frameworks created to solve inconveniences 38 Web Development Framework ▪ A comprehensive toolset for building efficient, scalable, and feature-rich web applications ▪ React - A popular JavaScript library for building reusable UI components and efficient user interfaces ▪ Angular - A comprehensive framework by Google for scalable web applications with declarative syntax ▪ Vue - A flexible JavaScript framework with a gentle learning curve for building intuitive web applications 39 Source: Stackoverflow Survey 2022 40 Source: https://distantjob.com/blog/javascript-frameworks/ 41 React.js ▪ In 2011, Facebook needed a faster, more dynamic user interface to enhance user experience ▪ Created by Jordan Walke, simplified development with reusable components and structured interfaces ▪ Initially used in Facebook's newsfeed, React revolutionized web development and gained popularity in the JavaScript ecosystem ▪ React's innovative DOM manipulation approach quickly gained traction in the open-source community 42 IS REACT A FRAMEWORK? React is a JavaScript library that’s used for building reactive websites. While it’s not a framework, React does have a dedicated framework called Create React App (CRA) that can be used to build web applications. Developers generally use the terms “library” and “framework” interchangeably, but they’re not the same. The main criteria for frameworks are: • Frameworks provide ready-to-use tools, standards and templates for fast application development, while libraries don’t. • Frameworks control the calling of libraries for our code. • Frameworks give rules and guidelines on writing your code and structuring files and folders. • Frameworks are consistent with APIs, compilers, toolsets and libraries within. • When you use a framework, the control is inverted. The framework controls the flow and calls your code. In contrast, libraries let you control the flow of the application. React does not match these criteria and thus, is not a framework. 43 Pros of React.js ▪ Component-based architecture: ▪ Components can be independently created, maintained, and reused, enhancing modularity. ▪ Loose coupling allows components to work together and bring out the best in the application. ▪ High Performance: ▪ Virtual DOM optimizes DOM updates, resulting in faster rendering and improved user experience. ▪ Efficiently handles changes caused by user interactions, reducing performance bottlenecks. ▪Easy to Learn: ▪ Familiarity with HTML and JavaScript is sufficient to start learning React. ▪ Offers flexibility without enforcing specific patterns, allowing developers to choose their own style. ▪ Mobile App Development: ▪ React Native enables the creation of interactive and high-performance mobile apps. ▪ Same concepts and syntax can be used for web and mobile applications, reducing the learning curve. 44 Cons of React.js High Pace of Development: ◦ Rapid changes in React’s ecosystem requires developers to constantly update their code. ◦ Can be challenging for teams working on critical applications or those resistant to frequent changes. Flexibility and Lack of Conventions: ◦ React’s flexibility may result in a lack of standardized conventions. ◦ Requires experiences team members to maintain a well-structured and stable codebase. Introduction to JSX: ◦ Learning React does not require any prerequisite. However, JSX does not come in handy to a lot of developers while learning React development. ◦ In addition to JSX, developers complaint about the inline scripting feature in React, which is also a tedious task for developers. 45 Sample code – React.js ▪ 2 buttons for incrementing and decrementing a counter value, with the counter value displayed between the buttons 46 Web Development Framework – Angular ▪ Angular, originally known as AngularJS, was first released by Google in October 2010. ▪It was developed by a team led by Misko Hevery, a developer at Google. ▪AngularJS was a JavaScript-based open-source front-end web application framework designed to simplify the development of dynamic web applications. ▪Google took over the development and maintenance of AngularJS due to its success. ▪ In 2014, Google announced a complete rewrite called Angular (Angular 2.0). ▪ Angular introduced new features, expanded capabilities, and changed the expression syntax. ▪However, it is important to note that AngularJS (version 1.x) and Angular (version 2 and onwards) are distinct frameworks with significant differences in architecture and features. ▪Angular (version 2 and onwards) was a complete rewrite of AngularJS and was released in September 2016. 47 Pros of Angular •Trustworth for Future: Since Angular is backed by Google, developers have an enormous amount of trust for building large-scale applications, knowing that it would be maintained for the long term. •Documentation: The documentation of Angular is detailed and very well explains the functionality and working of Angular. Moreover, each concept is explained with an example and easy language that is even useful for beginners. •Scalable: Working on an Angular project as a team is highly scalable, as any minor changes done by any member of the team do not require you to update the entire structure of the project. Moreover, the code base is highly consistent and readable, which increases the efficiency of the project. 48 Cons of Angular •Learning Curve: Angular requires you to be skilled in TypeScript, which according to the StackOverflow survey, is favored by 30% of developers. Therefore, learning Angular requires greater effort than other frameworks. •Size of the Project: The size of the project defines a lot of parameters for an application. However, it is only noticeable in small applications, whereas in large applications, all the projects would weigh around similarly. 49 Sample code – Angular ▪ 2 buttons for incrementing and decrementing a counter value, with the counter value displayed between the buttons 50 Web Development Framework – Vue.js ▪Vue.js was initially released in February 2014 by Evan You, the creator of Vue.js ▪Angular inspired the creators of Vue to discover Vue, based on bringing all the best parts of Angular under one roof and neglecting all the limitations of Angular to create build a lightweight framework. ▪Vue focuses on beginner developers helping them create dynamic web applications without having to go through any prior tedious learning. ▪Vue.js is a progressive JavaScript framework used for building user interfaces. It is often referred to as a "progressive" framework because it can be incrementally adopted into existing projects or used to build full-scale singlepage applications. ▪It offers built-in and user-defined directives to extend HTML with additional functionality. 51 Pros of Vue.Js •Short Learning Curve: In React and Angular, you are required to have to be skilled in TypeScript and JavaScript, respectively. However, Vue is beginner-friendly and does not mandate any prior skills. •Project Size: The size of your Vue project has several advantages, such as directly affecting the SEO of your webpage, as google search console rejects showing heavy websites in the front, which takes more time to load. •Forums and Community: The forums and other community support are very important when heading out in a direction to pick a technology. It helps in maintaining and learning any technology in a further good curve. 52 Cons of Vue.Js •Ecosystem: The ecosystem plays a vital role in applications to adapt to several browsers and operating systems. Vue has a very narrow ecosystem, therefore, does not render in older versions of operating systems and web browsers. •Developers: Other frameworks such as Angular and React are backed by Google and Facebook, which automatically build trust among the people, however, Vue is generally not trustworthy among the audiences. 53 Sample code – Vue.js ▪ 2 buttons for incrementing and decrementing a counter value, with the counter value displayed between the buttons 54 Core Differences: Angular vs React vs Vue Parameter Angular React Vue Initial Release 2016 2011 2014 Support Google Facebook Community Type Framework Library Framework Size Medium Small Very small Language TypeScript JavaScript JavaScript Performance Good Good Good Data Binding Both Unidirectional Bidirectional Learning Curve Steep Easy Easy Popular Websites Paypal, Samsung, Upwork Netflix, Twitter, Amazon Alibaba, Grammarly, GitLab 55 So, how to choose a front-end framework? If jQuery or even native JavaScript can solve your needs, then you may not need to use a frontend framework. If your project is complicated, using frameworks can reduce the difficulty of development. Ease of Learning: Vue > React (JSX) > Angular (Typescript) Number of jobs: React > Angular > Vue Popularity: React > Angular > Vue Richness of features: Angular > React > Vue 56