CSRF on Falsk monitoring dashboard not working #411

AmiyaSah14 · 2022-01-23T08:49:13Z

Describe the bug
A clear and concise description of what the bug is.
I've imported flask_monitoringdashboard in my flask app as follows:
import flask_monitoringdashboard as dashboard

and have used in the app as follows:
dashboard.config.from_file('config.cfg')
dashboard.bind(app)
I've the respective config.cfg file too.

Flask Monitoring Dashboard is working fine if there is no CSRF implementation in the app.
If I use CSRF in the app then it's working fine for the app, but while logging into the flask monitoring dashboard its throwing CSRF missing token exception.

So how to implement CSRF for the Flask Monitoring Dashboard ?

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. MacOS 10.14.3]
Browser [e.g. chrome, safari]
FMD Version [e.g. 2.1.4]

Additional context
Add any other context about the problem here.

aenescu · 2022-03-16T10:50:56Z

What I did was to edit fmd_login.html in flask_monitorindashboard.html under venv/lib/python3.8/site-packages/flask_monitoringdashboard/templates/ and added a hidden input to the form.

mircealungu · 2022-03-16T11:55:31Z

thanks for the answer @aenescu!

do you have a snippet of the solution?
maybe we should try to add it in the actual FMD implementation so you don't have to modify anything.

aenescu · 2022-03-16T12:58:20Z

First line after <form class="form" method="POST" action="login">. It would be helpful to have it in the actual implementation

{% extends "fmd_base.html" %} {% block body %}

<body>
  <div class="container py-5">
    {% if show_login_banner %}
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <div class="text-center" style="margin-bottom: 20px; margin-top: -30px">
          <div style="text-align: center">
            <img
              src="{{ url_for(blueprint_name + '.static', filename='img/header.png') }}"
              width="80%"
            />
          </div>
          <span
            >Automatically monitor the evolving performance of Flask/Python web
            services</span
          >
        </div>
      </div>
    </div>
    {% endif %}

    <div class="row">
      <div class="col-md-4 offset-md-4">
        <span class="anchor" id="formLogin"></span>
        <div class="card card-outline-secondary">
          <div class="card-header">
            <h5>Login</h5>
          </div>

          <div class="card-body">
            <form class="form" method="POST" action="login">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="form-group">
                <label for="formName"><i class="fa fa-user"></i> Login</label>
                <input
                  id="formName"
                  name="name"
                  type="text"
                  class="form-control"
                  placeholder="Username"
                  autofocus
                  required
                />
              </div>

              <div class="form-group">
                <label for="formPassword"
                  ><i class="fa fa-lock"></i> Password</label
                >
                <input
                  name="password"
                  type="password"
                  class="form-control"
                  placeholder="Password"
                  required
                />
              </div>

              <button name="Login" class="btn btn-primary btn-block">
                Login
              </button>
            </form>
            <hr />
            {% if show_login_footer %}
            <div class="text-center">
              For advanced documentation, see
              <a
                target="_blank"
                href="http://flask-monitoringdashboard.readthedocs.io"
                >this site</a
              >
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

mircealungu · 2022-03-16T14:42:46Z

Nice @aenescu! Do you want to send a PR with your fix? In that case your contribution would also be captured in the history of FMD ;)

mircealungu · 2022-03-23T18:10:51Z

@aenescu - just a friendly reminder about the previous question :)

aenescu · 2022-03-23T18:14:56Z

Hi Mircea, Sorry for the late reply. I will make a PR tomorrow. Thank your for your suggestion :)

…

On Wed, Mar 23, 2022, 20:11 Mircea Filip Lungu ***@***.***> wrote: @aenescu <https://github.com/aenescu> - just a friendly reminder about the previous question :) — Reply to this email directly, view it on GitHub <#411 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIC6C2TDR54OVPD5D5QEQGDVBNNDPANCNFSM5MTCNEIA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

HrisyToteva · 2023-07-14T08:55:52Z

Hi @AmiyaSah14 , thank you for bringing up this issue and taking the time to contribute to the Flask-MonitoringDashboard project.

As part of my school project, my team is conducting a usability research study to improve the dashboard. I noticed your experience with the app and thought it would be valuable to gather more insights from you.

Would you be open to receiving a few questions about your experience with Flask-MonitoringDashboard? It won't take more than 20 minutes to answer them. Your feedback will play a vital role in enhancing the app's functionality and addressing any existing limitations.

If you're interested, please let me know, and I will send you the questions. Your involvement would be highly valuable and greatly appreciated.

amirhnir · 2023-11-25T14:26:14Z

First line after <form class="form" method="POST" action="login">. It would be helpful to have it in the actual implementation

{% extends "fmd_base.html" %} {% block body %}

<body>
  <div class="container py-5">
    {% if show_login_banner %}
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <div class="text-center" style="margin-bottom: 20px; margin-top: -30px">
          <div style="text-align: center">
            <img
              src="{{ url_for(blueprint_name + '.static', filename='img/header.png') }}"
              width="80%"
            />
          </div>
          <span
            >Automatically monitor the evolving performance of Flask/Python web
            services</span
          >
        </div>
      </div>
    </div>
    {% endif %}

    <div class="row">
      <div class="col-md-4 offset-md-4">
        <span class="anchor" id="formLogin"></span>
        <div class="card card-outline-secondary">
          <div class="card-header">
            <h5>Login</h5>
          </div>

          <div class="card-body">
            <form class="form" method="POST" action="login">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <div class="form-group">
                <label for="formName"><i class="fa fa-user"></i> Login</label>
                <input
                  id="formName"
                  name="name"
                  type="text"
                  class="form-control"
                  placeholder="Username"
                  autofocus
                  required
                />
              </div>

              <div class="form-group">
                <label for="formPassword"
                  ><i class="fa fa-lock"></i> Password</label
                >
                <input
                  name="password"
                  type="password"
                  class="form-control"
                  placeholder="Password"
                  required
                />
              </div>

              <button name="Login" class="btn btn-primary btn-block">
                Login
              </button>
            </form>
            <hr />
            {% if show_login_footer %}
            <div class="text-center">
              For advanced documentation, see
              <a
                target="_blank"
                href="http://flask-monitoringdashboard.readthedocs.io"
                >this site</a
              >
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

with this solution, the problem is still there because more routes in this module use the POST method, and all of them will raise errors without CSRF tokens including the API routes.
so it could not be a good solution. you just solved the problem for the login page but the problem is still there in other routes

A better solution is introducing the MonitoringDashboard blueprint as an exception in the CSRFProtect:

csrf.exempt(dashboard.blueprint)

aenescu pushed a commit to aenescu/Flask-MonitoringDashboard that referenced this issue Mar 28, 2022

fix issue flask-dashboard#411 csrf token missing on login form

b523d52

aenescu mentioned this issue Mar 28, 2022

Fix csrf token login #414

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSRF on Falsk monitoring dashboard not working #411

CSRF on Falsk monitoring dashboard not working #411

AmiyaSah14 commented Jan 23, 2022

aenescu commented Mar 16, 2022

mircealungu commented Mar 16, 2022

aenescu commented Mar 16, 2022

mircealungu commented Mar 16, 2022

mircealungu commented Mar 23, 2022 •

edited

aenescu commented Mar 23, 2022 via email

HrisyToteva commented Jul 14, 2023

amirhnir commented Nov 25, 2023

CSRF on Falsk monitoring dashboard not working #411

CSRF on Falsk monitoring dashboard not working #411

Comments

AmiyaSah14 commented Jan 23, 2022

aenescu commented Mar 16, 2022

mircealungu commented Mar 16, 2022

aenescu commented Mar 16, 2022

mircealungu commented Mar 16, 2022

mircealungu commented Mar 23, 2022 • edited

aenescu commented Mar 23, 2022 via email

HrisyToteva commented Jul 14, 2023

amirhnir commented Nov 25, 2023

mircealungu commented Mar 23, 2022 •

edited