安全存储按钮点击数据的方法

Question

我希望找到最安全的方法来存储数据，以便用户单击按钮时使用。

我知道您可以将数据存储在按钮标签的属性中（无论是值属性还是data-属性），如下所示：

<button type="button" value="1" data-value="1">Click me!</button>

但是这样做的问题是用户（可能只有高级用户）可以使用Firebug或其他应用程序来操作值，然后单击按钮并发送不同的数据。我完全明白在尝试对已发送数据进行任何操作之前需要检查输入。

我还发现我可以使用jQuery的.data()将数据附加到DOM元素上，这似乎更有用。我不确定数据是如何存储的，但我认为它更难以操纵。

真正引起我的兴趣的是当我在Firebug中查看Soundcloud的代码时，我发现没有一个“like”按钮附加了数据。我尝试删除/操作元素/数据，按钮仍然可以工作。所以让我想到他们可能正在使用与jQuery data()类似的过程。

我只想知道是否有一种更安全的方法来存储数据或一种方法，使用户在单击按钮之前无法操纵数据。

- chasethesunnn

---

我认为在 data-value 中存储数据不是问题。因为在客户端，无论您在哪里存储数据，都有一种方法可以操纵它。 - abs

@abs 我明白了，我之前不知道这个。所以我只能在输入之前验证它，是吗？ - chasethesunnn

更好的选择：将其存储在后端并使用客户端（哈希）ID。或者，在客户端使用更多（编码）数据，但始终在后端进行验证！ - schellingerht

Answer 1

考虑下面这个函数：

function setupPrivateData(element) {
  var private = 1; 
  element.setPrivate = function ( d ) { private = d; }
  element.getPrivate = function ( ) { return private; }
}

当使用一些DOM元素调用时，它将向其添加两种方法：.setPrivate(val)和.getPrivate()。

这些是唯一允许您访问和修改与该元素相关联的私有变量的方法。

- c-smile

---

哦，有趣，我喜欢这个想法。你认为模块模式或揭示模块模式像你的例子一样有用吗？ - chasethesunnn

我不确定我理解“模块模式”这个术语。你能详细解释一下吗？ - c-smile

这是一个链接：http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript它基本上是一种设计模式，用于将类和私有方法的概念添加到JavaScript中。这似乎与您的想法相似。 - chasethesunnn

啊，那个……模块作为一个概念比在JS中拥有私有变量的任务更广泛。请查看此链接：http://javascript.crockford.com/private.html - c-smile

Answer 2

你可以混淆你的javascript代码，但是验证必须在你的服务器上完成。例如，我尝试从theweathernetwork获取天气信息。他们使用多个文件和回调函数隐藏了API调用。在我看来，如果你想反向工程他们的网站，这只会更具挑战性（更有趣）。

Javascript不能保证安全。永远不要相信用户输入

- richerlariviere

Answer 3

用户始终可以操作数据。没有任何限制阻止高级用户访问对象属性或自行调用 jquery.data()。

在原生js中，您可以执行以下操作：

    var div = document.getElementById("test");
    div.something = "hidden value";
    
    div.addEventListener("click", function() {
        alert(this.something);
    });

<div id="test">click me</div>

最好的方法是进行服务器端验证，以确定发送的数据是否有效。

除此之外，您可以尝试将代码包装在匿名函数中，以拒绝用户访问对象：

(function() {
    var data = {};
    data.something = "test";
})()

但是，一旦用户操纵您的文件并添加调试器语句，即使这种方式也会失败。

- Sebastian Nette

---

我明白了。你认为模块模式或揭示模块模式在拒绝访问方面也会有帮助吗？ - chasethesunnn

Answer 4

如果您正在记录按钮点击，则最安全的跟踪方式是在服务器端保存和验证。

例如，当您在Soundcloud上单击“喜欢”按钮时，它会向Soundcloud的服务器发出HTTP请求，记录您单击了该按钮，并将其标记为收藏。这样，如果同一用户在未来的任何时间再次单击该按钮，则可以在增加收藏数之前进行检查。

在渲染视图时，按钮中显示的数字也从数据库中提取。

- asmockler

---

是的，但我的意思是当你点击按钮时，SoundCloud如何知道你喜欢那首歌。它如何区分同一页上其他数百个“喜欢”按钮。在SoundCloud页面上，没有数据属性附加到“喜欢”按钮上。 - chasethesunnn

Answer 5

这是一个庞大的话题，你需要学习很多，远远超出了在评论中讨论的范围。任何在HTML源代码中存储的属性都绝对不安全，可以非常容易地被更改。

最常见的处理方法是使用cookie，但即使付出一些努力，它们也可能会被篡改。

如果安全性很重要，请找到某种方式来识别您的用户（可能是通过IP，但即使如此也不是百分之百可靠！），并将数据保存在您的服务器上，与可以在按钮点击后检索的用户ID相关联。

- Darren H