Intro to Fullstack Flask

Intro

Building your first Flask Application

How to Install Flask and Python 3 With Virtual Environments

Building an stock quote application that uses an external API

How to Fetch Data From a REST API With Python and Flask

Deploying our Stock Quote application using Heroku

Deploy a Flask App with the Heroku CLI and a Procfile

Building Your First Flask Page Template With Jinja2 and Variables

Styling Flask Jinja2 Templates With Bootstrap, CSS, and IF Logic

Summary

Rendering Pages

An Intro to Building Modular Flask Applications With Blueprints

How to Add Blueprints and Routing to Flask

Growing our application with Blueprints

How to Build Scalable Apps With a Flask Application Factory

Application Factories & Configuration

How to Configure a Flask App for Unit Testing With PyTest

Getting to 100% Code Coverage With Flask Python Testing

Testing

Our Project: Yumroad

Set Up a Maintainable Flask Application in a Virtual Environment

Part II: Building Larger Flask Applications

Connect Databases to a Flask App With SQLAlchemy ORM

How to Query Data and Insert Database Rows With SQLAlchemy

Databases & ORMs

Combine Flask Blueprint Pages, Jinja Templates, and Databases

How to Test Flask Routes and Handle 404 Errors

Building pages using our models

Building HTML Forms and Validating Data in a Flask App

Build HTML Forms in a Flask App With Python and WTForms

Pre-populate a WTForms Form And Prevent CSRF Attacks

Handling Forms (with WTForms)

How to Add User Login and Authentication With Flask-Login

Flask-Login & Sessions

How to Log Out Users From a Flask App and Test Authentication

Logins

Database Relationships and Migrations in a Flask App

Using SQLAlchemy for relationships between models

Implementing Database Relationships in Flask With SQLAlchemy

Handle Database Migrations in Flask SQLAlchemy With Alembic

DB Relationships & Migrations

Send Email From Flask With Flask-Mail and Jinja Templates

Sending emails

Building a Payments UI in Flask

How to Integrate Stripe Checkout With Flask to Accept Payments

How to Add Unit Tests to a Flask Stripe Payments Integration

Payments

Organize Images, CSS, and JavaScript in Flask Asset Bundles

Assets

Part III: Deploying to Production

How to Debug Errors in a Flask App With Werkzeug and Sentry

Errors

How to Queue and Delay Python Jobs With RQ and Redis

Delayed Jobs

How to Improve Flask Performance With Flask Debug Toolbar

Improving Performance

How to Deploy a Flask App to Heroku With SSL and Redis Cache

Deployment

Yumroad To Ignite

Part IV: Ignite (SaaS Boilerplate)

Introducing Ingite

Ignite Demo

Getting Started with Ignite

Using Ignite

Appendix A: Installing Python on Windows, Mac, and Linux

Appendix B: Becoming a Flask Expert

Appendix C. Boilerplate Applications

Appendix

Changelog

Revision 1

In this course, we'll be creating ... whatever you want in markdown

In Fullstack Flask I will teach you how to use the full power and expressiveness of Python to build a fully functional income-generating web app from scratch using Flask.

Fullstack Flask: Build a Complete SaaS App with Flask

---
title: "Pre-populate a WTForms Form And Prevent CSRF Attacks"
# description:
privateVideoUrl: https://fullstack.wistia.com/medias/c8rg2yuk0b
code: https://gitlab.com/fullstackio/books/newline-course-apps/sumukh-sridhara-fullstack-flask-app/-/tree/main/code/module_09/lesson_09.02/App/code/07-yumroad-forms?ref_type=heads
---

# Editing Data with Forms

You can use WTForms to prepopulate data for forms as well, which is handy when you are editing records. To prepoulate data in a form from a object, WTForms provides a method called `process` where we can pass in raw form data and/or an object

```python
@products.route('/<product_id>/edit', methods=['GET', 'POST'])
def edit(product_id):
    product = Product.query.get_or_404(product_id)
    form = ProductForm()
    if form.validate_on_submit():
        product.name = form.name.data
        product.description = form.description.data
        db.session.add(product)
        db.session.commit()
    elif not form.errors:
        # We do this to make sure we're not overwriting a user's input
        # if there was an error.
        form.process(formdata=form.data, obj=product)
    return render_template('products/edit.html', form=form, product=product)
```

A shortcut for the above logic, is to simply pass in the object when instantiating the form.

```python
@products.route('/<product_id>/edit', methods=['GET', 'POST'])
def edit(product_id):
    product = Product.query.get_or_404(product_id)
    form = ProductForm(product)
    if form.validate_on_submit():
        product.name = form.name.data
        product.description = form.description.data
        db.session.add(product)
        db.session.commit()
    return render_template('products/edit.html', form=form, product=product)
```

The template for the edit form (`yumroad/templates/products/edit.html`), looks very similar to the creation form, but uses the `edit` route instead. It's useful to have a separate template since we may want to customize what fields we allow on the edit field.

```html
{% block title %} Edit {{ product.name }} {% endblock %}

{% block content %}
  <div class="container">

    <form method="POST" action="{{ url_for('products.edit', product_id=product.id) }}">
      {{ render_field(form.name) }}
      {{ render_field(form.description) }}
      <button type="submit" class="btn btn-primary">Edit</button>
    </form>

  </div>
{% endblock %}
```

# CSRF

Our application right now will accept any POST requests and process the change if the user is logged in (by looking at the cookies). This creates a security vulnerability called Cross Site Request Forgery where other websites can create requests on behalf of users who happened to be logged into our site and land on a malicious webpage. It would be bad if we allowed malicious websites the opportunity create products, or worse transfer funds, on behalf of our users.

You can read more about CSRF [here](https://owasp.org/www-community/attacks/csrf).

### Setting up CSRF Protection

Flask WTForms allows us to enable CSRF Protection. To support it, we'll need to

In `extensions.py`, we can import `CSRFProtect` from `flask_wtf.csrf` and instantiate it.

`extensions.py` should look like this.

```python { actualFilename=./protected/code/07-yumroad-forms/yumroad/extensions.py endChar=118 endLine=5 startChar=0 startLine=1 statedFilename=yumroad-app/yumroad/extensions.py url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_09/lesson_09.02/protected/code/07-yumroad-forms/yumroad/extensions.py }
from flask_sqlalchemy import SQLAlchemy
from flask_wtf.csrf import CSRFProtect

db = SQLAlchemy()
csrf = CSRFProtect()
```

In `yumroad/__init__.py`, we will have to call `csrf.init_app` with our `app` to set it up.

`yumroad/__init__.py` should look like this:

```python { actualFilename=./protected/code/07-yumroad-forms/yumroad/extensions.py endChar=118 endLine=5 startChar=0 startLine=1 statedFilename=yumroad-app/yumroad/extensions.py url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_09/lesson_09.02/protected/code/07-yumroad-forms/yumroad/extensions.py }
from flask_sqlalchemy import SQLAlchemy
from flask_wtf.csrf import CSRFProtect

db = SQLAlchemy()
csrf = CSRFProtect()
```

You will likely also need to set `SECRET_KEY` in order to generate CSRF tokens. We will discuss how the `SECRET_KEY` is used in the next chapter.

To quickly generate a random value using Python, you can use the `os.urandom` method. Run this command in your terminal to get a random string of bytes: `python -c 'import os; print(os.urandom(16))'`

For the development environment, we can add a simple default value. In `yumroad/config.py`, ensure that the `DevConfig` specifies a `SECRET_KEY`.

```python
class BaseConfig:
    TESTING = False
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    SECRET_KEY = os.getenv('YUMROAD_SECRET_KEY', '00000abcdef')
...
class ProdConfig(BaseConfig):
    SECRET_KEY = os.getenv('YUMROAD_SECRET_KEY')
```

### Implementing CSRF Protection in Forms

Implementing CSRF protection is straight form thanks to `flask_wtf`. All forms have a `csrf_token` field that we need to render in the template. The field is configured to be hidden but the value of the `csrf_token` field will be checked through the form validations to ensure that it the provided token is valid.

Sumukh Sridhara

In the last video, we went over how to use WTFarms to create records.

In this video, we're going to go over how to use WTFarms to edit records.

We're also going to enable Cross-Site Request Forgery Protection.

In our code, we have a route to create records.

Similarly, we're going to want a route to edit a particular record.

So what I'm going to do is I'm going to copy this route,

The first one is that this is going to have to operate on a specific product ID

Then once it's operating on a specific product ID,

we're going to want to get the product that it's associated with.

we're going to want to instead just edit the product that we fetched.

So product.name is going to be equal to form.name.data and product.

Description is going to be equal to form.description.data.

Now that we have this, we can take a look at whether we need a separate form

So looking at forms.py, product form has the field name and description.

We could edit this and create a edit product form field.

If say we didn't want our users to be able to edit the name of product.

But in our case, I think it's fine if they add anything.

So we can actually just go ahead and use the same exact form class.

Okay, so coming back here, we want our form to be pre-filled with our object

So we can actually do that by just passing in the object to the form.

So if we say object is equal to product here.

wt forms will take care of pre-filling the objects

because between the form and the model, the fields match exactly.

So this will pre-fill our form and this will set the right data.

So here on the edit, we're going to create the edit.html form.

We're also going to pass in the product in case we need to reference it.

We're going to take that and use that for edit page as well.

So we're going to say edit and then here we can actually just render the name

Okay, so form field.name submit and instead of edit product, let's try that.

We're going to have to pass in the product ID in order to make this all work.

Now let's check it out and see if it worked.

So here I can see the edit page and it loads all the data here.

And so I can change this to see my technical book and that works and then I can

go back and edit and I can try and do something invalid like changing the name

to a SQL character and then it complains.

And if you go back, we verify that it didn't actually change the record, which

Now I'm going to talk about cross site requests for your protection.

This is important security feature to have.

You can read more about it on this website.

Here I have our form and I can craft the HTML form that looks innocuous.

You know, who knows what it does, but it looks innocuous enough.

And then as soon as I enter it, it actually went in and changed our data.

So now if I look at this, that looks pretty bad.

So we're going to have to figure out a way to solve that error and the way to

do that is by using cross site request for your protection.

Fortunately, last W T forms comes with a built in way to handle that in our

So here what we're going to do is we're going to say from last W T forms dot CS

So we can say that that CSRF is equal to CSRF protect going an application in

We're then going to want to import that from our application and then in it app

Now what this does by default is it makes that every request that's getting a

post or a put or something that's changing data like a delete request as well

is also going to require a CSRF token to be attached to it.

And in order for CSRF token to be attached to it, we're going to have to

implement a secret key field as well within our configuration.

So let's go ahead and edit our config to make sure that we're enabling that to

Okay, so first off, we had earlier disabled CSRF protection.

So we'll want to disable in test mode for convenience sake, but in production

and in dev mode, we'll want it to be enabled.

So let's go ahead and actually set that to true there.

And we're also going to need to set a secret key and a secret key is something

that flas uses to sign certain fields so that it knows that they weren't tam

In order to generate a value that we can use for the secret key, what we can do

is go into our terminal and run a quick Python script to generate something

So in our terminal, what we can do is we can just launch Python and run

Okay, so this value is something that we can use as a secret key for now.

In our dev environment, it really doesn't quite matter what our secret key is,

but in production, we won't want to hard code that into our application.

So what we can do is we can set our secret key is equal to OS dot get end,

which retrieves an environment variable we can call this one secret key.

And if it's not set, we're going to let it be done and let our application

But by default in our dev config, we're going to go ahead and set some value