使用 .Net（后端）+ Angular 应用程序在 URL 中隐藏带有敏感数据的参数的正确和更简洁的方法是啥？

Posted 2023-02-19

【中文标题】使用 .Net（后端）+ Angular 应用程序在 URL 中隐藏带有敏感数据的参数的正确和更简洁的方法是啥？

【英文标题】：What is the proper and cleaner way to hide parameters with sensitive data in URL with .Net (backend) + Angular app?使用 .Net（后端）+ Angular 应用程序在 URL 中隐藏带有敏感数据的参数的正确和更简洁的方法是什么？

【发布时间】：2021-12-08 20:41:05

【问题描述】：

例如，我有一个端点，它向我显示了某个用户的详细信息，其中 2 是用户 ID。

http://localhost:4200/user/2

我的问题是如何以正确的方式从 URL 地址中隐藏最后一个参数。

我的目标是只拥有类似的东西

http://localhost:4200/user

我将 .Net 用于后端，将 Angular 用于客户端应用程序。

Controller.cs

[HttpGet("userId")]
public async Task<ActionResult<AppUserDTO>> GetUserById(int userId)

    var user = await _context.Users.SingleOrDefaultAsync(x => x.Id == userId);
    var mappedUser = _mapper.Map<AppUserDTO>(user);
    return Ok(mappedUser);

我解决了我的问题，但从编程的角度不确定这是否正确。我觉得可能有更好、更清洁的解决方案。代码如下。

users.service.ts

  private userId;

  set userToSet(userId) 
    this.userId = userId;
  

  get userToGet() 
    return this.userId;
  

  getUserById(userId) 
    return this.http.get<any>(this.baseUrl + 'api/users/' + userId);
  

app-routing.module.ts

 path: 'user', component: UserDetailComponent ,

user-list.component.ts（我是用这个功能点击表格上选中的记录，然后进入用户详情页面，这里设置的是userID）

  loadUserDetails(userId) 
    this.usersService.userToSet = userId;
    this.router.navigate(['/user']);
  

user-detail.component.ts（这是获取userID并显示正确数据的详细页面组件）

  user: AppUser;
  userId: number;

  constructor(private usersService: UsersService)  

  ngOnInit(): void 
    this.loadUserById();
  

  loadUserById() 
    this.userId = this.usersService.userToGet;
    this.usersService.getUserById(this.userId).subscribe(user => 
      this.user = user;
    )
  

【参考方案1】：

您的示例中敏感数据的最大安全问题是使用 http。 http 数据通过网络传输未加密，任何人都可以读取它们。在这种情况下，将敏感数据放在请求正文而不是 url 中并没有真正的区别。

无论如何，您当然不希望传递有关路由数据或查询字符串参数的敏感数据，因为 url 未加密。检查model binding in ASP.NET Core，我想你可能想使用FromBody 或FromForm。

【讨论】：

我正在使用 http，因为这仅用于开发/教学目的。通常我想通过编辑 URL 地址中的用户 ID 来防止其他用户移动到另一个用户详细信息页面。谢谢你的想法。