Tengo una aplicación que usa Express + mongoose como backend y React como frontend. En el backend, la validación de la entrada del usuario se realiza mediante express-validator la siguiente manera:
body('text') .trim() .escape() .not() .isEmpty() .withMessage('Comment should contain something, right?'),El esquema del modelo de mangosta:
const commentSchema = new Schema<IComment>({ author: String, post: { type: SchemaTypes.ObjectId, ref: 'Post', }, text: { type: String, }, date: Date, }); El text y las propiedades del author son lo que tengo problemas. Me aseguré de que los datos lleguen al backend sin escape, y del backend vienen con escape (y solo una vez, por express-validator ). Sin embargo, cuando trato de representar en React una cadena que proviene del backend como that's the (contiene el carácter ' ), se representa en el navegador como that's the . Cuando inspeccioné el elemento, descubrí que el ampersand se reemplazó con & , y la cadena terminó mostrándose exactamente como vino del backend. Parece que el ampersand se escapó por partida doble. ¿Hay alguna manera de evitar esto sin instalar bibliotecas externas y usar peligrosamente SetInnerHTML? Simplemente no quiero que se escape este ampersand. Mi suposición es que está hecho por React. El componente tiene la siguiente estructura:
<Wrapper> <Author>{author}</Author> <Text>{text}</Text> <Date>{date}</Date> </Wrapper> Lo mismo sucede si inserto todos los valores en un <div> simple.
EDITAR: si codifico algo como <html> directamente en la etiqueta JSX, todo funciona bien. Si codifico {"<html>"} , esto se trata como una cadena y se escapa. Los datos que provienen del backend son, bueno, una cadena, pero ya se escaparon.
Simplemente envíe cadenas simples sin escape desde el back-end. Debería ser el front-end quien decida cómo renderizar y si escapar de los datos, y a menos que uses dangerouslySetInnerHTML , estás a salvo.
Digamos que alguien ha escrito un comentario que contiene un script xss. Puede guardar el comentario en una base de datos tal como está, y luego React lo escapará automáticamente, por lo que el script nunca se evaluará (nuevamente, a menos que use dangerouslySetInnerHTML SetInnerHTML para representar el comentario).