SoFunction
Updated on 2025-04-12

A detailed article about 7 common front-end attacks

Preface

As we all know, it is very important to ensure the security of the website. Once the website is captured, it may cause economic losses to users, privacy leakage, website functions being destroyed, or the spread of malicious viruses and other major harms. So let’s talk about 7 common front-end attacks.

1. Cross-site scripting (XSS)

Cross-site scripting attack (XSS) is an injection attack where an attacker steals user sensitive information or destroys the website by injecting malicious scripts into a web page and tricks the user's browser into performing. XSS attacks are one of the most common security threats in web applications and are also a common cause of major security accidents.

Attack method:

  • Reflective XSS:The attacker injects malicious scripts into the data submitted by the user, such as comment forms, search forms, etc. When a user submits data, the malicious script will be reflected back to the user's browser as is and executed.

  • Storage XSS:The attacker stores malicious scripts on the server side, such as injecting malicious scripts into the database. When a user accesses a page containing a malicious script, the malicious script is executed by the browser.

  • DOM type XSS:The attacker exploited a browser DOM vulnerability to execute malicious scripts. For example, an attacker can exploit<script>TagsonerrorProperties to execute malicious scripts.

Defense measures:

  • Escape and filter user input:Use HTML entity escape or other secure encoding methods to escape special characters in user input to prevent malicious script injection.

  • Using HTTPOnly Cookies:Replace cookiesHttpOnly The property is set to true, can prevent JavaScript code from directly accessing cookies.

  • Using Content Security Policy (CSP):CSP is a security technology that limits executable content in web pages by configuring browser security mechanisms.

  • Use common front-end frameworks (such as Vue, React, etc.): These framework template characters are generally escaped and filtered, which has certain security 。Code Example

    &lt;form action="/submit_comment"&gt;
  &lt;input type="text" name="comment" value=""&gt;
  &lt;button type="submit"&gt;Submit a comment&lt;/button&gt;
&lt;/form&gt;

  • The above form does not filter the comments entered by the user, and an attacker can enter malicious JavaScript code, for example:

    &lt;script&gt;
  alert(); // Steal user cookies&lt;/script&gt;

  • When a user submits a comment, the malicious code is embedded in the comment and saved on the server.

  • When other users visit a page containing malicious comments, the malicious code is executed by the browser, stealing user cookies or causing other harm.

2. Reliance on library risk

Front-end websites usually rely on many third-party libraries and components to implement various functions. If there are vulnerabilities in these dependencies, an attacker can exploit these vulnerabilities to attack the website.

Attack method:

  • Remote Code Execution (RCE):An attacker can use a dependency library vulnerability to execute arbitrary code on the victim's browser or server.

  • Cross-site request forgery (CSRF):Attackers can use dependency library vulnerabilities to forge user requests and trick users into performing unexpected operations.

Defense measures:

  • Use security audited dependency library:Choosing to use a security-audited dependency library can reduce the risk of dependency library vulnerabilities.

  • Regularly update the dependency library:Regularly update the dependency library to promptly fix known security vulnerabilities.

  • Minimize dependencies on third-party libraries:Small dependence on third-party libraries as much as possible, develop your own code, you can

Code example:

// Use a vulnerable third-party libraryconst jsdom = require("jsdom"); 

('&lt;script&gt;alert(1)&lt;/script&gt;'); // Analysis contains malicious intentionsJavaScriptCodeHTML

3. Cross-site request forgery (CSRF)

Cross-site request forgery (CSRF) is a security attack where an attacker tricks users into performing unexpected actions in their logged-in applications, such as transferring money, modifying personal information, etc. CSRF attacks are usually implemented using the user's trust because the user sees a request from a trusted website in his or her browser without realizing that the request was actually forged by the attacker.

Attack method:

  • useFormRequest orLink jump. The attacker will construct a malicious form or link to trick the user into clicking. When a user clicks on a form, a POST request or GET request is sent to the victim's application, which contains the action the attacker wants to perform.

  • Request with pictures:The attacker uses the browser's automatic request feature to construct an image containing malicious requests. When a user browses a page containing malicious images, the browser automatically sends a request to the victim's application, which contains the actions the attacker wants to perform.

Defense measures:

  • Add CSRF token to form:Add a randomly generated CSRF token to the form and submit it to the server as a hidden domain. When verifying user requests, the server side will check the validity of the CSRF token.

  • Using the HTTP Referer header:Use the HTTP Referer header to check the source of the request to prevent cross-domain requests.

  • Use the SameSite Cookie attribute:Replace cookiesSameSite The property is set to Strict, can prevent CSRF attacks.

Code example:

&lt;form action="/transfer"&gt;
  &lt;input type="hidden" name="amount" value="1000"&gt;
  &lt;input type="submit" value="transfer"&gt;
&lt;/form&gt;

  • The CSRF token is not used in the form above, and the attacker can construct a malicious link to trick the user into clicking.

  • When the user clicks on a malicious link, a POST request will be sent to the transfer page, which contains information such as the transfer amount.

  • Since the user's browser will automatically carry cookies, attackers can use cookies to impersonate the user's identity and perform transfer operations.

4. Clickjacking

Clickjacking is a spoofing attack where an attacker uses transparent or translucent overlays on a trusted page to trick users into clicking something other than what they see, such as a button or a link. When a user clicks on the overlay, it is actually clicking on malicious content carefully designed by the attacker, such as phishing websites or links to download malware.

Attack method:

  • Utilize transparent layers:The attacker overwrites the real link or button using a transparent layer on a trusted page. When a user clicks on a page, he or she actually clicks on malicious content in the transparent layer.

  • Utilize iframe:The attacker embeds an iframe in a trustworthy page, and the content of the iframe is a carefully designed malicious page. When a user clicks on a page, he or she actually clicks on malicious content in the iframe.

  • Using CSS Positioning:Attackers use CSS location technology to locate malicious content on trustworthy pages. When a user clicks on a page, he or she actually clicks on malicious content.

Defense measures:

  • Use the X-Frame-Options header:Set the X-Frame-Options header on the server side and prohibit other websites from embedding the pages of this website.

  • Using Content Security Policy (CSP):CSP is a security technology that limits executable content in web pages by configuring browser security mechanisms.

  • Avoid using transparent layers:Try to avoid using transparent layers in the page. If you have to use them, you need to carefully test and make sure that the transparent layers will not be exploited by attackers.

Example:

&lt;div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7;"&gt;
  &lt;button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"&gt;Click me&lt;/button&gt;
&lt;/div&gt;

&lt;a href="/malicious_link" rel="external nofollow" &gt;Real link&lt;/a&gt;

  • In the above code, there is a transparent overlay layer covering the real link.

  • When a user clicks on a page, it is actually clicking the button in the overlay, not the real link.

  • An attacker can exploit this vulnerability to trick users into performing malicious actions, such as visiting phishing sites or downloading malware.

5. Content Delivery Network (CDN) Hijacking

Content Delivery Network (CDN) hijacking refers to an attacker hijacking a CDN node, modifying library files on the CDN, and injecting malicious code into it, allowing the application's users to download the malicious code. CDN hijacking attacks are usually implemented using security vulnerabilities or configuration errors in CDN nodes.

Attack method:

  • Take advantage of CDN node vulnerabilities:Attackers exploit vulnerabilities in CDN nodes, such as SQL injection, remote code execution (RCE), etc., to obtain control over CDN nodes.

  • Using CDN configuration error:The attacker took advantage of CDN configuration errors, such as not enabling SSL/TLS encryption, not configuring access control, etc., to inject malicious code into the CDN node.

Defense measures:

  • Encryption with HTTPS:Using HTTPS encryption between a CDN node and user browser can prevent attackers from stealing or tampering with transmitting data.

  • Use Content Integrity Verification (CV):Use CV technology to ensure the integrity of CDN content and prevent malicious code from being injected.

  • Regularly monitor CDN nodes:Regularly monitor the security status of CDN nodes and promptly discover and repair security vulnerabilities.

  • Choose a reliable CDN service provider:Choosing a reliable CDN service provider can reduce the risk of being attacked.

6. HTTPS downgrade

HTTPS downgrades are when an attacker induces users to access applications using an unsafe HTTP connection, thereby stealing user-sensitive information. HTTPS is a security protocol that encrypts transmitted data to prevent attackers from stealing or tampering with it. However, some older browsers or devices may not support HTTPS, or users may be tricked by attackers to use an unsecure HTTP connection.

Attack method:

  • Utilizing social engineering:The attacker tricks users into clicking unsafe links through social engineering methods, such as phishing websites, false information, etc.

  • Take advantage of browser vulnerabilities:The attacker exploited a browser vulnerability to redirect users to an insecure HTTP connection.

  • Using man-in-the-middle attack:The attacker intercepts between the user and the server, downgrading the user connection to an insecure HTTP connection.

Defense measures:

  • Force HTTPS:Force HTTPS connection on the server side and prohibit HTTP connection.

  • Using HSTS header:Set the HSTS header on the server side to tell the browser to always use HTTPS connection to access the website.

Example:

&lt;a href="" rel="external nofollow" &gt;Visit the website&lt;/a&gt;

The above link uses the unsafe HTTP protocol, where attackers can monitor users' network traffic and steal sensitive information such as user cookies, form data, etc.

7. Man in the middle attack

Man-in-the-Middle Attack is an attacker intercepting, stealing or tampering with communications between users and servers. Man-in-the-middle attacks are often implemented using unsecured network connections or Wi-Fi hotspots.

Attack method:

  • Take advantage of unsafe network connections:The attacker sets up a fake Wi-Fi hotspot and tricks users into connecting. When a user accesses a website through a fake Wi-Fi hotspot, an attacker can steal sensitive information such as cookies, form data, login credentials, etc. sent to the server by the user.

  • Take advantage of SSL/TLS vulnerabilities:The attacker exploits vulnerabilities of the SSL/TLS protocol, such as cardiac bleeding vulnerabilities, POODLE vulnerabilities, etc., to decrypt the communication content between the user and the server. .

Defense measures:

To defend against man-in-the-middle attacks, developers can take the following measures:

  • Encryption with HTTPS:Using HTTPS encryption between the server side and the user's browser can prevent attackers from stealing or tampering with the data transmitted.

  • Authentication with public key password:Using public key password authentication can ensure the authenticity of the identities of both parties in the communication and prevent attackers from impersonating servers or users to attack.

  • Install antivirus software and firewall:Installing antivirus software and firewalls can help defend against some common man-in-the-middle attacks.

Summarize

This is the end of this article about 7 common front-end attacks. For more common front-end attack content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!