Tengo dos archivos html , digamos page1.html y page2.html . En ambos archivos tengo un elemento de article . Ahora, en page1.html me gustaría reemplazar el contenido del elemento del article con el de page2.html usando JavaScript (no quiero usar jQuery).
Actualmente, mi solución es la siguiente: cuando se carga page1.html , uso el método de fetch para obtener el contenido del elemento del article de page2.html . Luego, cuando el usuario hace clic en un botón, llamo
article.innerHTML = newContent; Esto funciona bien hasta ahora, pero recientemente leí que innerHTML no debería usarse para prevenir ataques XSS. Obviamente, no puedo establecer la propiedad article.textContent ya que tengo un código html "real" en mis artículos que quiero que se interprete como tal. Otra solución en la que podría pensar es incluir el código html en el archivo de script como una cadena. La desventaja de este método sería que tendría que cambiar tanto page2.html como el archivo de script cada vez que quisiera cambiar el artículo.
¿Hay alguna forma recomendada de lograr lo que quiero hacer? Además, todos los ejemplos de ataques XSS sobre los que he leído parecen indicar que mi uso específico de innerHTML no permite ataques XSS (ya que obtengo el código de un sitio que controlo yo mismo), pero no solo quiero para ser como "No puedo pensar en un ataque XSS, así que nunca habrá uno". ¿Alguna idea sobre el peligro de los ataques XSS en este contexto?
En caso de que tenga control sobre el contenido de este page2.html , es decir, si tiene datos estáticos o dinámicos que no son generados por los visitantes que visitan sus páginas web, entonces no habrá ningún problema de ataque XSS. En tales casos, puede utilizar con confianza el método innerHtml .
Pero, en caso de que el contenido de page2.html contenga datos de los visitantes (como comentarios, publicaciones, etc.), solo existe la posibilidad de un ataque XSS. El ataque XSS no es más que cuando su usuario pone algún código JavaScript para su ventaja.
Por ejemplo, en caso de que su page2.html contenga comentarios, puedo publicar comentarios como Hello world! <script> alert("You have been hacked, transfer money to this bank to save your computer") </script> . O puedo adjuntar un enlace a otro script vulnerable que robe los datos de su usuario, como los datos de las cookies.
Para tales casos de uso, no use innerHtml directamente . La solución segura es usar textContent o desinfectar los datos de su visitante (como el comentario mencionado anteriormente) (Ref: https://remarkablemark.org/blog/2019/11/29/javascript-sanitize-html/ )
pruebe el siguiente código aquí, debe llamar al método .text () en la respuesta de búsqueda para obtener el HTML real e insertarlo usando Element.innerHTML
fetch('DataPage.html') .then((res) => res.text()) //here you have to change the response into html text .then(res => {document.querySelector("#target").innerHTML = res;})
Puedes hacer esto con PHP.
<?php echo file_get_contents('./to/file'); ?>Esto descarga los archivos con la cosa. También puedes hacerlo con include.
<?php include "./to/file"; ?>