Esto se trata como un problema de vulnerabilidad XSS. Estoy usando el componente redactor de Imperavi y parece que no puede generar el valor de salida correcto cuando el Html no es válido.
El problema es cuando insertamos cadenas como esta:
<<SCRIPT a=2>qssQ5GkdwWU=7;//<</SCRIPT>El redactor elimina las etiquetas del script y genera esta cadena. Esto es de esperar debido a los ataques XSS.
<qssQ5GkdwWU=7;//< El problema ocurre cuando el redactor intenta establecer el valor anterior en el elemento del redactor usando html.(html) . Pensará que hay un elemento y generará esto:
<qssq5gkdwwu=7;> </qssq5gkdwwu=7;>¿Cómo puedo establecer el valor para el elemento pero evitando este comportamiento?
Puede anular la función htmlPrefilter de JQuery:
htmlPrefilter: function( html ) { return html; },Si el problema son los caracteres especiales, intente escapar de ellos de esta manera:
// trying to set following string as innerHTML let c = '<qssQ5GkdwWU=7;//<'; // with default jquery $('.one').html(c); // modify filter function, and do your own character escaping jQuery.htmlPrefilter = function(html) { let clean = html.replace(/[&<"']/g, function(m) { switch (m) { case '&': return '&'; case '<': return '<'; case '"': return '"'; default: return '''; } }); return clean; } // now try on second div $('.two').html(c); <script src="https://code.jquery.com/jquery-3.6.0.js"></script> One:<span class="one"></span><br> Two:<span class="two"></span><br>Ejecute el script anterior preferiblemente antes de cargar Redactor.
Si decide hacer su propia desinfección, puede usar DOMPurify o una biblioteca similar.
let content = 'Malicius content <img src="https://dummyimage.com/30" onload="this.style.border=`2px solid red`;alert(`attacked! :p`);" >'; // default jquery $('.one').html(content); // modify filter function, do your own sanitization jQuery.htmlPrefilter = function(html) { html = DOMPurify.sanitize(html); console.log('sanitized: ', html) return html; } // trying on second div $('.two').html(content); <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.4/purify.min.js" integrity="sha512-jGh38w63cHRzfBHtyKgEMMkJswUFXDA3YXrDjaE8ptzxV5DDkLDUDjtGUy5tmDkOXHWsItKfFjocaEtj1WuVnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> One:<span class="one"></span><br> Two: <span class="two"></span><br>La primera imagen tiene un borde rojo. Y debido a la desinfección, el segundo no lo hace.