Common web security issues, attack principles, and preventive measures that need to be considered in front-end development

With the development of the Internet, Web applications have become more and more popular, but Web security issues have also increased. As one of the builders of web applications, front-end developers need to understand and master the basic knowledge and solutions of web security. This article will introduce the web security issues and preventive measures that front-end developers must know.

1. XSS attack

XSS attack refers to cross-site scripting attack, which is a code injection attack. Attackers exploit vulnerabilities left during web development and use clever methods to inject malicious instruction code into web pages, allowing users to load and execute web programs maliciously created by attackers. These malicious web programs are usually JavaScript, but can also include Java, VBScript, ActiveX, Flash or even plain HTML. After a successful attack, the attacker may obtain various contents including but not limited to higher permissions (such as performing some operations), private web content, sessions, cookies, etc.

XSS attack types:

1. Reflected XSS

When a user clicks on a malicious link, submits a form, or enters a malicious website, the injected script enters the attacker's website. The web server will inject a script, such as an error message, search results, etc., and return it directly to the user's browser without filtering.

Attack principle

The attacker constructs a special URL that contains malicious code.
When a user opens a URL with malicious code, the website server takes out the malicious code from the URL, splices it into HTML and returns it to the user.
After the user's browser receives the response, it parses and executes it, and the malicious code mixed in it is also executed.
The malicious code steals user data and sends it to the attacker's website, or impersonates the user's behavior and calls the target website interface to perform operations specified by the attacker.

2. DOM type XSS

DOM-type XSS attacks actually mean that the front-end JavaScript code is not rigorous enough and untrustworthy content is inserted into the page. Be especially careful when using .innerHTML, .outerHTML, .appendChild, document.write() and other APIs. Do not insert untrusted data into the page as HTML. Try to use .innerText, .textContent, .setAttribute(), etc.

Attack principle

The attacker constructs special data that contains malicious code.
The user's browser executed malicious code.
The malicious code steals user data and sends it to the attacker's website, or impersonates the user's behavior and calls the target website interface to perform operations specified by the attacker.

3. Stored XSS

The malicious script is permanently stored on the target server. When the browser requests data, the script is returned from the server and executed, and the scope of impact is larger than reflected and DOM-type XSS. The cause of stored XSS attacks is still the lack of data filtering: when the front-end submits data to the server, it does not filter it; when the server receives the data, it does not filter it before storing it; the front-end requests the data from the server , no filtered output.

Attack principle

The attacker submits malicious code into the target website's database.
When the user opens the target website, the website server takes out the malicious code from the database, splices it into HTML and returns it to the browser.
After the user's browser receives the response, it parses and executes it, and the malicious code mixed in it is also executed.
The malicious code steals user data and sends it to the attacker's website, or impersonates the user's behavior and calls the target website interface to perform operations specified by the attacker.

Precautions

Input checking and filtering: Strict checking and filtering of all user input to prevent malicious code injection. This includes checking form inputs, URL parameters, cookies, etc. Make sure that user-submitted data is not allowed to be output directly on the page, especially in HTML where special characters should be escaped.
Use POST instead of GET: Because the GET request will put the data in the URL, it can easily be used by malicious users to perform XSS attacks. POST requests put data in the request body, which is safer.
Avoid directly disclosing user privacy in cookies: such as email, password, etc. Secondly, reduce the risk of cookie leakage by binding the cookie to the system IP.
Verification code: Prevent scripts from impersonating users to submit dangerous operations.
Use the HTTPOnly tag to limit cookie access and prevent cookie theft.
When the user's login credentials are stored in the server's session, they are stored in the browser in the form of cookies. The goal of many XSS attacks is to steal user cookies and forge identity authentication. By setting the HttpOnly attribute in the cookie, the js script will not be able to read the cookie information.
```
cookies.set(name, value, {
    httpOnly: true // 默认为 true
})
```
Content Security Policy (CSP): A powerful tool to prevent XSS and other attacks. The essence of CSP is the whitelist system. Developers clearly tell the client which external resources can be loaded and executed, which is equivalent to providing a whitelist. Its implementation and execution are all completed by the browser, and developers only need to provide configuration. CSP greatly enhances the security of web pages. Even if an attacker discovers a vulnerability, he or she cannot inject a script unless he also controls a whitelisted, trusted host.
- Through the Content-Security-Policy field of the HTTP header information
```
//该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
Content-Security-Policy: script-src 'self' https://apis.example.com
```
- Through web tags
```
//该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.example.com">
```

2. CSRF attack

Cross-site request forgery (CSRF) is a hacking technique in which attackers attack trusted websites by disguising requests from trusted users, taking advantage of the website's trust in the user's web browser to hijack the web application that the user is currently logged in to. program to perform operations not intended by the user.

Attack principle:

The user logs in, browses and trusts the regular website WebA. At the same time, WebA passes the user's verification and generates a cookie in the user's browser.
Attacker WebB induces user User to visit website WebB by adding image links to WebA.
After User is induced to access WebB, WebB will use User's browser to access the third-party website WebA and issue an operation request.
User's browser accesses WebA with the cookie generated in step 1 according to WebB's requirements.

Precautions:

Use random Token to verify the legitimacy of user requests.
The server generates a token for the user, encrypts it and passes it to the user. The user needs to carry this token when submitting a request, and the server verifies whether the token is correct.
Same-origin detection: Prevent access from different domains and
request source restrictions. This method is the lowest cost, but it cannot guarantee 100% effectiveness because the server cannot obtain the Referer at all times, and there is a risk of forging the Referer in low-version browsers.
When it comes to data modification operations, strictly use post requests instead of get requests.
The URL of the get will be placed in the browser history and WEB server logs. If key data is placed in the get, and someone peeks into the browser, it will cause data leakage. There is no record in the post log, and the URL will not be retained. As long as the database server is not invaded, it is basically safe.
Use CAPTCHAs
to force the user to interact with the app in order to complete the final request. This method can effectively contain CSRF, but the user experience is relatively poor.

3. Click Hijacking

Click hijacking is also known as UI overlay attack. It uses some content (such as games) to mislead the attacker into clicking. Although the attacker clicks on the web page he sees, he actually clicks on another transparent page placed on top of the original web page.

Attack principle:

The attacker constructed a very attractive web page
Place the attacked page in the iframe of the current page
Use styles to overlay iframes on top of very attractive content
Set iframe to 100% transparent
The user clicks the button without knowing it, triggering the execution of some other command.

Precautions:

Use X-Frame-Options to prevent web pages from being iframed: X-FRAME-OPTIONS is an http header proposed by Microsoft, specifically used to defend against click hijacking attacks using iframe nesting.
- DENY // Deny any domain loading
- SAMEORIGIN // Allow loading under the same origin domain
- ALLOW-FROM // You can define the page address that allows frame loading

Determine whether the current page is embedded in an iframe.

if(top.location != self.location){
  top.location = window.location;
}

4. How to prevent safety issues in projects

Strengthen safety awareness: During the project startup phase, it is necessary to emphasize the importance of safety issues and strengthen the safety awareness of all project members. Let everyone understand their responsibilities in ensuring project safety and actively participate in safety work.
Establish a safety management system: Develop a complete safety management system and clarify various safety management requirements and standards. Including safety training system, safety operating procedures, safety inspection system, etc. to ensure that every link is effectively managed.
Implement security design: From the design stage, attention needs to be paid to security design. Follow security design principles and standards, consider possible attacks and vulnerabilities, and take appropriate preventive measures. At the same time, it is necessary to strengthen the security design of key aspects such as data encryption, access control, and permission management.
Strengthen code review: Establish a code review mechanism to ensure code quality and security. Through regular code reviews, potential security holes and errors can be discovered and corrected. At the same time, you need to pay attention to the latest security vulnerabilities and patches, and repair and upgrade the system in a timely manner.
Implement safety training: Conduct safety training for project members to improve their safety awareness and skills. The training content includes basic security knowledge, security vulnerability prevention, emergency response, etc. Regularly organize safety training and drills to enhance the safety awareness and response capabilities of project members.
Establish a security testing mechanism: During the project development process, establish a security testing mechanism. Including security testing, reliability testing, performance testing, etc. Discover and fix potential security issues by simulating various attack scenarios and vulnerability exploitation methods. At the same time, you need to pay attention to the latest vulnerability exploitation methods and attack methods, and adjust your testing strategy in a timely manner.
Do a good job of data protection: Protecting sensitive data in your project is one of the keys to preventing security issues. Adopt encryption, access control, data backup and other measures to ensure data confidentiality and integrity. At the same time, it is necessary to pay attention to data security auditing and monitoring, and to promptly detect and respond to data security incidents.
Regular Reviews and Updates: Regularly review and update the project's security policies and procedures to adapt to new security threats and business needs. At the same time, you need to pay attention to the latest security vulnerabilities and patches, and repair and upgrade the system in a timely manner.