Question

我正在尝试创建一个简单的chrome扩展，使用快速服务器在mongoDB数据库中创建用户。我正在向服务器发出ajax请求，但我无法设置CSRF值！我一直收到403禁止错误。

这是我的manifest.json文件：

{
    "manifest_version": 2,
    "name": "Budget Manager",
    "version": "1.0",
    "description": "Tracking your spending",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "browser_action": {
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    },
    "options_page": "options.html",

    "background": {
        "scripts": ["popup.js"],
        "persistent": false
    },

    "permissions": [
        "storage",
        "notifications",
        "contextMenus",
        "http://*/*",
        "https://*/*"
    ]
}

这是我的popup.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>Budget Manager</title>
    <!-- I added these later on -->
    <!-- <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/> --> 
</head>
<body>
    <input type="text" id="create">
    <input type="submit" id="createUser" name="createMe">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
</body>
</html>

这是我的popup.js文件：

$(function() {
    // var token = $("meta[name='_csrf_header']").attr("content");
    // $.ajaxSetup({
 //     beforeSend: function() {
 //         'X-CSRF-Token': token
 //     }
    // });

    $("#createUser").click(function(e) {
        console.log(e);
        e.preventDefault();
        var id = $(this).find("#createUser").val();
        var csrf = $("meta[name='_csrf']").attr("content");
        $.ajax({
            method: "POST",
            url: "http://localhost:8080/createUser",
            data: {id:id, _csrf:csrf },
            dataType: 'json',
            contentType: 'application/json'
        }).done(function(err,json) {
            if (err) {console.log(err);}
            console.log("success");
            console.log(json);
        });
    });
});

以下是定义了路线的app.js文件：

.
.
.
const express = require('express');
const app = express();
.
.
.
const extensionController = require('./controllers/extension');
app.post('/createUser', extensionController.createExtensionUser);

这是控制器文件中的express方法：

exports.createExtensionUser = (req, res) => {

  const user = new Extension({
    name: req.body.name
  });

  Extension.findOne({ name: req.body.name }, (err) => {
    if (err) { req.flash('errors', { msg: 'Couldnt find that user :(!'}); }
    user.save((err,user) => {
      if (err) {
          console.log(err);
      }
      res.json(user);
    });
  });
};

我看到了一堆堆栈溢出链接，告诉我设置http：// / 的权限，然后就可以了！然而，这对我没有用！然后我又看到了一些他们试图预先设置CSRF标题的帖子，并在下面尝试了这一点（它被注释掉了）。我还试图给popup.html（另一个StackOverflow帖子）提供一个元标记，并从中获取CSRF值。

所以我想知道这是否是通过chrome扩展程序提交帖子请求的方法，还是我完全错了？

尝试使用ajax POST请求为chrome扩展实现CSRF

0 个答案: