Sua aplicação ReactJS está vulnerável a XSS!!??

Nesse artigo falarei um pouco sobre como o React previne sua aplicação de possíveis ataques de XSS (stored e reflected), e também alguns cuidados que você deve ter para não deixar sua aplicação vulnerável.

Primeiramente digamos que você tem uma aplicação extremamente simples, que tenha um input que permita que o usuário digite algo e quando de submit irar ser refletido na tela.

function App() {
  const [message, setMessage] = React.useState('Hello World')

  function handleSubmitForm(event) {
    event.preventDefault()

    setMessage(event.target[0].value)
  }

  return (
    <div>
      <form onSubmit={handleSubmitForm}>
        <input type="text" placeholder="Your name" />
        <button>Submit</button>
      </form>

      {message}
    </div>
  )
}

Em outras aplicações como PHP, isso seria um problemão, por que caso um script fosse escrito nesse input, ele seria simplesmente refletido na tela apos o submit, e seria um problema maior se o valor escrito nesse input fosse para Query, por que assim o script malicioso poderia ser compartilhado.

Entre tanto... o React trata esses casos. Quando e passado algo para dentro das tags HTML dentro do React, todo o conteúdo entre a tag, e tratado como String, sendo assim caso o usuário malicioso escrevesse um script como o exemplo abaixo, ele seria tratado como string, e não seria executado:

Isso e Toop demais, pois consegue prevenir tanto XSS - Armazenado, quanto XSS - Refletido.

Porem, caso você esteja fazendo sua aplicação com auxilio de algum CMS, provavelmente você vai querer pegar a estilização dos textos vindo do CMS para sua aplicação, por exemplo o Strapi ou Prismic, usam formatação nos textos, então seria legal poder renderizar o HTML certo?... certo!

Nesses casos e usado uma função perigosa no React pra quem ta começando, por que não costuma pensar em possíveis vulnerabilidades. A função dangerouslysetinnerhtml, acho que o nome "Danger" já e bem alto explicativo hahaha; Essa funcao ela permite que html sejam renderizados na sua aplicação por fontes externas ou internas. Fazendo assim seus textos que são criados em CMS renderizarem na tela lindos e bonitos.

Pooorem... Caso o usuário consiga ter interação com essa função, ele consegue interagir com essa função, seja em um comentário em uma pagina ou em um texto que foi escrito em um feedback enviado ou ate mesmo manipular os dados da query para que reflita no site... isso pode ser um perigo. vejamos na função.

function App() {
  const [message, setMessage] = React.useState('Hello World')

  function handleSubmitForm(event) {
    event.preventDefault()

    setMessage(event.target[0].value)
  }

  return (
    <div>
      <form onSubmit={handleSubmitForm}>
        <input type="text" placeholder="Your name" />
        <button>Submit</button>
      </form>

      <div dangerouslySetInnerHTML={{ __html: message }} />
    </div>
  )
}

Apos isso, no campo do input, inserir um código malicioso por exemplo:

<img src=x onerror=javascript:alert(1) />

E o resultado:

Portanto sim, você consegue tomar ataques XSS mesmo utilizando REACT como framework.

Como prevenção a esse caso, trago a vocês uma solução que funcionou para mim, que foi higienizar o seu HTML antes de mostrar para o usuário final, para isso você pode usar algumas libs disponível no NPM, vou mostrar a vocês lib que eu uso, porem existe diversas outras que fazem um bom trabalho também.

A lib pode ser encontrada facilmente no NPM, sanitize-html-react, para usar ela e extremamente simples:

import Sanatize from 'sanitize-html-react'

function App() {
  const [message, setMessage] = React.useState('Hello World')

  function handleSubmitForm(event) {
    event.preventDefault()

    setMessage(event.target[0].value)
  }

  return (
    <div>
      <form onSubmit={handleSubmitForm}>
        <input type="text" placeholder="Your name" />
        <button>Submit</button>
      </form>

      <div dangerouslySetInnerHTML={{ __html: Sanatize(message) }} />
    </div>
  )
}

Fazendo isso, ela vai limpar o HTML que está entrando, prevenindo assim possíveis XSS na sua querida aplicação.

Caso tenha gostado desse artigo, da uma curtida ai pra mostrar pra mais pessoa, até a próxima😊.