Tenemos un componente de alerta que brinda información importante para el usuario. Sin embargo, este componente tiene una cierta abstracción en la que solo necesita pasar el contenido como una matriz de cadenas.
const Component = () => { const alertContent = ['This is the first things', 'Second thing', 'third thing']; return ( <AlertComponent content={alertContent} /> ) } Esto muestra con éxito el contenido como una lista. Sin embargo, necesitamos poner en negrita partes del texto para enfatizar. Pensé en cambiar las cadenas en la matriz para incluir etiquetas html, luego usar dangerouslySetInnerHTML SetInnerHTML para representarlas. Algo como:
const alertContent = ['This is an <b>important</b> text', ...]; return ( <> {alertContent.map(content => <span dangerouslySetInnerHTML={{__html: content}} />)} </> )He leído sobre ataques de secuencias de comandos entre sitios, pero la mayoría de los artículos que he leído hablan sobre las entradas de los usuarios y las API de terceros. ¿La codificación del html evita esto? ¿O todavía necesito usar desinfectantes?
Si usted , el codificador, crea todo el HTML que se insertará y está seguro de que no tiene ninguna vulnerabilidad XSS, entonces sí, será seguro.
dangerouslySetInnerHTML se llama así para decirle principalmente que, si se usa incorrectamente, es muy fácil abrir su aplicación a problemas de seguridad. Pero si el HTML que se establece está codificado y es seguro, entonces dangerouslySetInnerHTML también es seguro.
Los desinfectantes son necesarios cuando el marcado proviene de la entrada del usuario o de un servicio externo. No son necesarios si el marcado proviene completamente de su propio código.
Dicho esto, en esta situación particular:
Sin embargo, necesitamos poner en negrita partes del texto para enfatizar
¿Por qué no usar JSX en su lugar?
const alertContent = [<>This is an <b>important</b> text</>, ...]; Escribir en JSX cuando sea posible es mucho mejor que tener que recurrir dangerouslySetInnerHTML a SetInnerHTML.
Si los administradores o los usuarios probados configuran un texto que se va a representar en dangerouslySetInnerHTML SetInnerHTML, debería ser seguro y no hay problema.
Pero si los usuarios normales pueden configurar los textos o los contenidos html, debería considerarlo.
Puede proporcionar editores de interfaz de usuario html como TinyMCE para que los usuarios establezcan contenido html e implementen alguna lógica para eliminar las etiquetas html peligrosas como iframe, script, etc. en sus aplicaciones de back-end.