[Advanced front-end] Front-end security: from entry to practice

Foreword:

The widespread use of web applications makes web security increasingly important. With the continuous development of web technology and the increase in the complexity of web applications, more and more front-end security vulnerabilities have received widespread attention. In order to protect web applications and user data, we need to understand and master the knowledge and practices of front-end security.

In this article, we will introduce the basic concepts of front-end security, touching on some common front-end security issues and how to protect web applications and user data. Finally, we'll dive into front-end security practices to help you implement more secure web applications.

1. Basic concepts of front-end security

Before we start covering front-end security issues, let’s understand some basic concepts:

1. Hacker attack

Hacker attacks refer to the use of computer security vulnerabilities or software flaws to attack computer systems to achieve the purpose of stealing information, damaging the system or maliciously controlling the system.

2. Input verification

Input validation refers to filtering and validating data entered by users to ensure that the data entered by users meets security standards. Filtering user input alleviates the need for code verification/validation and helps reduce the attack surface.

3. Output encoding

Output encoding refers to processing input data to prevent XSS(cross-site scripting attacks) and other security vulnerabilities.

For example, using HTML实体编码to encode an HTML string can convert the HTML string into a safe character set to avoid XSSattacks.

4. Encryption

Encryption refers to converting data into another format to ensure data security and privacy.

For example, it is used when transmitting sensitive data HTTPS加密to prevent hackers from intercepting the data during transmission.

2. Frequently asked questions about front-end security

Here are some common front-end security issues:

1. XSS attack

XSS（Cross Site Scripting：跨站脚本攻击）攻击It is a type of network attack and a common web security attack. The attacker injects malicious script code or links into the website , thereby exploiting the website's vulnerabilities, attacking the user's browser when the user browses the website, and stealing sensitive information of users or implement illegal operations.

XSS attacks are often used by hackers to steal sensitive information such as users' identity authentication information , session cookies , sensitive browsing history , and authenticated cookies .

a. XSS attack classification:

• Reflected XSS attack ( Reflected XSS) : refers to injecting URL参数or FORMsubmitting malicious script code and then using it on the website. In this way, when the user accesses the URL, the execution of the malicious script code will be triggered, thereby achieving the hacker's attack purpose.
• Stored XSS attack ( Stored XSS) : Malicious script code is stored in 服务器或者数据库the website. When the user visits the website, the malicious script code is obtained from the server or database and executed, thereby attacking the user's browser and stealing the user's sensitive information.
• DOM-based XSS attack : refers to writing attack code through malicious web pages and triggering attacks through some DOM characteristics, such as modifying DOMnodes to cause page re-rendering or modifying page URLtrigger hashchangeevents, etc. Attackers can take advantage of these features to inject malicious scripts to execute attacks .
• XSS attack based on stored DOM : It means that the attacker stores malicious script code in the DOM DOM, and the malicious code will only be executed under specific conditions. For example, in a website with fuzzy query function, when the user inputs data, the data is filtered and the DOM is rendered. However, the attacker broke through the human-machine verification process and injected malicious code into the DOM. When the user performs fuzzy matching, Malicious code will be triggered to execute .

b. Effective measures to defend against XSS attacks:

• 过滤User input data is checked and filtered, and dangerous input such as malicious script code is filtered out.
• Use appropriate encoding methods for user input 编码, such as escaping some dangerous characters to prevent malicious script code from being executed.
• Do not use evalsensitive functions such as functions JavaScript APIto avoid forming attack points for cross-site scripting attacks .
• ** ** Peer Cookie-to-peer sensitive data 加密to avoid obtaining the user's sensitive information through malicious script code.
• Conduct, test and evaluate applications 安全审计, check and fix vulnerabilities, and protect application security.

2. CSRF attack

CSRF攻击（Cross-Site Request Forgery：跨站请求伪造）It is one of the common network attack methods. It uses the user's identity information on the website that has been logged in to forge malicious requests and submit them to the website, causing the victim to operate the server without knowing it.

a. The specific steps included in a CSRF attack:

1. The user logged in to website A and saved relevant identity information (such as cookies).

2. The user opens phishing website B, which has a malicious request with the goal of submitting certain operation requests to website A.

3. Phishing website B carries the user's identity information (such as cookies) and sends the malicious operation request to website A. Since website A already carries valid identity information, it considers the request to be a normal request initiated by the user and executes the corresponding Operations (such as transferring money, changing passwords, etc.).

4. During subsequent operations, users may find that their account information has been maliciously tampered with.

The principle of a CSRF attack is that the attacker constructs a request and uses some method to allow the user to initiate the request without knowing it, thereby achieving the purpose of the attack.

b. Effective measures to defend against CSRF attacks:

1. 验证码：In key Web operations, such as transfers , password changes , etc., adding verification code verification can curb CSRF attacks to a certain extent.

2. Token 随机化：Also called sync token , it is based on a randomly assigned unique token to avoid CSRF attacks. When we send a request to the target website, we send it at the same time token. The target website will verify the correctness after receiving the request token. If the token verification fails, it will be regarded as an unauthorized request .

3. Referer（请求来源）验证：Since most CSRF attacks come from other websites or pages, determining the source of the request is an effective defense strategy. The server checks whether the source of the request is legitimate through verification HTTP Referer. However, the HTTP Referer may be disguised or deleted, so this measure is not completely reliable .

In general, preventing CSRF attacks requires a multi-faceted approach. Developers need to fully filter and authenticate website data and not open unnecessary data interfaces. Website managers need to regularly conduct vulnerability scans and security audits on the website to ensure the security of the website. Users should protect their account information and not use logged-in account information on websites with low trust.

3. Clickjacking attack

点击劫持攻击（Clickjacking attack）Also known as UI redressing, it is an iframeattack that uses transparent overlay technology to trick users into performing operations.

• An attacker can place a web page within an iframe iframeand then hide the web page by setting the transparency of the iframe, or by overlapping multiple iframes.
• The attacker takes advantage of the user's high trust in the website and, without the user's knowledge, induces the user to click on some embedded code or links on the fake website page to control the implementation of the application running on the victim's browser. Some malicious operations.

a. Process of clickjacking attack

• The attacker constructs a website that contains some pages/links that look similar to the target website but are actually fake .

• Integrate fake pages/links into the target website. There are two common methods: one is to use iframetags to embed malicious pages, and the other is to use “透明”divtags to cover certain parts of the target website, thereby allowing users to click on malicious pages by mistake.

• The target website user visited the attacked site and clicked some links or buttons on the disguised page, thus activating the malicious operation designed by the attacker.

• The user is redirected to a developed fake website, which may contain cross-site scripting attacks, phishing, and other methods for further attacks.

b. Effective measures to defend against clickjacking attacks:

• X-Frame-Options: This response header can control how the browser embeds the web page and prohibits iframethe loading of web pages outside the same origin. Typically set to 同源or deny.

• JavaScript防御: Used to prevent click hijacking. You can prevent click hijacking JavaScriptby detecting the number of nesting levels of iframes , determining whether to open external links in the current window , and prompting users for secondary confirmation .

• 关闭Event和CancelBubble: Attackers can exploit Event Propagation(event propagation) vulnerabilitiesEventPropagation to achieve clickjacking, so you need to turn off and when developing web applications CancelBubbleto prevent events from bubbling up .

• HTML元素遮盖: Use an DIVelement to cover a button or link so that users cannot click it directly, making it difficult to perform click hijacking on the attacked website. This method is also called CSS masking.

3. Practical solutions for front-end security

It's important to understand front-end security vulnerabilities and how to protect them, but you must take practical steps to make your application more secure.

Here are some practical options:

1. Apply security frameworks and tools

Web applications and user data can be protected using reliable security frameworks and tools. Common security frameworks and tools include Open Web Application Security Project(OWASP), Angular Security模块and React Security.

2. Client-side verification and server-side verification

Client-side validation is only the first line of defense in protecting your application, so server-side validation is also essential. Entering data must be done server-side 验证和校验to ensure that the data complies with security standards.

3. Monitoring and Logging

Through monitoring and logging 所有请求和响应, security vulnerabilities can be discovered promptly and measures can be taken to repair and protect them. 定期审计Application and system logs for any unusual events or activities.

4. Safety documentation and training

Establish and update security documentation , including security policy , all protected data and detailed instructions on how to take action if a vulnerability is discovered . At the same time, regular security training for team members can help them identify and address potential security risks.

Summarize

In an increasingly complex and high-risk online world, protecting web applications and user data is critical. Front-end security is one of the key areas in web application security that developers need to understand and take steps to ensure the protection of applications and user data. By summarizing the suggestions and practical solutions mentioned in this article, I hope you can protect the security of your web applications and user data through front-end security measures. Everyone is welcome to like and collect! ! !