Web Api + HTML5（无 Razor）+ Angularjs + CSRF答案

【问题标题】：Web Api + HTML5 (no Razor) + Angularjs + CSRFWeb Api + HTML5（无 Razor）+ Angularjs + CSRF
【发布时间】：2017-08-23 20:10:24
【问题描述】：

我有一个纯 HTML5（没有剃须刀），其中 angularjs 作为前端，纯 asp.net Web api 作为后端。我在 web-sphere 中看到的几乎所有示例都使用内置 MVC 解决方案的 @Html.AntiForgeryToken() 处理 CRSF。有没有办法在不使用 Razor 的 @Html.AntiForgeryToken() 的情况下实现 CRSF？

谢谢

【问题讨论】：

这不是重复的。我特别提到我不想使用剃须刀。上面的链接没有提到任何关于不使用剃须刀的内容。它只提到它想使用 WebApi 而不是 MVC。
抱歉，我误解了。改为查看：bitwisejourneys.com/…
酷。我去看看。

标签： angularjs html asp.net-web-api

【解决方案1】：

正如 Scott Allen 在推特上指出的那样，您可以在此处获得完整示例：https://github.com/aspnet/Antiforgery/tree/dev/samples/AntiforgerySample

在 Startup.cs 中，他们确保将令牌附加到 cookie 中的响应中，使用 Angular 的默认标头名称发送 XSRF 令牌：

app.Use(next => context =>
{
    if (
        string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase) ||
        string.Equals(context.Request.Path.Value, "/index.html", StringComparison.OrdinalIgnoreCase))
    {
        // We can send the request token as a JavaScript-readable cookie, and Angular will use it by default.
        var tokens = antiforgery.GetAndStoreTokens(context);
        context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
    }

    return next(context);
});

获取项目时，它们只是被序列化：

if (string.Equals("GET", context.Request.Method, StringComparison.OrdinalIgnoreCase))
{
    var items = repository.GetItems();
    await context.Response.WriteAsync(JsonConvert.SerializeObject(items));
}

但在帖子中，他们确保验证随请求传递的令牌：

// This will throw if the token is invalid.
await antiforgery.ValidateRequestAsync(context);

一个非常简约的示例，我可能会写博客/vlog ;-)

【讨论】：

【解决方案2】：

我刚刚实现了这一点，但我也在使用 aurelia。我不必为我选择的实现更改任何客户端，因此这可能对您有用，也可能对您不起作用，但它可能有助于您入门。重要的是我不必使用剃须刀

我正在使用 owin 和 oauth 进行身份验证，因此我将承载令牌发送给客户端。成功登录后，我将 xsrf 令牌设置为 cookie，如下所示：

string cookieToken, formToken;
AntiForgery.GetTokens(null, out cookieToken, out formToken);
context.Response.Headers.Append("Set-Cookie", $".XSRF-TOKEN={cookieToken}:
{formToken}; Secure; HttpOnly;");

其中 context 是 owin 上下文，这也应该与 httpContext 一起使用。我使用 System.Web.Helpers 中的 AntiForgery 来生成令牌。设置 HttpOnly 提供了额外的保护，因为它使 cookie 在 javascript 中不可用（只要浏览器支持它）

然后我在 web api 管道中创建了一个过滤器来验证 xsrf 令牌。因此，在所有未来的请求中，浏览器都会发送 .XSRF-TOKEN。

过滤器有以下功能：

static void ValidateAntiForgeryToken(HttpActionContext actionContext)
{
    var owinContext = actionContext.Request.Properties["MS_OwinContext"] as OwinContext;
    var xsrfTokens = owinContext.Request.Cookies[".XSRF-TOKEN"]?.Split(':');
    if (xsrfTokens == null)
    {
        throw new HttpAntiForgeryException();
    } 

    string cookieToken = xsrfTokens[0], formToken = xsrfTokens[1];
    AntiForgery.Validate(cookieToken, formToken);
}

我得到了 owinContext，但如果你不使用 owin，你应该能够从 httpcontext 读取 cookie。这不是一个完美的解决方案，需要努力才能做到正确，但它让我开始运行，也可能对您有所帮助

【讨论】：