Security in React Js (Part 1)

date

Jun 3, 2022

slug

security-in-reactjs

status

Published

Food must be imported from a trusted(Vulnerability Category: Untrusted Sources)

When making stews with multi-layered flavors, absolutely do not let one layer destroy the other (Cross-site scripting XSS)

E.g: in reactjs usually we tend to extinguish the fire by capturing the response as html from the server to render as an innerDOM dangerouslySetInnerHTML . This problem occurs in many projects that I saw. At the beginning of a project because we did not have a Backend engineer and the authority to change the API on the Frontend side, so we solved it with setInnerHTML. Because the design wasn’t good at first then developer tend to do a lot of dirty things.

The server response is getting displayed with React’s JSX expression which does all the necessary sanitization and escaping to be safe from XSS attacks. It is always recommended to use well-tested libraries to prevent XSS attacks than writing custom preventions which may miss one or the other case. Also, the qs library is being used to parse the information from URL which makes it harder for an attacker to put unexpected character in URL. The validation is also being added on the server side so unexpected data is submitted to serer can be handled.

DOM based XSS (React covered)

In many case developer work with dangerousltySeTInnerHtml has been replaced with React’s Ref which being used to access native DOM element and setting innerHTML for embedding content which is still not safe from XSS attack. Event they tried to have a custome sanitize <script> that still not a solution becasue many case can be by pass. Remember React Dom escapes any values embeded in JSX before rendering them. This ensures tha nothing can be injected that was not explicity written application. Thus everyhing is converted to string before rendering. This way, the application is protected agains XSS atacks.

The stored XSS (React covered)

renderComponent =()=>{ } // Render some components

componentDidUpdate(){
	const { post:{ text:postContent } } = this.state;
	document.querySelector('.post-content').innerHTML = postContent;
}

The postContent is a backdoor for attacker put their boom there. Using innerHtml method provided by browser’s native DOM API without HTML sanitization in react is vulnerable. Just let react’s DOM cover your postContent that is sanitized before bring passed to React Element. In reconciliation render phase this prevents malicious data in pasted from being executed in client’s browsers.

Woah! This design is difficulted to fail in security with Reactjs.

Unvalidated Redirect and Forwards (React covered)

data for the redirect or forward in the application is used without proper validation or sanitization. it is a possibility for an attacker to redirect the browser to a malicious site that can mimic the original website’s look and domain name. This way, an attacker can mislead the user and get sensitive information of clients.

const AppRoute = ({isAuthorization, login, ...props})=>{
	const redirect = new URLSearchParams(useLocation().search).get('redirect');
	if(redirect){
		document.locatoin.assign(redirect)	
	}
 ...
}

The best practice to redirect or forwards that should be used in a safe way. Redirect component from react-router-dom library prevents unvalidated redirects to other side because it has internal mechanism which allow using only internal link

import {Redirect} from 'react-route-dom'
const AppRoute = ({isAuthorization, login, ...props})=>{
	const redirect = new URLSearchParams(useLocation().search).get('redirect');
	if(redirect){
		return <Redirect to={redirect}/>
 ...
}

when using external value to carry out a redirection, it’s necessary to ensure it will note redirect users to malicious external pages. With Redirect components to ensure the redirection is using only internal links. User would not be redirected to untrusted external site.

Injection Flaws - CSS Injection

const AppLayout = ({children, isLoading, login }) = {
	const main = useRef();
	useEffect(()=>{
		main.current.style = `background-color:${color}`;	
},[color])
	...
	return (
	<>
		...
		<main className={styles.main} ref={main}>{chilrend}</main>
		...
	</>
)}

It’s recommended to make sure the user input is properly escaped before being embedded in CSS blocks. The backgroundColor property only works with correct input data that prevents the introduction of other styles. Besides, the color type of input provides a color choice from the palette, not an entering text.

	
const AppLayout = ({children, isLoading, login }) = {
	const main = useRef();
	useEffect(()=>{
		main.current.style.background = color;
},[color])
	...
	return (
	<>
		...
		<main className={styles.main} ref={main}>{chilrend}</main>
		...
	</>
)}