I am trying to find out what the safest way to store data for use when the user clicks on a button.
我试图找出当用户点击按钮时最安全的存储数据的方法。
I know that you can store data in attributes(either the value attribute or a data- attribute) of the button tag like so:
我知道您可以将数据存储在按钮标记的属性（值属性或数据属性）中，如下所示：
<button type="button" value="1" data-value="1">Click me!</button>
But the problem with this is that the user(probably really only advanced users) can manipulate the value with firebug or some other app and THEN click the button and send over different data. I fully understand that I need to check the input before I try to do anything with the sent data.
但问题是用户（可能只是高级用户）可以使用firebug或其他应用程序操作值，然后单击按钮并发送不同的数据。我完全理解在尝试对发送的数据做任何事情之前我需要检查输入。
I also found out that I could use jQuery's .data() to attach data to dom elements, which seems a bit more useful. I'm not exactly sure how the data is stored, but I assume its harder to manipulate.
我还发现我可以使用jQuery的.data（）将数据附加到dom元素，这看起来更有用。我不确定数据是如何存储的，但我认为它更难以操作。
What got me really interested in this question was when I was looking through Soundcloud's code in firebug, I saw that none of the "like" buttons had data attached to the buttons. I tried deleting/manipulating elements/data and the buttons still worked. So it got me thinking that they are probably using a similar process to what jquerys data() is doing.
让我对这个问题真正感兴趣的是当我在firebug中查看Soundcloud的代码时，我发现没有任何“喜欢”按钮将数据附加到按钮上。我尝试删除/操作元素/数据，按钮仍然有效。所以它让我觉得他们可能正在使用与jquerys data（）正在做的类似的过程。
I just want to know if there is a safer way to store data or a way so that the user can't manipulate the data before clicking the button.
我只想知道是否有更安全的方式来存储数据或方式，以便用户在单击按钮之前无法操作数据。
5 个解决方案
#1
2
Consider this function:
考虑这个功能：
function setupPrivateData(element) {
var private = 1;
element.setPrivate = function ( d ) { private = d; }
element.getPrivate = function ( ) { return private; }
}
When called with some DOM element it will add two methods to it: .setPrivate(val) and .getPrivate().
当使用一些DOM元素调用它时，它将添加两个方法：。setPrivate（val）和.getPrivate（）。
These are the only methods that will allow you to access and modify that private variable associated with the element.
这些是允许您访问和修改与该元素关联的私有变量的唯一方法。
#2
1
The user can always manipulate data. Nothing stops an advanced user to access object properties or call a jquery.data() on their own.
用户总是可以操纵数据。没有什么能阻止高级用户访问对象属性或自己调用jquery.data（）。
Something you could do in vanilla js would be:
你可以在vanilla js做的事情是：
var div = document.getElementById("test");
div.something = "hidden value";
div.addEventListener("click", function() {
alert(this.something);
});<div id="test">click me</div>The best way would to be a serverside verification if the sent data is valid or not.
如果发送的数据有效，最好的方法是进行服务器端验证。
Besides that, you could try to wrap your code in an anonymous function to deny the user access to the object:
除此之外，您可以尝试将代码包装在匿名函数中以拒绝用户访问该对象：
(function() {
var data = {};
data.something = "test";
})()
But even that fails as soon as the user manipulates your files and adds for instance a debugger statement.
但是，即使在用户操作文件并添加例如调试器语句时也会失败。
#3
1
You can obfuscate your javascript but the only validation has to be done on your server. For example, I tried to get the weather from theweathernetwork. They have hidden their API call using multiple files and callbacks. In my opinion, it's just more challenging (funnier) if you want to reverse-engineer their site.
您可以对您的javascript进行模糊处理，但唯一的验证必须在您的服务器上完成。例如，我试图从天气网络中获取天气。他们使用多个文件和回调隐藏了他们的API调用。在我看来，如果你想对他们的网站进行逆向工程，那就更具挑战性（更有趣）了。
Javascript can't be secure. Never trust user input
Javascript无法安全。绝不相信用户输入
#4
0
If you are logging button clicks, the safest way to keep track is to save and validate on the server side.
如果要记录按钮单击，最安全的跟踪方法是在服务器端保存和验证。
For example, when you click a like button on Soundcloud, it makes an HTTP request to Soundcloud's server, records that you clicked the button, and marks it as a favorite. This way, if the same user clicks the button anytime in the future, it can check before incrementing the number of favorites.
例如，当您单击Soundcloud上的like按钮时，它向Soundcloud的服务器发出HTTP请求，记录您单击该按钮，并将其标记为收藏夹。这样，如果同一个用户将来随时点击该按钮，它可以在增加收藏夹数量之前进行检查。
The number displayed in the button is also pulled in from the database when the view is rendered.
呈现视图时，按钮中显示的数字也会从数据库中拉入。
#5
0
This is a huge topic, and you have a lot to learn, far too much for a comment here. Anything "stored" in an attribute in the HTML source is absolutely not secure, it can be changed very very easily.
这是一个很大的话题，你需要学习很多，这里的评论太多了。 HTML源代码中的任何“存储”内容都绝对不安全，可以非常轻松地进行更改。
The most common way of dealing with this would be to use a cookie, but even with some effort these can be manipulated.
处理这个问题最常见的方法是使用cookie，但即使付出一些努力，这些也可以被操纵。
If security is important, find some way of identifying your users (possibly by IP, but even that isn't fool proof!) and keep the data on your server, linked to a user ID which can be retrieved after the button is clicked.
如果安全性很重要，找一些识别用户的方法（可能通过IP，但即使这不是万无一失的！）并将数据保存在服务器上，链接到用户ID，可以在单击按钮后检索。
#1
2
Consider this function:
考虑这个功能：
function setupPrivateData(element) {
var private = 1;
element.setPrivate = function ( d ) { private = d; }
element.getPrivate = function ( ) { return private; }
}
When called with some DOM element it will add two methods to it: .setPrivate(val) and .getPrivate().
当使用一些DOM元素调用它时，它将添加两个方法：。setPrivate（val）和.getPrivate（）。
These are the only methods that will allow you to access and modify that private variable associated with the element.
这些是允许您访问和修改与该元素关联的私有变量的唯一方法。
#2
1
The user can always manipulate data. Nothing stops an advanced user to access object properties or call a jquery.data() on their own.
用户总是可以操纵数据。没有什么能阻止高级用户访问对象属性或自己调用jquery.data（）。
Something you could do in vanilla js would be:
你可以在vanilla js做的事情是：
var div = document.getElementById("test");
div.something = "hidden value";
div.addEventListener("click", function() {
alert(this.something);
});<div id="test">click me</div>The best way would to be a serverside verification if the sent data is valid or not.
如果发送的数据有效，最好的方法是进行服务器端验证。
Besides that, you could try to wrap your code in an anonymous function to deny the user access to the object:
除此之外，您可以尝试将代码包装在匿名函数中以拒绝用户访问该对象：
(function() {
var data = {};
data.something = "test";
})()
But even that fails as soon as the user manipulates your files and adds for instance a debugger statement.
但是，即使在用户操作文件并添加例如调试器语句时也会失败。
#3
1
You can obfuscate your javascript but the only validation has to be done on your server. For example, I tried to get the weather from theweathernetwork. They have hidden their API call using multiple files and callbacks. In my opinion, it's just more challenging (funnier) if you want to reverse-engineer their site.
您可以对您的javascript进行模糊处理，但唯一的验证必须在您的服务器上完成。例如，我试图从天气网络中获取天气。他们使用多个文件和回调隐藏了他们的API调用。在我看来，如果你想对他们的网站进行逆向工程，那就更具挑战性（更有趣）了。
Javascript can't be secure. Never trust user input
Javascript无法安全。绝不相信用户输入
#4
0
If you are logging button clicks, the safest way to keep track is to save and validate on the server side.
如果要记录按钮单击，最安全的跟踪方法是在服务器端保存和验证。
For example, when you click a like button on Soundcloud, it makes an HTTP request to Soundcloud's server, records that you clicked the button, and marks it as a favorite. This way, if the same user clicks the button anytime in the future, it can check before incrementing the number of favorites.
例如，当您单击Soundcloud上的like按钮时，它向Soundcloud的服务器发出HTTP请求，记录您单击该按钮，并将其标记为收藏夹。这样，如果同一个用户将来随时点击该按钮，它可以在增加收藏夹数量之前进行检查。
The number displayed in the button is also pulled in from the database when the view is rendered.
呈现视图时，按钮中显示的数字也会从数据库中拉入。
#5
0
This is a huge topic, and you have a lot to learn, far too much for a comment here. Anything "stored" in an attribute in the HTML source is absolutely not secure, it can be changed very very easily.
这是一个很大的话题，你需要学习很多，这里的评论太多了。 HTML源代码中的任何“存储”内容都绝对不安全，可以非常轻松地进行更改。
The most common way of dealing with this would be to use a cookie, but even with some effort these can be manipulated.
处理这个问题最常见的方法是使用cookie，但即使付出一些努力，这些也可以被操纵。
If security is important, find some way of identifying your users (possibly by IP, but even that isn't fool proof!) and keep the data on your server, linked to a user ID which can be retrieved after the button is clicked.
如果安全性很重要，找一些识别用户的方法（可能通过IP，但即使这不是万无一失的！）并将数据保存在服务器上，链接到用户ID，可以在单击按钮后检索。