Secure frontends are a real challenge while internet usage increases exponentially. People are doing everything through the internet. From ordering food,  consulting a doctor, meeting with their families, attending online courses, and so on. On the other side of this process, companies rely on data correlation to provide the best and customized services they can, which requires a lot of data consumption through web applications. 

After Covid-19, the use of the internet has gained an even larger scale. Unfortunately, it also increased the opportunities for cyberattacks. According to Deloitte,  47% of individuals fall for a phishing scam while working at home. Other scary data: between February and May 2020, more than half a million people globally were affected by breaches in which the personal data of video conferencing users was stolen and sold on the dark web.

In this way, front-end vulnerabilities and attacks can affect the user’s experience in several different ways. The most common are stealing user’s information to be used in an impersonation future attack like authenticating as a  legitimate user in a sensitive application or simply selling that data in the clandestine trade.  

What are the most common Front-end vulnerabilities and attacks?
Shield with holes in it being attacked

In an Internet environment, the risks to valuable and sensitive data are greater than ever before. Also, there are a lot of myths about security that muddle the front-ends making them lose focus.

For example, it’s a myth that hackers cause most security breaches. In fact, 80% of data loss is caused by insiders. Another example is the myth that encryption makes your data secure. In fact, encryption is only one approach to securing data. Security also requires access control, data integrity, system availability, and auditing. 

Thinking about this, it’s very important to know the most common front-end vulnerabilities and attacks in order to build the best and effective strategy to avoid and prevent it.

Vulnerability What is it? How it works
Cross-site scripting (XSS) It is a vulnerability present in web applications that allow cybercriminals to insert JavaScript code to gain certain types of advantage over victims. It is usually applied to pages that are common to all users, such as the homepage of a website or those where users can give testimonials. In order for the attack to occur, a form that allows the attacker’s interaction is needed, such as in search fields or insertion of comments.
Cross-Site Request Forgery (CSRF) It is a type of malicious website exploit, in which unauthorized commands are transmitted from a user whom the web application trusts.  If the victim is a normal user, a successful CSRF attack can force the user to perform state-changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account,  CSRF can compromise the entire web application. If the victim is an administrative account,  CSRF can compromise the entire web application.  There are many ways in which a malicious website can transmit such commands, specially crafted image tags, hidden forms, and JavaScript XMLHttpRequests, for example.
Clickjacking (or ‘UI redress attack’) It’s a class of vulnerability that affects most internet browsers, such as Firefox, Chrome, Internet Explorer, Opera, and safari. Through this type of attack, it is possible for the attacker to control the Webcam and microphone of their victims. The attacker is able to infect buttons from a legitimate website. Thus, when the user clicks, he unknowingly downloads various malware or ends up being directed to pages with malicious content. This way, the attacker can infect the user’s computer without the user noticing the malicious action.
Usage of components with known vulnerabilities Some vulnerable components (e.g., framework libraries and other software modules) can be identified and exploited with automated tools, expanding the threat agent pool beyond targeted attackers to include chaotic actors. If a  vulnerable component is exploited, such an attack can facilitate serious data loss or server takeover. Applications and APIs using components with known vulnerabilities may undermine application defenses and enable various attacks and impacts. 

 

Best practices to prevent frontend attacks

shield 2 - Secure frontends are a real challenge while internet usage increases exponentially. People are doing everything through the internet. From ordering food,  consulting a doctor, meeting with their families, attending online courses, and so on. On the other side of this process, companies rely on data correlation to provide the best and customized services they can, which requires a lot of data consumption through web applications. 

In times of growing concern of internet users with data protection, it is important to ensure a safe browsing experience. Considering the front-end vulnerabilities above, there are some recommendations that will help you to increase your chances of defending against UI-first attacks.

Adopt the culture of discussing safety from the very beginning of the project

Invite all stakeholders to map all security risks and protections that are necessary to ensure product development is as safe as possible. A strong security culture not only interacts with the day-to-day procedures but also defines how security influences the things that your organization provides to others. 

Use Input/output Sanitization Strategy

At every stage of input, ensure that the incoming data is valid according to the requirements of that part of the application. Also, the usage of encoding or sanitization libraries like dom-purify or secure filters is welcome and can speed up the security implementation. OWASP  cheat sheet series also provide a good starting point for an input/output sanitization strategy definition.  

Prefer UI frameworks such as Angular, React, or Vue

Using Angular, React, or Vue frameworks is highly recommended to control and protect your application from attacks like Cross-Site Scripting (XSS). 

Angular provides built-in, values as untrusted by default, anti-XSS, and CSRF/XSRF protection.

React also is aware of the potential danger of XSS, when an application creates new elements through the React APIs, React will automatically ensure that data that ends up in the page will not cause XSS attacks.

Vue converts the content automatically to text to prevent script injection. This conversion to text is done using native browser APIs such as textContent, so a vulnerability can only exist if the browser itself is vulnerable.

Examine your components often

To ensure security to your applications while you use third-party libraries you must spend time with Software Composition Analysis. Use SCA tools to perform automated scans of an application’s codebase, including elements such as containers and registries, to identify all open source components, analyzing their license compliance data, and any type of security vulnerabilities that have been reported on the market.

Create and execute a Content Security Policy (CSP)

One of the best practices in front-end security is an additional layer in the defense-in-depth strategy to reduce harms caused by content injection attacks.  The Content-Security-Policy header allows you to restrict resources such as JavaScript, CSS, or pretty much anything that the browser loads.

HTTPs headers security

To guarantee browser security is mandatory to ensure HTTP header protection. Good examples of Security HTTP Headers are: 

  1. HSTS – HTTP Strict Transport Secure – is a policy mechanism that helps to protect websites against man-in-the-middle attacks such as protocol downgrade attacks and cookie hijacking. It allows web servers to declare that web browsers (or other complying user agents) should automatically interact with it using only HTTPS connections, which provide Transport Layer Security (TLS/SSL), unlike the insecure HTTP used alone.
  2. X-Content-Type-Options – prevents browsers such as Internet Explorer and Chrome from interpreting the page content (sniffing) and executing the data as code/tag. A basic example is when uploading a text file with javascript code and the browser reads the content in the file and executes it, even though it is just text and not part of the code. 
  3. X-Frame-Options – it’s efficient to prevent your own content from being used in an invisible frame by attackers. The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used, as it does enable the use of frames, but limits them to the current domain.
  4. Cross-Origin Resource-Sharing Response Headers – CORS (Cross-origin Resource Sharing) is a mechanism used by browsers to share resources between different sources. CORS is a W3C specification and makes use of HTTP headers to inform browsers whether or not a resource can be accessed.
  5. Cache-control – Cache-control is an HTTP header used to specify browser caching policies in both client requests and server responses. Policies include how a resource is cached, where it’s cached and its maximum age before expiring (i.e., time to live).

Security checklist and tools recommend for frontends

  • Use the OWASP Cheat Sheet Series as your guide collection of high-value information and specialist forum on specific application security for Secure code reviews, secure testing, testing automation, threat mitigation, and so on. https://cheatsheetseries.owasp.org/
  • Use DOMPurify as a method to sanitize the user’s input. It has an option to customize the rules and it supports HTML5,  SVG, and MathML. secure-filters. A Salesforce library that provides methods to sanitize HTML,  JavaScript, inline CSS styles, and other contexts. It’s especially useful if you want to make use of user input in other places, for example generating CSS or  JavaScript.
  • Use Npm-audit built-in feature to check npm packages for known vulnerabilities. 
  • Use Snyk (robust and open source security platform) to analyze software projects and check third-party components for known vulnerabilities and licensing issues. 
  • Use OWASP Zed attack proxy – ZAP, which is a free, open-source  penetration testing tool being maintained under the umbrella of the Open Web Application Security Project (OWASP). 
  • Use Google Content Security Policy evaluator to check if a Content Security Policy (CSP ) serves as a strong mitigation against cross-site scripting attacks. It assists with the process of reviewing CSP policies, which is usually a manual task and helps identify subtle CSP bypasses which undermine the value of a policy. 
  • Consult Mozzila Observatory to scan and configure your website safely and securely. The tool connects and analyzes the HTTP headers, providing a quantitative analysis (numerical score). There are several properties that the tool analyzes, and for each property a negative or positive score is applied depending on the value analyzed. 
  • Use Burp Suite platform for performing security tests on web applications and to support the entire process of testing, mapping and attack surface analysis from an initial request to finding and exploiting security vulnerabilities.

How to find seasoned Security Engineers for your team

Ubiminds helps companies in hiring pros Security Engineers and building tight-knit digital product teams. Our company takes a load off HR and tech leaders by combining in-depth knowledge and experience in both technical and people skills. Tech recruitment becomes easy when only the strongest applicants are put in contact with your company – leaving you to focus on more strategic endeavors.

 

UbiNews

Subscribe now to receive our exclusive publications directly in your inbox.

When providing this information, I authorize the receipt of emails and the processing of data by Ubiminds under the Privacy Policy.