CSRF json

Author: greyshell

web/login/app.py

@@ -6,7 +6,6 @@
 
 from flask import Flask, render_template, session, redirect, url_for, jsonify
 from flask import request
-from flask_wtf.csrf import CSRFProtect
 from web.login.models import *
 
 templates_path = os.path.abspath(
@@ -16,7 +15,6 @@
 app.config.update(dict(
         SECRET_KEY="woopie"
 ))
-csrf = CSRFProtect(app)
 
 
 def get_logged_in_user():
@@ -37,7 +35,6 @@ def after_request_func(response):
 
 
 @app.route('/', methods=['GET', 'POST'])
-@csrf.exempt
 def index():
     user = get_logged_in_user()
     if user is not None:
@@ -66,7 +63,8 @@ def update_age():
     user = get_logged_in_user()
     if user is None:
         return jsonify(status="User not logged in")
-    age = int(request.form.get('age'))
+    print(request.get_json())
+    age = int(request.json['age'])
     user.age = age
     success = user.save()
     if success[0]:
@@ -76,7 +74,6 @@ def update_age():
 
 
 @app.route('/logout')
-@csrf.exempt
 def logout():
     if 'userid' in session:
         session['userid'] = None

web/login/static/js/change_age.js

@@ -1,4 +1,21 @@
 function changeAgeRequest() {
-    var form = document.getElementById("change_age_form");
-    alert(form);
+    var newAge = document.getElementById("age_field").value;
+    var xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+        var notice = "";
+        if (xhr.status >= 200 && xhr.status < 300) {
+            var ageField = document.getElementById("age");
+            ageField.innerHTML = newAge;
+        } else {
+            notice += "Error: ";
+        }
+        notice += JSON.parse(xhr.responseText)['status'];
+        var noticeField = document.getElementById("notice");
+        noticeField.innerText = notice;
+    };
+    var jsonData = {age: newAge};
+    var formattedJsonData = JSON.stringify(jsonData);
+    xhr.open('POST', '/update_age');
+    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+    xhr.send(formattedJsonData)
 }

web/login/template/welcome.html

@@ -4,16 +4,17 @@
     <script src="{{ url_for('static', filename='js/change_age.js') }}"></script>
 </head>
 <body>
-Hello {{ user.name }}, your age is {{ user.age }} <br/>
+Hello {{ user.name }}, your age is <span id="age">{{ user.age }}</span> <br/>
 <a href="/logout">Log out</a><br/>
 
 {% if notice is defined %}
 Notice: {{ notice }}<br/>
 {% endif %}
 
 <form id="change_age_form">
-    Change age: <input type="text" name="age"/><br/>
-    <input type="button" value="submit" onclick="changeAgeRequest()"/>
+    Change age: <input type="text" name="age" id="age_field"/><br/>
+    <input type="button" value="submit" onclick="changeAgeRequest()"/><br/>
+    <span id="notice"></span>
 </form>
 </body>
 </html>