这是启用 SecurityComponent 的 ajax 请求的一个典型问题。
我主要是做SPA。这是主要问题。
我还使用了 CSRF 组件,它工作得很好:
const response = await axios.post("/items/add.json", data, {
headers: {"X-CSRF-Token": "<?= $this->getRequest()->getParam('_csrfToken') ?>"}
});
不起作用的是发送安全组件的令牌:
{message: "'_Token' was not found in request data.", url: "/.../add.json", code: 400,…}
当然,我可以禁用安全组件。
我的请求不需要表单/表单帮助程序,那么问题是,当我不使用基于传统表单的应用程序时,在这里使用 SecurityComponent 是否有意义。当然,我期望在某些操作中使用某些帖子字段/值是有道理的,但我不确定如何将其与 SecurityComponent 结合使用。
我想我可以使用助手创建一个虚拟表单并从那里提取令牌,但这仅生成一次并且我有一个 SPA。
这当然有效:
过滤前:$this->getEventManager()->off($this->Security);
我只是提供技术答案,而不是对使用 SecurityComponent 是否有意义发表意见 - 安全性不是我的强项。
如果您需要从 SPA 提交许多 AJAX 调用,您可以通过 AJAX 请求生成请求表单,然后从中提取令牌吗?这可能听起来有点老套,但实际上可以非常巧妙地完成 - 您提交的每个 AJAX 请求都可以执行您需要它执行的操作,然后返回一个新的<form>
元素(包含新令牌)作为其响应的一部分 - 然后您可以将其隐藏在不可见的地方,覆盖前一个元素并从中检索令牌以供下一次调用。
当谈到管理提交时,我发现处理令牌等最简单的方法是结合这个答案 https://stackoverflow.com/a/45163510/356256序列化(例如 jQuery 的serialize()
)。这将所有隐藏的表单值整齐地打包起来。我的(基于 jQuery 的)代码如下所示:
var ele_form = $('#some-form-id');
var ele_csrf = ele_form.find('input[name="_csrfToken"]');
var target_url = ele_form.attr('action'); // form-action is validated, so need to generate this correctly
var csrf_token = ele_csrf.val();
$.ajax({
type: 'POST',
url: target_url,
beforeSend: function(xhr){
xhr.setRequestHeader('X-CSRF-Token', csrf_token);
},
data: ele_form.serialize()
});
如果您想更具体地了解在 SPA 中发送的请求类型,我们很乐意详细说明该示例。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)