如何将我的csrf标记添加到我的jQuery调用中?

时间:2017-09-30 10:52:22

标签: javascript jquery csrf

我的服务器生成一个csrfToken,它插入到以下元素中:

<input type="hidden" name="_csrf" value="{{_csrfToken}}">

{{_csrfToken}}用于模板化,但在运行时在服务器上用实际令牌替换。

<div class="formContainer">
    <form class="form-horizontal signupform" role="form" action="/process?form=signupform" method="POST">
    <input type="hidden" name="_csrf" value="{{_csrfToken}}">
        <div class="form-group">
            <label for="fieldName" class="col-sm-2 control-label">Name</label> 
            <div class="col-sm-4">
                <input type="text" class="form-control"
                id="fieldName" name="name">
             </div>
        </div>
        <div class="form-group">
            <label for="fieldEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" required id="fieldName" name="email">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-4">
                <button type="submit" class="btn btn-default">Register</button> 
            </div>
        </div>
    </form>
</div>
{{#section 'jquery'}}
<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
            var $container = $(this).closest('.formContainer'); $.ajax({
                url: action,
                type: 'POST',
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you!</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>
{{/section}}

如何更新我的jQuery调用以包含令牌?现在它产生错误,因为没有包含令牌......

2 个答案:

答案 0 :(得分:1)

试试这个,你实际上并没有张贴任何东西。我没有测试它,如果它失败了,也许你应该手动收集数据。

<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
          + var payload = $(this).serializeArray()          
            var $container = $(this).closest('.formContainer'); $.ajax({
                url: action,
                type: 'POST',
          +     data: payload,
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>

答案 1 :(得分:1)

虽然看起来这是一个重复的帖子仍然就答案而言,这是你应该如何检查这个SO post

我正在为你编写代码

<script>
    $(document).ready(function(){ 
        $('.signupform').on('submit', function(evt){
            evt.preventDefault();
            var action = $(this).attr('action');
            var $container = $(this).closest('.formContainer'); 
            var token =  $('input[name="_csrf"]').attr('value')
        $.ajaxSetup({
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Csrf-Token', token);
            }
        });
        $.ajax({
                url: action,
                type: 'POST',
                success: function(data){
                    if(data.success){ $container.html('<h2>Thank you!</h2>');
                }else{
                    $container.html('There was a problem.');
                } 
            },
                error: function(){
                    $container.html('There was a problem.');
                }
            });
        }); 
    });
</script>