问.Net核心:用离子前端验证防伪令牌
EN

Stack Overflow用户

提问于 2018-01-30 14:00:16

回答 1查看 467关注 0票数 1

我找遍了所有的地方，找到了类似的解决方案，但没有任何东西与我所做的完全相符。

我们有一个.net核心MVC网站与一个处理来自离子移动应用程序的请求，我们也正在开发。

在大多数情况下，将[ValidateAntiForgeryToken]添加到API控制器操作中是可行的。我已经完成了生成令牌、将其传递给Ionic并将其存储在请求头中以进行验证的过程。

下面是我用来获取和存储令牌的代码：

static XSRF_TOKEN_KEY: string = "X-XSRF-TOKEN";
static XSRF_TOKEN_NAME_KEY: string = "X-XSRF-TOKEN-NAME";

constructor(){}

static getXsrfToken(http: HTTP) : {tokenName: string, token: string} {
    let tokenName: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);
    let token: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
    if(!tokenName || !token){
        this.fetchXsrfToken(http);
        tokenName= window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);
        token = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
    }
    return {
        tokenName: tokenName,
        token: token
    };
}

private static setXsrfToken({ token, tokenName }: { token: string, tokenName: string }) {
    window.sessionStorage.setItem(ValidationManager.XSRF_TOKEN_KEY, token);
    window.sessionStorage.setItem(ValidationManager.XSRF_TOKEN_NAME_KEY, tokenName);
}

private static fetchXsrfToken(http: HTTP) {
    let token: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_KEY);
    let tokenName: string = window.sessionStorage.getItem(ValidationManager.XSRF_TOKEN_NAME_KEY);

    if (!token || !tokenName) {
        let apiUrl: string = AppConfig.apiUrl + "/GetAntiforgeryToken";
        http.get(apiUrl, {}, {})
            .then(r => this.setXsrfToken(JSON.parse(r.data)))
            .catch(r => console.error("Could not fetch XSRFTOKEN", r));
    } else {
        this.setXsrfToken({ token: token, tokenName: tokenName });
    }
}

下面是我的控制器中为防伪造令牌服务的操作：

[HttpGet]
public override IActionResult GetAntiforgeryToken()
{
    var tokens = _antiforgery.GetAndStoreTokens(HttpContext);
    return new ObjectResult(new
    {
        token = tokens.RequestToken,
        tokenName = tokens.HeaderName
    });
    }

我通过从视图的关联类型记录文件调用此函数来设置http插件的标题：

initializeHttp() {
    let token = ValidationManager.getXsrfToken(this.http);
    this.http.setHeader(token.tokenName, token.token);
    console.log("Http Initialized: ", token);
}

然后，我使用http插件提出的任何请求都会在控制器的操作中得到正确的验证：

this.http.post(apiUrl, {}, {}).then(response => {
   that.navCtrl.setRoot(HomePage);
});

到目前为止，一切都很好。当我尝试使用XmlHttpRequest作为帖子而不是内置的http插件时，问题就出现了：

let file = {
    name: e.srcElement.files[0].name,
    file: e.srcElement.files[0],
  };

  let formData: FormData = new FormData();
  formData.append('file', file.file);

  let xhr: XMLHttpRequest = new XMLHttpRequest();
  xhr.open('POST', apiUrl, true);
  console.log("setting request header: ", tokenVal); //verify that tokenVal is correct
  xhr.setRequestHeader("X-XSRF-TOKEN", tokenVal);
  xhr.send(formData);

如果我从控制器的操作中删除[ValidateAntiForgeryToken]属性，文件就会正确发布。但是，我尝试过的任何东西都无法处理包含的属性。

我相信这个问题与由Ionic自动添加到cookie中的验证令牌有关，cookie与来自http插件的请求一起传递。但是，XMLHttpRequest并没有传递cookie (并且无法传递？)。

在过去的几天里，我读了很多关于这个问题的文章，但我承认，对我来说，这种验证仍然是个黑匣子。是否有一种方法仅使用标头中传递的令牌来验证我的操作中的请求？

我遇到这个问题的原因是我需要上传一个文件，这是我无法使用http插件完成的。有一些使用Ionic的file-transfer插件上传图片的解决方案，但是它已经被废弃了，发布说明建议使用XmlHttpRequest。

其他我尝试过的事情：

我已经找到了.net标准的解决方案，这些解决方案在服务器上使用System.Web.Helpers.AntiForgery进行自定义验证，但是.net核心中没有包含这个名称空间，也找不到相应的名称空间。
我尝试了许多不同的方式来使用http发布文件(因为它没有验证antiForgery令牌的问题)。我所做的每一件事都会导致这个动作被击中，但是被发布的文件总是null。使用http插件上传文件的解决方案也是可以接受的。

ionic-framework

asp.net-core

xmlhttprequest

antiforgerytoken

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-30 14:54:48

为什么我可以花整整两天的时间来解决这个问题，但我一提出问题，就找到了答案。有时候我觉得网络上的神只是在耍我。

事实证明，本地的http插件有一个uploadFile()函数，我在其他地方从未见过这个函数。以下是解决方案的作用：

使用fileChooser插件从手机的存储中选择一个文件
使用filePath插件解析映像的本机文件系统路径。
使用http.uploadFile()而不是http.post()

这是因为如上所述，我能够正确地设置http插件头中的验证令牌以供控制器接受。

这是密码：

let apiUrl: string = AppConfig.apiUrl + "/UploadImage/";
this.fileChooser.open().then(
  uri => {
    this.filePath.resolveNativePath(uri).then(resolvedPath => {
      loader.present();
      this.http.uploadFile(apiUrl,{ },{ },resolvedPath, "image")
      .then(result => {
        loader.dismiss();
        toastOptions.message = "File uploaded successfully!";
        let toast = this.toastCtrl.create(toastOptions);
        toast.present();
        let json = JSON.parse(result.data);
        this.event.imageUrl = json.imgUrl;
      })
      .catch(err => {
        console.log("error: ", err);
        loader.dismiss();
        toastOptions.message = "Error uploading file";
        let toast = this.toastCtrl.create(toastOptions);
        toast.present();
      });
    });
  }
).catch(
  e => console.log(e)
);