This content originally appeared on DEV Community and was authored by WEI FENG
"How can our web application run without the browser? That's a good question.. Here are some useful concepts and articles i think a web developer should read regarding browsers."
Table Of Contents
Other Contents
HTML - The one and only guide you need (in progress)
React Concepts Part.1 - The one and only guide you need
React Concepts Part.2 - The one and only guide you need
CSS Concepts - The one and only guide you need
1. Browser Safety
1.1 Cross Site Scripting attack(XSS)
For more information please refer to this link
What is cross-site scripting (XSS)?
Cross-site scripting (also known as XSS) is a web security vulnerability that allows an attacker to compromise the interactions that users have with a vulnerable application. It usually happens because the website does not filter malicious code, it is mixed with normal code, and the browser has no way to distinguish which scripts are trustworthy, which leads to the execution of malicious code.
How does XSS work?
Cross-site scripting works by manipulating a vulnerable web site so that it returns malicious JavaScript to users if the website does not filter the received data. When the malicious code executes inside a victim's browser, the attacker can fully compromise their interaction with the application.
Three types of XSS attack:
- Reflected cross-site scripting:
Reflected XSS is the simplest variety of cross-site scripting. It arises when an application receives data in an HTTP request and includes that data within the immediate response in an unsafe way.
Here is a simple example of a reflected XSS vulnerability:
https://insecure-website.com/status?message=All+is+well.
<p>Status: All is well.</p>
The application doesn't perform any other processing of the data, so an attacker can easily construct an attack like this:
https://insecure-website.com/status?message=/<em>+Bad+stuff+here...+</em>/
<p>Status: <script>/* Bad stuff here... */</script></p>
If the user visits the URL constructed by the attacker, then the attacker's script executes in the user's browser, in the context of that user's session with the application. At that point, the script can carry out any action, and retrieve any data, to which the user has access.
- DOM-based cross-site scripting
DOM-based XSS (also known as DOM XSS) arises when an application contains some client-side JavaScript that processes data from an untrusted source in an unsafe way, usually by writing the data back to the DOM.
In the following example, an application uses some JavaScript to read the value from an input field and write that value to an element within the HTML:
var search = document.getElementById('search').value;
var results = document.getElementById('results');
results.innerHTML = 'You searched for: ' + search;
If the attacker can control the value of the input field, they can easily construct a malicious value that causes their own script to execute:
You searched for: <img src=1 onerror='/* Bad stuff here... */'>
In a typical case, the input field would be populated from part of the HTTP request, such as a URL query string parameter, allowing the attacker to deliver an attack using a malicious URL, in the same manner as reflected XSS.
- Stored cross-site scripting
Stored XSS (also known as persistent or second-order XSS) arises when an application receives data from an untrusted source and includes that data within its later HTTP responses in an unsafe way.
The data in question might be submitted to the application via HTTP requests; for example, comments on a blog post, user nicknames in a chat room, or contact details on a customer order. In other cases, the data might arrive from other untrusted sources; for example, a webmail application displaying messages received over SMTP, a marketing application displaying social media posts, or a network monitoring application displaying packet data from network traffic.
Here is a simple example of a stored XSS vulnerability. A message board application lets users submit messages, which are displayed to other users:
<p>Hello, this is my message!</p>
The application doesn't perform any other processing of the data, so an attacker can easily send a message that attacks other users:
<p><script>/* Bad stuff here... */</script></p>
How to prevent XSS attacks
Preventing cross-site scripting is trivial in some cases but can be much harder depending on the complexity of the application and the ways it handles user-controllable data.
In general, effectively preventing XSS vulnerabilities is likely to involve a combination of the following measures:
Filter input on arrival. At the point where user input is received, filter as strictly as possible based on what is expected or valid input.
Encode data on output. At the point where user-controllable data is output in HTTP responses, encode the output to prevent it from being interpreted as active content. Depending on the output context, this might require applying combinations of HTML, URL, JavaScript, and CSS encoding.
Use appropriate response headers. To prevent XSS in HTTP responses that aren't intended to contain any HTML or JavaScript, you can use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend.
Content Security Policy. As a last line of defense, you can use Content Security Policy (CSP) to reduce the severity of any XSS vulnerabilities that still occur.
1.2 Cross-site request forgery(CSRF)
Refer to this link for more info
What is CSRF?
A CSRF attack refers to a cross-site request forgery attack. The attacker induces a user to enter a third-party website, and then the website sends a cross-site request to the targeted website and bypass the same-origin policy.
The key point of the CSRF attack is to impersonate the user by stealing the cookie as cookie will be carried in the same-origin request and sent to the server.
How to prevent CSRF attack
- Perform same-origin detection: The server should decide whehter the request is allowed based on the request header's origin or referer section.
- Use CSRF token: The server returns a random number Token to the user. When the sends another request, the token will be add to into the request header, and the server verifies this token.
- Set the samesite attribute in Cookie: It will not allow the cookie to be used by third parties, so as to avoid being exploited by attackers.
1.3 What is a man-in-the-middle attack?
Man-in-the-middle attack (MITM) refers to the fact that the attacker establishes a unique connection with both ends of the communication, and exchanges the data they receive, so that both ends of the communication think they are passing through a private connection and a direct conversation with each other, but in fact the entire conversation is completely controlled by the attacker. In a man-in-the-middle attack, the attacker can intercept the two-way communication and insert new content.
The attack process is as follows:
The client sends a request to the server, and the request is intercepted by the middleman
The server sends the public key to the client
The middleman intercepts the public key and keeps it on his own. Then create a fake public key and send it to the client
After the client receives the fake public key, it generates an encrypted hash value and sends it to the server.
The attacker obtains the encrypted hash value, decrypts it with its own private key to obtain the true key, and at the same time generates a fake encrypted hash value and sends it to the server
The server decrypts with the private key to obtain the fake key, and then encrypts the data and transmits it to the client
What may cause front-end security issues?
Other than the above mentioned, we should avoid abusively using iframe. The content inside iframe is provided by the third party. By default, they are not controlled. They can run scripts, Flash plug-ins, pop-up dialog boxes and anything beyond control.
2. Thread and process
The difference between thread and process
To be continue...
3. E-tag
This content originally appeared on DEV Community and was authored by WEI FENG
WEI FENG | Sciencx (2021-12-04T13:00:47+00:00) Browser Concepts – The one and only guide you need (In progress). Retrieved from https://www.scien.cx/2021/12/04/browser-concepts-the-one-and-only-guide-you-need-in-progress/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.