Add CSRF protection

app.py

@@ -18,6 +18,7 @@
 from werkzeug.exceptions import default_exceptions, HTTPException, InternalServerError
 from werkzeug.security import check_password_hash, generate_password_hash
 from datetime import datetime
+from flask_wtf.csrf import CSRFProtect
 
 from helpers import apology, login_required, usd
 
@@ -47,6 +48,8 @@ def after_request(response):
 
 # Custom filter
 app.jinja_env.filters["usd"] = usd
+# Enable CSRF protection globally for the Flask app
+csrf = CSRFProtect(app)
 
 # Create engine object to manage connections to DB, and scoped session to separate user interactions with DB
 engine = create_engine(os.getenv("DATABASE_URL"))
@@ -222,6 +225,9 @@ def index():
         # Get all of the expenses provided from the HTML form
         formData = list(request.form.items())
 
+        # Remove CSRF field from form data before processing
+        formData.pop(0)
+
         # Add expenses to the DB for user
         expenses = tendie_expenses.addExpenses(formData, session["user_id"])
 
@@ -247,6 +253,9 @@ def addexpenses():
         # Get all of the expenses provided from the HTML form
         formData = list(request.form.items())
 
+        # Remove CSRF field from form data before processing
+        formData.pop(0)
+
         # Add expenses to the DB for user
         expenses = tendie_expenses.addExpenses(formData, session["user_id"])
 
@@ -404,6 +413,9 @@ def createbudget():
         # Get all of the budget info provided from the HTML form
         formData = list(request.form.items())
 
+        # Remove CSRF field from form data before processing
+        formData.pop(0)
+
         # Generate data structure to hold budget info from form
         budgetDict = tendie_budgets.generateBudgetFromForm(formData)
 
@@ -442,6 +454,9 @@ def updatebudget(urlvar_budgetname):
         # Get all of the budget info provided from the HTML form
         formData = list(request.form.items())
 
+        # Remove CSRF field from form data before processing
+        formData.pop(0)
+
         # Generate data structure to hold budget info from form
         budgetDict = tendie_budgets.generateBudgetFromForm(formData)
 

templates/account.html

@@ -43,6 +43,7 @@ <h5 class="card-title">Income</h5>
           </div>
           <div class="collapse" id="collapseIncome">
               <form action="/account" id="updateIncome" method="post" autocomplete="off">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <div class="form-group">
                     <label class="col-form-label col-form-label-sm" for="income">Income Amount</label>
                     <input class="form-control form-control-sm" type="text" name="income" id="income" form='updateIncome' size="10" placeholder="$" maxlength="10" pattern="(?=.*?\d)^(([1-9]\d{0,2}(\d{3})*)|\d+)?(\.\d{1,2})?$" title="Format must be currency value without dollar sign or commas e.g. 1, 2.50, 1500.75" required>
@@ -64,6 +65,7 @@ <h5 class="card-title">Payers</h5>
           </div>
           <div class="collapse" id="collapsePayer">
               <form action="/account" id="addPayer" method="post" autocomplete="off">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <div class="form-group">
                     <label class="col-form-label col-form-label-sm" for="payerName">First Name</label>
                     <!--Regex from kennytm on SO: https://stackoverflow.com/questions/2721768/regular-expression-to-match-a-name -->
@@ -101,6 +103,7 @@ <h5 class="card-title">Password</h5>
           </div>
           <div class="collapse" id="collapsePassword">
               <form action="/account" id="updatePassword" method="post">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <div class="form-group">
                     <input class="form-control validate-register" name="currentPassword" id="currentPassword" type="password" placeholder="Current password" required
                         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Length must be at least 8 characters and contain minimum of one number, one lowercase letter, and one uppercase letter" onkeyup="checkMatch()">
@@ -144,6 +147,7 @@ <h5 class="modal-title" id="renameModalLabel">Rename Payer</h5>
           </div>
           <div class="modal-body">
             <form action="/account" id="renamePayer" method="post">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
               <div class="form-group">
                 <label for="oldpayer" class="col-form-label">Old Payer:</label>
                 <input type="text" class="form-control" name="oldpayer" id="oldpayer" value="" form="renamePayer" readonly>
@@ -179,6 +183,7 @@ <h5 class="modal-title" id="deleteModalLabel">Delete Payer</h5>
           </div>
           <div class="modal-body">
             <form action="/account" id="deletePayer" method="post">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
               <div class="form-group">
                 <input type="hidden" class="form-control" name="delete" id="delete" value="" readonly>
               </div>

templates/addexpenses.html

@@ -14,6 +14,7 @@ <h1>Add Expenses</h1>
     <p><small>Tip: Delete a row by clicking/tapping the row number in the '#' column and then clicking/tapping the 'Delete Row' button. Must have at least 2 rows.</small></p>
 
     <form action="/addexpenses" method="post" id="expenseForm" autocomplete="off">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
         <div class="table-responsive-sm">
         <table id="expenseTable" class="table table-hover">
           <thead>

templates/budgets.html

@@ -77,6 +77,7 @@ <h5 class="modal-title" id="deleteModalLabel">Delete Budget</h5>
       </div>
       <div class="modal-body">
         <form action="/budgets" id="deleteBudget" method="post">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
           <div class="form-group">
             <input type="hidden" class="form-control" name="delete" id="delete" value="" readonly>
           </div>

templates/categories.html

@@ -35,6 +35,7 @@ <h5 class="card-title">Create a new spending category</h5>
           </div>
           <div class="collapse" id="collapseCategory">
               <form action="/categories" id="createCategory" method="post" autocomplete="off">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                 <div class="form-group">
                     <label class="col-form-label col-form-label-sm" for="name">Category Name</label>
                     <input class="form-control form-control-sm" type="text" name="createName" id="name" form='createCategory' placeholder="e.g. Loans" pattern="^([a-zA-Z0-9_\s\-]*)$" title="Please enter a name without special characters except underscores, spaces, and hyphens" maxlength="99" required>
@@ -88,6 +89,7 @@ <h5 class="modal-title" id="renameModalLabel">Rename Category</h5>
           </div>
           <div class="modal-body">
             <form action="/categories" id="renameCategory" method="post" autocomplete="off">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
               <div class="form-group">
                 <label for="oldname" class="col-form-label">Old Name:</label>
                 <input type="text" class="form-control" name="oldname" id="oldname" value="" form="renameCategory" readonly>
@@ -125,6 +127,7 @@ <h5 class="modal-title" id="deleteModalLabel">Delete Category</h5>
           </div>
           <div class="modal-body">
             <form action="/categories" id="deleteCategory" method="post">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
               <div class="form-group">
                 <input type="hidden" class="form-control" name="delete" id="delete" value="" readonly>
               </div>

templates/createbudget.html

@@ -16,6 +16,7 @@ <h4 class="alert-heading">Congrats!</h4>
     </div>
     {% else %}
     <form action="/createbudget" id="createBudgetForm" method="post" autocomplete="off">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
         <div class="form-group">
             <label for="name" class="formLabels">Budget Name</label>
             <input type="text" class="form-control" id="name" form='createBudgetForm' name="name"

templates/expensehistory.html

@@ -81,6 +81,7 @@ <h5 class="modal-title" id="updateModalLabel">Update Expense</h5>
           </div>
           <div class="modal-body">
             <form action="/expensehistory" id="updateExpense" method="post" autocomplete="off">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
               <div class="form-group">
                 <input type="text" class="form-control" name="oldDescription" id="oldDescription" value="" form="updateExpense" readonly required hidden>
               </div>

templates/index.html

@@ -27,6 +27,7 @@ <h5 class="modal-title" id="quickExpenseModalLabel">Add Expense</h5>
             </div>
             <div class="modal-body">
                 <form action="/" id="quickExpense" method="post" autocomplete="off">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                     <div class="form-group">
                         <label for="description" class="col-form-label">Description:</label>
                         <input type="text" class="form-control" name="description" id="description" value=""

templates/login.html

@@ -12,6 +12,7 @@ <h2>Tendie Tracker</h2>
 <br>
 <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
 <form action="/login" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     <div class="form-group">
         <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
     </div>

templates/register.html

@@ -19,6 +19,7 @@ <h6 class="alert-heading">Oh snap!</h6>
 </div>
 {% endif %}
 <form action="/register" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     <div class="form-group">
         <input autocomplete="off" autofocus class="form-control validate-register" name="username" id="username"
             type="text" placeholder="Username" required pattern="^[a-zA-Z0-9]{3,16}$"

templates/updatebudget.html

@@ -8,6 +8,7 @@
 <h1>Update Budget</h1>
 <br>
 <form action="/updatebudget/{{ budget['name'] }}" id="updateBudgetForm" method="post" autocomplete="off">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     <div class="form-group">
         <label for="name" class="formLabels">Budget Name</label>
         <input type="text" class="form-control" id="name" form='updateBudgetForm' name="name"