Question

我已经全神贯注地找到了类似的解决方案，但没有任何东西能与我正在进行的工作完全匹配。

我们有一个带有API控制器的.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插件上传文件的解决方案也是可以接受的。

Answer 1

为什么我能够花两天时间来解决这个问题，但是一旦我发布了一个问题，我就找到答案了？有时候我认为互联网之神只是在搞乱我。

事实证明，本机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)
);

.Net Core：使用Ionic前端验证Anti Forgery Token

1 个答案: