Created On: May 31, 2021, Last Updated On: August 30, 2023

Ajax

Public

sending ajax request csrf form

By Ozzie Ghani3 new



html file

    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-globe"></i></span>
      </div>
      <input placeholder="{{ session['domain'] }}" type="text" class="form-control" id="set_domain_input">
      <div class="input-group-append">
        <button class="btn btn-success" id="set_domain_btn">Set</button>
      </div>
    </div>

Preview 


You will need to set following 

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

also

    <meta name="csrf-token" content="{{ csrf_token() }}">
var csrftoken = $('meta[name=csrf-token]').attr('content'); $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) { xhr.setRequestHeader("X-CSRFToken", csrftoken) } } });


Alternatively, you can set

<meta name="csrf-token" content="{{ csrf_token() }}">

var csrf_token = "{{ csrf_token() }}"; $.ajax({ type: 'POST', url: '/login', headers: { "X-CSRFToken": csrf_token, } data: { ...


Sample Ajax 

  $(document).ready(function() {

    $(document).on('click', '#set_domain_btn', function() {
          var csrf_token = "{{ csrf_token() }}";
var domain = $('#set_domain_input').val(); data = {"domain": domain}; $.ajax({ url: "{{ url_for('toor.setdomain') }}", contentType: 'application/json;charset=UTF-8', data: JSON.stringify(data, null, '\t'), headers: {
"X-CSRFToken": csrf_token,
}, type: 'POST', dataType: 'json', success: function(response) { console.log(response); window.location.reload(); }, error: function(error) { console.log(error); } }); }); });


python 


@app.route('/set', methods=['GET', 'POST'])
def setdomain():
    if request.method == "POST":
        r = request.get_json()
        # r = request.get_json(force=True)
domain = r['domain'] print(domain) return jsonify({"domain": domain})


How to manually add csrf token in html form


<form id="regForm" action="/login" method="POST" role="post">
          <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token }}">
          <input type="submit" value="Submit" />
</form>