角度中的 CSRF 令牌与 Laravel 5 不同

Posted 2023-03-15

【中文标题】角度中的 CSRF 令牌与 Laravel 5 不同

【英文标题】：CSRF token in angular is different of Laravel 5

【发布时间】：2015-07-07 11:57:45

【问题描述】：

我有一个项目分为后端和前端，后端（API rest）是在 Laravel 5 中构建的，前端是在 AngularJS 中构建的。这两个项目都是独立的，它们应该托管在不同的服务器上。

在第一个请求中，我使用以下代码从 Laravel 获取 CSRF 令牌：

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "http://laravel.local/api/token", false);
xhReq.send(null);
angular.module('mytodoApp').constant('CSRF_TOKEN',xhReq.responseText);

所以每次我向 API 发出请求时都会发送 CSRF_TOKEN，如下所示：

    $scope.deleteTodo = function(index) 
    $scope.loading = true;
    var todo = $scope.tours[index];
    $http.defaults.headers.common['XSRF-TOKEN'] = CSRF_TOKEN;
    console.log($http.defaults.headers.common['XSRF-TOKEN']);
    $http.delete('http://laravel.local/api/deleteTodo/' + todo.id, headers : 'XSRF-TOKEN': CSRF_TOKEN)
        .success(function() 
            $scope.todos.splice(index, 1);
            $scope.loading = false;

        );

API 总是返回：

TokenMismatchException in compiled.php line 2440:

Laravel 是否会根据 Angular 的每个请求更改 CSRF 令牌？对于每个请求，Laravel 都会在 storage/framework/sessions 上创建一个新文件。您是否推荐任何其他解决方案来验证对 API 的请求是否来自安全来源？

【问题讨论】：

angular 内置了$http..的令牌处理。阅读文档

【参考方案1】：

在基于令牌的身份验证中，不会使用 cookie 和会话。令牌将用于对服务器的每个请求验证用户。 它将使用以下控制流程：

用户在登录表单中提供用户名和密码，然后单击登录。 发出请求后，通过在数据库中查询来验证后端的用户。如果请求有效，则使用从数据库中获取的用户信息创建一个令牌，然后在响应头中返回该信息，以便我们可以将令牌浏览器存储在本地存储中。 在每个请求标头中提供令牌信息，以访问应用程序中的受限端点。

4.请求头信息有效，让用户访问指定的端点，响应JSON或XML。

这可以通过 Jwt (Json web Token) 实现。从This 链接获取此信息。

那么，这个 JWT 是什么？

智威汤逊

JWT 代表 JSON Web Token，是一种用于授权标头的令牌格式。此令牌可帮助您以安全的方式设计两个系统之间的通信。出于本教程的目的，让我们将 JWT 改写为“不记名令牌”。不记名令牌由三部分组成：标头、有效负载和签名。

header是token中保存token类型和加密方式的部分，也是用base-64加密的 有效负载包括信息。您可以放置​​任何类型的数据，例如用户信息、产品信息等，所有这些数据都使用 base-64 加密存储。 签名由标头、有效负载和密钥的组合组成。密钥必须安全地保存在服务器端。

示例教程可以在这里找到Token-Based Authentication With AngularJS & NodeJS。

希望这能解决您的问题，一切顺利！