DEV Community: Umapathi

Defending Against Cross-Site Scripting (XSS) Best Practices for Web Security

Umapathi — Sun, 04 Feb 2024 17:17:24 +0000

What is Cross-Site Scripting ⁉️

Cross-Site Scripting (XSS) is a type of **security vulnerability **that occurs when an application includes untrusted data in a web page.
Attackers can inject malicious scripts into web pages that are then viewed by other users.
The injected scripts can be written in languages like JavaScript and are executed in the context of the victim's browser.
XSS can lead to various malicious activities, such as stealing user sessions, defacing websites, or redirecting users to phishing sites.

There are three main types of XSS attacks:

Stored XSS (Persistent XSS):

Malicious scripts are permanently stored on the target server, typically in a database.
When a user visits a particular page, the script is retrieved from the server and executed in their browser.

Example (Node.js with Express):

   // Assuming userInput is stored in a database
   const userInput = "<script>alert('XSS Attack!')</script>";
   app.get('/profile', (req, res) => {
     res.send(`<p>${userInput}</p>`);
   });

Reflected XSS:
- Malicious scripts are embedded in URLs or other user inputs and then reflected back to the user.
- The victim is tricked into clicking on a crafted link that executes the script in their browser.

Example (Node.js with Express):

   app.get('/search', (req, res) => {
     const userInput = req.query.q; // user input from the query parameter
     res.send(`<p>Search results for: ${userInput}</p>`);
   });

If a user enters a script in the search query, it gets reflected back in the response.

DOM-based XSS:
- Malicious scripts manipulate the Document Object Model (DOM) of a web page.
- The attack occurs on the client-side, and the malicious script is often part of the URL or user input.

Example (JavaScript in a client-side script):

   <!-- Vulnerable HTML -->
   <script>
     const userInput = window.location.hash.substring(1); // get user input from the URL fragment
     document.write(`<p>${userInput}</p>`);
   </script>

Prevention and Mitigation:

Input Validation and Sanitization:
- Validate and sanitize user input on both the client and server sides.
- Use libraries like express-validator (for Node.js) or DOMPurify (for client-side) to sanitize input.
Content Security Policy (CSP):
- Implement and configure Content Security Policy headers to restrict the sources from which the browser can load scripts.
Encode User Input:
- Encode user input before rendering it on the page to prevent the browser from interpreting it as executable code.

Example (JavaScript in a client-side script):

   const userInput = "<script>alert('XSS Attack!')</script>";
   const encodedInput = encodeURIComponent(userInput);
   document.write(`<p>${encodedInput}</p>`);

Use Framework Features:
- Many modern web frameworks provide built-in features to mitigate XSS. For example, React uses JSX, which inherently escapes dynamic content.

Remember that a combination of these measures is usually the most effective way to prevent XSS attacks. Regular security audits and staying informed about emerging threats are also crucial for maintaining a secure web application.

React JS Basics for Beginners

Umapathi — Thu, 09 Dec 2021 12:39:29 +0000

what is React JS

A JavaScript library for building user interfaces

Understanding the index.js

1. Rendering simple JSX elements in react

→index.js

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>
,document.getElementById("root")
)

→index.html

I linked the JS and CSS here inside the div tag with id "root" all of our React app renders

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>

2 Rendering simple JSX elements using Function

import React from "react"
import ReactDom from "react-dom"

//function
function App()
{
    return (<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>)
}
ReactDom.render(<App />,document.getElementById("root"))

3. App.js

Here we are going to use create App.js and render it into index.js

let's create a new file → App.js

import React from "react"

function App(){
    return (
    <div>
    <h1>Umapathi K.</h1>
    <p>I am the student who loves...</p>
    <ol>
    <li>Running</li>
    <li>Coding</li>
    <li>Pubg</li>
    </ol>
    </div>)
}

export default App

here "export default" is used export the App.js file so, that we can use it anywhere in the directory

→index.js

import React from "react"
import ReactDom from "react-dom"
import App from "./App"

ReactDom.render(<App />,document.getElementById("root"))

4 Organising the project

for now, our React project's structure is like this
--📂public
-index.html
--📂src
-style.css
-index.js
-App.js

5 simple Twitter app

Steps :

open a new stackblitz react project

The best online code editor for React JS is stackblitz, It is very efficient for learning and building small projects, So, I recommend creating account on stackblitz for learning React JS

2.create "components" 📂 folder inside src

3.create "Tweet.js" inside the components folder

4.pass props inside App.js

props is used to change the component's content dynamically instead of hard-coding it, it enhances the code re-usability

→App.js

import React from "react";
import Tweet from "./components/Tweet";
function App(){
    return(
    <div className="tweet"> // class is keyword in js so we use className
         <Tweet name="Umapathi" content="coding with 2gb ram😁" likes="2" />
      <Tweet
        name="madhavan"
        content="finished my coding schedule😴"
        likes="15667"
      />
      <Tweet
        name="Ajay"
        content="I should have started learning recat early 😣"
        likes="2487"
      />
    </div>
    );
}
export default App;

→components

→Tweet.js

import React from "react";
function Tweet(props){
    return (
        <div>
        <h1>{props.name}</h1>
        <p>{props.content}</p>
        <h3>{props.likes} likes</h3>
        </div>
    );
}
export default Tweet;

Alternatively, we can also code like below which is called "destructuring", instead of writing props. Something every time

import React from "react";
function Tweet({name,content,likes}){
    return (
        <div>
        <h1>{name}</h1>
        <p>{content}</p>
        <h3>{likes} likes</h3>
        </div>
    );
}
export default Tweet;

I hoped you understand the basic use case of React 😉

⚛simple Twitter app demo