用另一页的代码替换HTML代码

Question

我有两个html文件，比如page1.html和page2.html。在两个文件中，我都有一个article元素。现在，在page1.html上，我想将article元素的内容替换为使用JavaScript的page2.html元素(我不想使用jQuery)。

目前，我的解决方案如下:当加载page1.html时，我使用fetch方法获取page2.html的article元素的内容。

article.innerHTML = newContent;

到目前为止，这确实很好，但是最近我读到innerHTML不应该被用来防止XSS攻击。显然，我不能设置属性article.textContent，因为我的文章中有“真实”的html代码，我希望被解释为这样。我可以想到的另一个解决方案是将html代码作为字符串包含在脚本文件中。这种方法的缺点是，每当我想更改文章时，我都必须同时更改page2.html 和脚本文件。

有什么推荐的方法来实现我想做的事吗？此外，我所读到的所有XSS攻击的例子似乎都表明，我对innerHTML的具体使用不允许XSS攻击(因为我从我自己控制的站点获取代码)，但我不想像“我无法想到XSS攻击，所以永远不会有XSS攻击”。在这种情况下，对XSS攻击的危险有任何见解吗？

Answer 1

如果您控制了这个page2.html的内容，即您有一个静态或动态数据，这些数据不是由访问您的网页的访问者生成的，那么就不会有任何XSS攻击问题。在这种情况下，您可以自信地使用innerHtml方法。

但是，如果page2.html的内容包含来自访问者的数据(如评论、帖子等)那么只有XSS攻击的机会。XSS攻击只不过是当您的用户为了自己的优势而放置一些JavaScript代码时。

如果您的page2.html包含注释，我可以发布类似于Hello world! <script> alert("You have been hacked, transfer money to this bank to save your computer") </script>的评论。或者，我可以将链接附加到另一个易受攻击的脚本，该脚本窃取用户的数据，比如cookie数据。

对于这种用例，请不要直接使用innerHtml 。安全的解决方案要么使用textContent，要么净化访问者的数据(如上面提到的注释)(参考文献：https://remarkablemark.org/blog/2019/11/29/javascript-sanitize-html/)

Answer 2

在这里尝试下面的代码，您必须在fetch响应中调用.text()方法来获取实际的HTML并使用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;})

Answer 3

您可以使用PHP来完成这一任务。

<?php echo file_get_contents('./to/file'); ?>

这会下载文件。您也可以使用包含。

<?php include "./to/file"; ?>