CSRF Token 始终为空（Flask-WTF、Jinja、Axios、JavaScript）答案

【问题标题】：CSRF Token always empty (Flask-WTF, Jinja, Axios, JavaScript)CSRF Token 始终为空（Flask-WTF、Jinja、Axios、JavaScript）
【发布时间】：2021-09-10 02:43:41
【问题描述】：

我一直在尝试将 CSRF 集成到我的 Flask 应用程序中。它由一堆 Python 代码、一些 HTML 和一些 JavaScript 文件组成。

初始设置很顺利（init.py）：

from flask_wtf.csrf import CSRFProtect
csrf = CSRFProtect()
csrf.init_app(app)

这是它应该做的，请求被阻止/需要一个 CSRF 令牌。

但是，当我进入 JavaScript 文件以相应地调整它们时，像这样引用 csrf 令牌：

content= "{{ csrf_token() }}"

只返回“csrf_token()”作为令牌，而不是实际值。

我认为这是 Jinja 的问题（就像我必须告诉它一些事情，所以该方法返回一个正确的值，但我缺乏这方面的知识）。

【问题讨论】：

试试generate_csrf()

标签： javascript python flask jinja2 flask-wtforms

【解决方案1】：

您提到您在其中一个 JavaScript 文件中添加了 {{ csrf_token() }} 行；然而，Jinja 在解析这些类型的参数时实际上考虑的是显式 HTML 文件的内容，因此不会访问外部 JavaScript 文件，即使您将它们导入 HTML 文件。

因此，如果您尝试在 HTML 的隐式脚本中使用它，它应该可以工作：

main.py:

from flask import Flask, render_template
from flask_wtf import CSRFProtect

csrf = CSRFProtect()
app = Flask(__name__)
app.config.update(
SECRET_KEY='flask_rocks'
)
csrf.init_app(app)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True, port=8080)

静态/script.js：

var mytoken = "{{ csrf_token() }}"

模板/index.html：

<html>
        <head>
                <title>Whatever</title>
        </head>
        <body>
                <script src="{{ url_for('static',filename='script.js') }}"></script>
                <script>
                var myactualtoken = "{{ csrf_token() }}";
                console.log("This will work: " + myactualtoken);
                console.log("This won't work: " + mytoken);
                </script>
        </body>
</html>

控制台输出：

This will work: ImZhYWFlMDY5MTEyNzZkODRlNWQ1Y2MyZjAwY2QxZDY2MzJmOTQ1ZDEi.YNnSlQ.MI8T3MbsFAROy81IFCrdESF85rA
This won't work: {{ csrf_token() }}

我建议查看official docs 以获得更多信息。

【讨论】：

有道理，我想。要添加到它（如果你想在 JS 中使用 Token（如在文档中），你必须添加：'' 在您的 HTML 中某处，然后您可以通过调用 document.getElementById('csrfToken').value 来获取令牌
确实！感谢分享。