如何通过 AJAX 使用 Flask-WTForms CSRF 保护？

关键词：

【中文标题】如何通过 AJAX 使用 Flask-WTForms CSRF 保护？【英文标题】：How to use Flask-WTForms CSRF protection with AJAX? 【发布时间】：2015-10-31 12:33:39 【问题描述】：

Flask-WTForms 提供 CSRF 保护。它在使用普通 HTML 表单时效果很好，但在使用 AJAX 时过程不太清楚。我的表单中有一个文件上传，我使用 AJAX 将过程分成两部分：文件发送到 upload 端点，而表单的其余部分发送到 submit 端点。由于该文件是使用 AJAX 发布的，因此它没有获得 CSRF 令牌，但我想保护 upload 端点免受攻击。使用 AJAX 时如何生成 CSRF 令牌？

@app.route('/submit', methods=["GET","POST"])
@login_required
def submit():
    form = MyForm()

    if request.method == "POST" and form.validate():
        # success, csrf checks out and data is validated
        # do stuff

    csrf_for_uploads = # generate csrf?
    return render_template('some_form.html', form=form, csrf_for_uploads=csrf_for_uploads)

@app.route('/upload', methods=["POST"])
@login_required
def upload():
    myfile = request.files['file']
    # How do I verify CSRF now?

【问题讨论】：

【参考方案1】：

我在想 !/^ 是一个否定断言，所以如果请求不匹配 Get/Head 等且不跨域，则使用 csrf 令牌的值设置请求标头

【讨论】：

【参考方案2】：

documentation 谈到了关于 AJAX 实现 CSRF 保护的一些内容。

您可以启用该模块：

from flask_wtf.csrf import CsrfProtect

CsrfProtect(app)

然后在您的 AJAX POST 调用中使用它：

<meta name="csrf-token" content=" csrf_token() ">

var csrftoken = $('meta[name=csrf-token]').attr('content')

$.ajaxSetup(
    beforeSend: function(xhr, settings) 
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) 
            xhr.setRequestHeader("X-CSRFToken", csrftoken)
        
    
)

希望这会有所帮助！

【讨论】：

嗯，我完全错过了那个文档。是的，总结得差不多了。 您好，请注意：“FlaskWTFDeprecationWarning：“flask_wtf.CsrfProtect”已重命名为“CSRFProtect”，将在 1.0 中删除。” 有人可以解释一下“if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain)”是什么意思吗？谢谢！ 此解决方案依赖于使用 jinja 渲染模板。有没有办法做到这一点？比如在响应中传递令牌？ 如何使用 fetch API 做到这一点？

如何避免登录用户通过控制台使用 ajax？

】如何避免登录用户通过控制台使用ajax？【英文标题】：howtoavoidloggeduserstouseajaxbyconsole?【发布时间】：2019-12-0518:19:26【问题描述】：我正在使用这个ajax函数将一个电子商务网站的产品插入到数据库中。我看到这种方法很不安全... 查看详情

如何通过拖放上传多个文件并使用ajax浏览

】如何通过拖放上传多个文件并使用ajax浏览【英文标题】：howtouploadmultiplefileswithdrag&dropandbrowsewithajax【发布时间】：2019-05-2519:12:04【问题描述】：如何通过拖放上传多个文件并使用ajax浏览？下面的代码是我目前所拥有的并且... 查看详情

如何通过此方法使用 Ajax 发送查询

】如何通过此方法使用Ajax发送查询【英文标题】：howtouseAjaxtosendquerybythismethod【发布时间】：2015-07-0306:41:26【问题描述】：我无法以这种方式发送Ajax请求找到了适合该网站的表格https://github.com/codrops/MinimalForm并尝试在不刷新页面... 查看详情

如何通过 AJAX 使用 Flask-WTForms CSRF 保护？

】如何通过AJAX使用Flask-WTFormsCSRF保护？【英文标题】：HowtouseFlask-WTFormsCSRFprotectionwithAJAX?【发布时间】：2015-10-3112:33:39【问题描述】：Flask-WTForms提供CSRF保护。它在使用普通HTML表单时效果很好，但在使用AJAX时过程不太清楚。我的... 查看详情

如何通过主干中的 ajax 调用使用模型渲染多个视图

】如何通过主干中的ajax调用使用模型渲染多个视图【英文标题】：howtorendermultipleviewswiththeirmodelsfromajaxcallsinbackbone【发布时间】：2015-09-2306:22:26【问题描述】：大家好，我正在尝试在主干中绘制具有多个模型和相关视图的屏幕。... 查看详情

如何使用summernote通过ajax同时传递内容和图片

】如何使用summernote通过ajax同时传递内容和图片【英文标题】：Howtousesummernotetopasscontentandimagesatsametimeviaajax【发布时间】：2019-05-1616:10:39【问题描述】：我正在尝试创建一个wp类型的文本编辑器来上传帖子的图像和内容。所以我... 查看详情

如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析？

】如何在jquery中创建关联数组并通过ajax发送以使用php解析？【英文标题】：HowdoIcreateanassociatearrayinjqueryandsenditviaajaxtogetparsedwithphp?【发布时间】：2011-03-3017:59:21【问题描述】：我将如何在jQuery中创建一个关联数组（或一些类似的... 查看详情

如何使用多个 Django FBV 通过 Ajax+jQuery 捕获和保存数据

】如何使用多个DjangoFBV通过Ajax+jQuery捕获和保存数据【英文标题】：HowtousemultipleDjangoFBVsincapturingandsavingdatathroughAjax+jQuery【发布时间】：2020-10-1818:43:29【问题描述】：在我的Django应用程序中，我使用了两个函数视图，FV1和FV2。FV1... 查看详情

如何通过 AJAX 调用使用 jQuery 渲染 HTML

】如何通过AJAX调用使用jQuery渲染HTML【英文标题】：HowtorenderHTMLwithjQueryfromanAJAXcall【发布时间】：2014-05-0103:45:11【问题描述】：我有一个带有书籍列表的选择框。用户可以选择一本书并点击提交按钮以在单独的页面上查看章节。... 查看详情

如何使用 jQuery 通过 Ajax 发送复选框数组的值？

】如何使用jQuery通过Ajax发送复选框数组的值？【英文标题】：HowtosendthevaluesofanarrayofcheckboxesthroughAjaxusingjQuery?【发布时间】：2012-09-0803:29:02【问题描述】：我有一个包含很多表单域（12xn行）的表单。每行中的第一个字段（代表... 查看详情

如何正确解析 JSON 文件以通过 JQuery Ajax 方法使用它？

】如何正确解析JSON文件以通过JQueryAjax方法使用它？【英文标题】：HowtoproperlyparseaJSONfiletouseitthroughtheJQueryAjaxmethod?【发布时间】：2019-10-1820:54:31【问题描述】：我创建了以下JSON数组：["nome":"AldoMaria","indirizzo":"VialeEuropa1","telefono":"... 查看详情

如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序？

】如何使用vanillajavascript通过ajax将多张照片上传到Laravel应用程序？【英文标题】：HowcanIuploadmultiplephotostoaLaravelapplicationthroughajaxusingvanillajavascript?【发布时间】：2019-03-1204:32:25【问题描述】：我有这个表格，我需要能够通过ajax将... 查看详情

如何使用 KnockoutJS 通过 AJAX 观察服务器上的数据？

】如何使用KnockoutJS通过AJAX观察服务器上的数据？【英文标题】：HowtouseKnockoutJStoobservedataonserverviaAJAX?【发布时间】：2011-05-2222:17:03【问题描述】：我玩过knockoutjs并生成了以下示例，这足以让我对在javascript中构建这些视图模型的... 查看详情

如何通过 Jquery/AJAX 上传文件 [重复]

】如何通过Jquery/AJAX上传文件[重复]【英文标题】：HowtouploadfilethroughJquery/AJAX[duplicate]【发布时间】：2013-11-2401:54:10【问题描述】：我目前正在使用以下代码通过AJAX发布我的表单：$(document).ready(function()$("form#createForm").submit(function(... 查看详情

如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

】如何使用jQueryAJAX和JSON通过Bootbox确认表单提交【英文标题】：HowtoconfirmaformsubmissionwithBootboxusingjQueryAJAXandJSON【发布时间】：2015-06-2419:53:10【问题描述】：我正在使用SpringMVC处理Web应用程序。我尝试在使用Bootbox提交表单之前显... 查看详情

如何使用 laravel 通过 jquery ajax 将表单值插入数据库？

】如何使用laravel通过jqueryajax将表单值插入数据库？【英文标题】：Howtoinsertformvaluesintodatabaseviajqueryajaxusinglaravel?【发布时间】：2019-09-2500:08:00【问题描述】：控制器：UserController.php<?phpnamespaceApp\\Http\\Controllers;useIlluminate\\Http\\R... 查看详情

如何在不通过 AJAX 加载数据的情况下使用 javascript 对 HTML 表进行排序？

】如何在不通过AJAX加载数据的情况下使用javascript对HTML表进行排序？【英文标题】：HowcanImakeanHTMLtablesortablewithjavascriptwithoutloadingdataviaAJAX?【发布时间】：2010-10-3105:15:56【问题描述】：如何在不通过AJAX加载数据的情况下使用javascr... 查看详情

如何通过 fullcalendar 使用 AJAX 将引导模式输入插入到 SQL 表中

】如何通过fullcalendar使用AJAX将引导模式输入插入到SQL表中【英文标题】：HowtotakeboostrapmodalinputstoinserttoSQLtableusingAJAXthroughfullcalendar【发布时间】：2020-05-1814:18:36【问题描述】：我已经尝试了一段时间来使其正常工作。我正在努力... 查看详情