Do a frontend app is more than just center a div and background color your button ( unfortunately ).

As a front-end developer, it's important to prioritize security measures in your code.

Despite focusing on performance, SEO, and UI/UX, security is just as crucial. Even big frameworks like React and Angular can leave your code vulnerable to cross-site scripting (XSS) attacks due to risky operations like dangerouslySetInnerHTML and bypassSecurityTrust APIs.

It's essential to remember that front-end development has just as much responsibility for security as back-end or DevOps. Malicious attacks can occur from the front end, so it's important to take proactive steps to protect against them.

So, today i'm going to show you how hackers can enjoy about your Frontend application gap.

Data Stored in Browser Memory

Nowadays get vantage about cookies and Local Storage is a common and very effective way to bad folks stole your user information.

So be aware at store info at browser those data,

• Avoid storing sensitive data such as authentication tokens or passwords in browser memory. Instead, use secure HTTP-only cookies or other secure storage mechanisms.

• Use HTTPS to encrypt all data transmitted between the client and server. This can help prevent attackers from intercepting and accessing sensitive data.

• Use encryption to protect sensitive data stored in local storage or cookies. This can make it more difficult for attackers to decipher any data they may obtain.

• Implement proper input validation and sanitation to prevent attackers from injecting malicious code into web forms or other input fields.

• Monitor and log all client-side activity, including data stored in local storage and cookies, to detect any suspicious activity.

• Avoid using input type="hidden" fields to hide sensitive data in web pages, as this data can be easily accessed and manipulated by attackers. And about that topic ...

Inputs and Hidden information

It's important to be cautious when using hidden fields or storing sensitive data in the browser's memory.

Adding input type="hidden" or storing information in localStorage, sessionStorage, or cookies does not guarantee safety. Attackers can easily access everything stored in the browser's memory, including in-memory variables, by opening dev tools.

If you've hidden an authentication page based on values stored in the browser, attackers can use inspection tools like ZapProxy to expose those values and use them for further attacks.

Therefore, it's best to avoid using type="hidden" and store keys and authentication tokens elsewhere instead of in the browser's memory storage.

Inputs strict

It's crucial to ensure that user input is strictly regulated to prevent security vulnerabilities such as SQL injection and clickjacking. To accomplish this, it's essential to validate and sanitize user input before transmitting it to the back end.

SQL Inject

While SQL injection attacks are usually associated with vulnerabilities on the server-side, it's still possible for attackers to manipulate data entered on the client-side in such a way that it causes a SQL injection vulnerability.

Here is a quick resume about it:

• Use prepared statements or parameterized queries to interact with the database. This can help prevent SQL injection attacks by automatically escaping and quoting user input.

• Avoid dynamically building SQL queries with user input. Instead, consider using an ORM (Object-Relational Mapping) library, which can handle SQL interactions automatically.

• Use server-side validation to ensure that only expected types of input are accepted, and to limit the size of inputs. This can help prevent SQL injection attacks that use long strings to exploit vulnerabilities.

• Avoid displaying SQL errors on the front end, which could give attackers insight into potential vulnerabilities. Instead, log errors on the server-side and provide a generic error message to users.

• Consider using a web application firewall (WAF) to help prevent SQL injection attacks. A WAF can inspect incoming requests and block those that appear to be malicious.

By following these best practices, you can help ensure that your frontend code is less vulnerable to SQL injection attacks.

Disable iframe Embedding

One way to protect against clickjacking attacks is to disable iframes. To do this, you can include the "X-Frame-Options": "DENY" header in the request, which prevents the website from being rendered in a frame.

Another technique is to use the frame-ancestors CSP directive. This allows you to control which parents are allowed to embed the page in an iframe, giving you more control over the context in which your website can be displayed.

Always Set Referrer-Policy

When you include links that navigate away from your website using an anchor tag, it's important to use header policies like "Referrer-Policy": "no-referrer" or set rel="noopener" or rel="noreferrer".

If you don't set these headers or attributes, the destination website can potentially obtain sensitive data such as session tokens or database IDs. By using these measures, you can help protect against data leaks and keep your users' information secure.

Avoid Third-Party Services

Didn't your mother tell you to avoid talking to strangers? The same goes for that dubious library to format phone numbers (just an example).

Adding just a single line of code for third-party services such as Google Analytics, Google Tag Manager, Intercom, or Mixpanel can create a vulnerability in your web application. Imagine a scenario where one of these services gets compromised.

To prevent this, it's important to have a strong Content Security Policy (CSP) in place. Most third-party services have a defined CSP directive, so make sure to add them.

Additionally, whenever you add a script tag, be sure to include the integrity attribute whenever possible. This feature, known as Subresource Integrity, validates the cryptographic hash of the script to ensure that it hasn't been tampered with. By taking these steps, you can help protect your web app from potential security threats.

Here are some others articles about that topic :
https://betterprogramming.pub/frontend-app-security-439797f57892

https://securitytrails.com/blog/frontend-security-best-practices