Octobercms - 表单上的 CSRF 保护以防止多次提交

Octobercms - CSRF Protection on a form to preventing multiple submission

我有一个带有表单的组件,然后是处理提交的代码。问题是,如果我向按钮发送垃圾邮件,它将多次提交表单。一个解决方案是通过 Javascript 添加禁用状态以防止用户这样做。

出于安全原因,我根本不希望这种情况发生并阻止服务器端。我有一个令牌,在配置中我启用了 CSRF

'enableCsrfProtection' => true,

这是我的表格

{{ form_open({ request: 'onSubmit' }) }}

            <div class="form-group">
                <label class="control-label" for="subject_name">Subject's name</label>
                <input id="subject_name" name="subject_name" type="text" placeholder="" class="form-control input-md" required="">

            </div>

            <div class="form-group">
                <label class="control-label">Postcode</label>
                <input id="postcode"  name="postcode" class="form-control input-md" type="text" required>
            </div>

            <div class="form-group">
                <button id="submit" type="submit" value="submit" class="btn btn-lg btn-gold pull-right"><i class="fa fa-lock"></i> Request Job</button>
            </div>

 </form>

并在生成的 html

处理程序/会话/令牌

<input name="_handler" type="hidden" value="onSubmit">
<input name="_session_key" type="hidden" value="7Eg9bK4pcT2NOgWwUS0UFUckjkSMRC1UDBkBhPwO">
<input name="_token" type="hidden" value="00nbkK3EAo2I8WGWSh85qkMjHYig6aldrd3oe8HZ">

然后在我的组件代码中

public function onSubmit()
{

    $name = post('subject_name');
    $postcode = post('postcode');

    if (Session::token() != Input::get('_token')) 
    { 

        /* Invalid token */ 
        return print('Token invalid');

    }

    $job = new Job;
    $job = $job->name = $name;
    $job = $job->postcode = $postcode;
    $job->save();

}

然而我垃圾邮件提交按钮,它会执行多次。如何添加只执行一次的功能?

对于您想完成的事情,有许多解决方案。

我建议最 eloquent 的解决方案是重定向或 ajax 更新。与您的用户沟通,将表单替换为一条消息,上面写着您的 "Request has been submitted. Thank you." 这将阻止他们向提交按钮发送垃圾邮件。

您可以按照 Magnus 的建议对会话进行一些操作。确保包含时间戳,以便在一段时间后将其删除。

你需要的是一个装载机

https://octobercms.com/docs/ui/loader

<div class="loading-indicator-container">

    <button id="submit" type="submit" value="submit" data-load-indicator="Saving..." class="btn btn-lg btn-gold pull-right"><i class="fa fa-lock"></i> Request Job</button>
</div>