【问题标题】:How to block user from editing URL如何阻止用户编辑 URL
【发布时间】:2021-12-28 01:50:53
【问题描述】:

我目前正在制作一个回答问题的网站,但我遇到了问题。 即例如回答第二个问题时,但用户想回到上一个问题编辑答案,有2种方式:

  1. 使用浏览器的撤消按钮
  2. 更改网址

例如:question?id=2 更改为 question?id=1

网络将重新加载上一个问题,他们可以更改答案。

我已经阻止了方法#1,但是如果用户更改了 URL,我不知道如何阻止它? 想请教一下,我用的是js,如果用vue3 ts就更好了。

【问题讨论】:

  • 在再次呈现之前检查用户是否已经回答了问题。如果他们已经回答了问题,请将其隐藏,以免他们再次回答。
  • 您可能想要构建一个单页应用程序,而不是传统的分层网站,从而为您提供更大的路由控制。

标签: javascript typescript vuejs3


【解决方案1】:

无法直接阻止修改顶级 URL,但是,您可以采取其他几种解决方案。如果您使用的是 Vue 路由器,您可以使用 navigation guards 并在检测到无效更改时重定向回来。否则,对于更传统的解决方案,您可以将 URL 隐藏在 iframe 中,其 URL 将无法从导航栏中访问。示例 HTML:

<iframe src="/question?id=2"></iframe>

请记住,可以绕过任何客户端安全性,最好将敏感数据存储在服务器上。在 iframe 的情况下,对于具有开发工具知识的人来说,修改其中的 URL 是微不足道的。

【讨论】:

    【解决方案2】:

    如果您想阻止用户输入问题 #1 的新答案,那么您需要在服务器上保留一些状态。维护一个问题列表,记录哪些问题已经回答,哪些问题没有回答。当您请求question?id=1 时,您提供的页面和服务器状态使得用户已经回答了问题 #1 应该是显示错误的页面,或者只是通过重定向或强制它转到第一个未回答的问题只需提出问题 2 或一些合理的东西。但底线是服务器需要状态。

    这就像,如果我进入我的银行页面并在浏览器中编辑我的余额以在我的银行账户余额末尾添加几个 000,它实际上不会改变我银行中的金额,只是在本地显示的内容。要实际更改银行余额,我必须向服务器发出请求,导致我的余额被更改。

    你也一样。如果您不想接受已提交问题的新答案,那么您将知道页面何时尝试提交答案。该页面可能会使用用户对问题 1 的答案进行 POST,并且服务器将答案保存在某处。如果浏览器针对同一问题执行另一个 POST(因为用户破解了 URL),您可以简单地拒绝请求并拒绝更改服务器状态,返回某种错误,例如“您已经回答了该问题”。

    您在此事件中向用户提供的体验并不那么重要(他们是在进行黑客攻击),但为了做一些合理的事情,请考虑将浏览器重定向到正确的问题。下一个未回答的问题可能是对“您已回答该问题”REST 响应的响应的一部分。

    【讨论】:

      【解决方案3】:

      您无法阻止用户更改 URL,因此您需要做的是找到某种方法来检测用户是否更改了 URL,然后在后端执行一些操作。问题是您无法将它们发送回它们来自的页面,因此它们的流程会被破坏。

      如果您使用标准 &lt;form&gt; 输入,最简单的方法可能是在提供页面时包含具有唯一 ID 的隐藏输入:

      <input type="hidden" id="noCheating" name="noCheating" value="34657">
      

      然后,当网络服务器处理 POST 时,您可以检查发布的数据中是否存在noCheating,以及它是否不退出。

      如果后续页面请求具有 referer 标头,服务器可以检查这些标头,然后拒绝没有它们的 GET 请求。

      这两种方法都很容易实现,旨在将 99% 的不关心的人拒之门外。如果您担心真正的黑客,您将不得不在每一步保存状态,然后验证之前问题的数据尚未按照@Wyck 的建议提交。

      【讨论】:

        【解决方案4】:

        正如其他人所说,鉴于url地址栏无法由网页控制,因此不可能阻止用户随意更改url。

        我猜当用户尝试编辑答案时,您请求的 API 如下所示?我的建议是将请求方法更改为 POST 并通过 Body 传递参数,而不是通过查询字符串传递参数(这基本上是后端的工作)。

        这样做,您的网址将始终显示为/question 而不是/question?id=xxx,这意味着用户无法通过更改id 参数返回。

        【讨论】:

          猜你喜欢
          • 2021-10-26
          • 1970-01-01
          • 2013-07-25
          • 1970-01-01
          • 2021-11-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多