javascript - 使用 <a href> 提交 POST 表单的最简单的跨浏览器方式是什么？

Question

我要改很多<a href>在我的程序中采取措施来提高安全性，我希望添加隐藏 token 以防止 CSRF攻击。

改变的最简单方法是什么<a href>行动 POST请求？

• 解决方案应该是跨浏览器的，并且适用于所有主流浏览器，例如 moz、IE、Chrome、Opera 等。
• 如果有一个没有外部依赖的纯 JavaScript 就好了
• 最好避免单独的、相当大的(与 <a href> 相比)代码块
• 它应该是 DOM 安全的，所以在一些装饰器中包装一个可点击的元素不应该破坏代码(可破坏的例子:parentNode.submit();)
• 可点击标签应该是一个 anchor ，即 <a> , 不是 <button>或 <submit>
• 它应该适用于文件上传/多部分表单

非 POST 操作:

<a href="/user/delete/4">DELETE</a>

目标解决方案:

<form method="post" target="/user/delete/4">
    <a href="SUBMIT THIS FORM">DELETE</a>
</form>

也许样式 <input type="submit"> 会更好看起来和分层完全像 <a>元素？

Answer 1

The solution should be cross-browser and work well on all major browsers i.e moz, IE, Chrome, Opera etc.

嗯，假设你希望它也适用于 ie6 这样的浏览器

it would be nice to have a pure JavaScript, without external dependencies

是的，可能是最好的解决方案

it would be nice to avoid separate, quite large (comparing to ) block of code

可以使用 anchor 标签

it should be quite DOM-safe, so wrapping a clickable element in some decorator should not break the code (breakable example: parentNode.submit();)

不是 parentNode 但你需要提交否则你不能通过 POST 发送数据

现代方法允许使用 new FormData()，与 ajax 混合使用。但是如果你想要兼容性，你需要使用某种老式脚本。

The clickable Tag should be an anchor i.e , not or

好的

it should work with file upload/multipart form

一个表格是的...

这样:

考虑到第一个要求......兼容性没有太多解决方案，你也不应该使用像 addEventListener() 这样的东西，它与旧的 ie 浏览器不兼容。

唯一的方法是创建一个可以处理多个操作的自定义函数。

这个功能是基于你的例子，删除一些东西....通过在html中添加一个带有名称的表单你已经有一些安全问题，所以我决定不向页面添加一个表单而是创建一个动态地。并在我将它附加到 dom 之后发送它。

function deleteSomething(e){
 if(token === whatever){
  var D=document,
  a=D.createElement('input'),
  x=D.createElement('form');
  x.method='post'
  a.type='text';
  a.name='id';
  a.value=e.title;
  x.appendChild(a);
  D.body.appendChild(x);
  x.submit();
 }
}

用法:

<a href="#" onClick="deleteSomething(this)" title="14">delete</a>
<a href="#" onClick="deleteSomething(this)" title="15">delete</a>
<a href="#" onClick="deleteSomething(this)" title="16">delete</a>

这是一个删除链接...因为在 ie6 上没有太多属性可以使用，我使用标题作为 id 的占位符 href 是一个空 anchor ，onclick 执行该函数。

然后您可以在该函数中添加自定义检查以查看标记是否正确。

你也可以在页面上添加一个表单，给它一个名字，然后将标题更改为表单名称......但是如果你想要安全......嗯......

对于 multipart，基本上是上传表单或注册表，我会像上面那样创建一个自定义函数，但不是发送所有内容，它只是将表单添加到 dom.. 这样你就可以填写它，然后发送它。

如果您希望它在最旧的浏览器上运行，请不要使用外部库、安全表单、点击链接，这就是我能想到的所有内容。

我个人使用 ajax 和 formdata。适用于所有现代浏览器.. ie10 也是。我也不喜欢在 anchor 内添加内联函数。

如果您对代码或如何扩展它有任何疑问，请问...

通过动态添加链接，您可以改进代码并进一步提高安全性。

顺便说一句，如果黑客想要获得客户端 token ，在 js 中相对容易。

你需要检查服务器端。

security && ie6 是不可能的。

我永远不会使用这个，这只是防止简单的攻击......如果有人真的想破解你的网站，那很容易。

通过邮寄获得安全数据的唯一方法是您需要检查每个用户，同时添加 cachpa 或它的调用方式并不那么安全....

我会:在服务器端检查引荐来源网址、用户，也许还有 token 。使用 ajax 和表单数据。这适用于所有现代浏览器。如果您的台式电脑上有 ie6 并且不想/不能安装现代浏览器，请使用您/您 friend 的手机。

你不能对用户隐藏 javascript ...前段时间我写了一个关于隐藏 js 代码的答案... https://stackoverflow.com/a/17468822/2450730 使用 newset chrome，如果你知道在哪里可以找到 secret 的 js 代码。 该示例使用 base64 检查引用是否具有自定义 header 等。