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

Question

我有两个 html 文件，比如 page1.html 和 page2.html。在这两个文件中，我都有一个 article 元素。现在，在 page1.html 上，我想使用 JavaScript 将 article 元素的内容替换为 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 攻击的危险有什么见解吗？

Answer 1

在这里尝试下面的代码你必须在获取响应中调用 .text() 方法来获取实际的 HTML 并使用 [=10= 插入它]

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 2

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

但是，如果 page2.html 的内容包含来自访问者的数据（例如评论、posts 等），那么只有 XSS 攻击的机会。 XSS 攻击只不过是当您的用户为了他们的利益而放置一些 JavaScript 代码时。
例如。如果您的 page2.html 包含评论，我可以 post 评论 Hello world! <script> alert("You have been hacked, transfer money to this bank to save your computer") </script>。或者我可以将 link 附加到另一个易受攻击的脚本，该脚本会窃取您的用户数据，例如 cookie 数据。

对于此类用例，请不要直接使用innerHtml 。安全的解决方案是使用 textContent 或清理访问者的数据（如上面提到的评论）（参考：https://remarkablemark.org/blog/2019/11/29/javascript-sanitize-html/）

Answer 3

您可以使用 PHP 来做到这一点。

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

这会下载文件。您也可以使用 include.

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

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

Replace HTML code with code from another page

html

javascript

xss