Add X-CSRFToken header to fetch API call

Author: khteh

src/controllers/FibonacciController.py

@@ -57,8 +57,7 @@ async def fibonacci() -> ResponseReturnValue:
             await flash("Please provide a numeric value 'N' for the fibonacci number!", "danger")
     else:
         logging.warning(f"Invalid request method: {request.method}!")
-    response = await Respond("fibonacci.html", title="Welcome to Python Flask Fibonacci calculator", fibonacci=fibonacci)
-    return response
+    return await Respond("fibonacci.html", title="Welcome to Python Flask Fibonacci calculator", fibonacci=fibonacci)
 
 def _fib(n):
 #    n = input(n)

src/main.py

@@ -55,7 +55,7 @@ def create_app() -> Quart:
     app = cors(app, allow_credentials=True, allow_origin="https://localhost")
     configure_uploads(app, images)
     # https://quart-wtf.readthedocs.io/en/stable/how_to_guides/configuration.html
-    #csrf = CSRFProtect(app)
+    CSRFProtect(app)
     bcrypt.init_app(app)
     db.init_app(app)
     # https://hypercorn.readthedocs.io/en/stable/how_to_guides/http_https_redirect.html

src/view/templates/base.html

@@ -75,7 +75,7 @@
   <div class="content" style="margin-top: 10px">
     {% block content %}
     {% endblock %}
-    <div class="container" style="margin-top: 10px">
+    <div id="notification" class="container" style="margin-top: 10px">
       {% with messages = get_flashed_messages(with_categories=true) %}
 		  {% if messages %}
 		  <hr>			

src/view/templates/chat.html

@@ -1,11 +1,13 @@
 {% extends "base.html" %}
 {% block content %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/chat.css') }}">
+<meta name="csrf-token" content="{{ csrf_token() }}">
 <div class="container" style="margin-top: 10px">
   <div id="chat-room-widget" style="margin-top: 10px">
     <div id="messages">
     </div>
     <form id="chatForm" name="chatForm" action="{{url_for('chat.invoke')}}" method="post" enctype="multipart/form-data">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
       <div id="message-box">
         <div class="col-md-8">
           <textarea id="prompt" name="message" placeholder="How can I help?" class="form-control" rows="1" required onkeyup="stoppedTyping()"></textarea>
@@ -39,6 +41,7 @@
     // Select your input type file and store it in a variable
     document.querySelector("#chatForm").addEventListener("submit", async (e) => {
       e.preventDefault();
+      var csrf_token = $('meta[name=csrf-token]').attr('content');
       const prompt = document.querySelector("#prompt").value;
       const image = document.querySelector("#image");
       const receipt = document.querySelector("#checkReceipt").checked;
@@ -48,7 +51,7 @@
         form.append("prompt", prompt);
         form.append("receipt", receipt);
         if (image && image.files.length && image.files[0]) {
-          console.log(`Image name: ${image.files[0].name}, size: ${image.files[0].size}, type: ${image.files[0].type}`);
+          //console.log(`Image name: ${image.files[0].name}, size: ${image.files[0].size}, type: ${image.files[0].type}`);
           form.append("image", image.files[0]);
         }// else 
           //console.log("No file selected!");
@@ -77,6 +80,9 @@
           const response = await fetch('invoke', { /* Without forward-slash prefix! */
             method: 'POST',
             //headers: { 'Content-Type': 'multipart/form-data' }, Do NOT declare Content-Type: multipart/form-data in request header
+            headers: {
+              "X-CSRFToken": csrf_token,
+            },
             body: form
           });
           const data = await response.json();