javascript - 使用 JavaScript 确保多个页面中的一部分用户详细信息安全

Question

我不确定这是否可能，但有没有一种方法可以在仅使用 JavaScript 的情况下在多个页面上保证用户信息的安全？

我从三个单独的 API 请求中恢复了一组预定义的详细信息，初始调用通过 POST 将用户凭据发送到 login_api 并返回一小组数据(OAuth2 token 、用户出生姓名等)，随后的调用如果成功，通过 GET 调用获取 2 个 channel 的产品，这些请求将返回每个 channel 的产品列表，该列表被视为该用户有权查看的内容。

我在设置安全用户身份验证和跨多页面网站记住数据方面没有丰富的经验，因此我想确保我采用正确的方法。

通过下面的函数，我可以在利用该数据的函数内部创建 _private 变量。

所有记住的数据都被应用到cookie存储区域的XHR响应中，它永远不会离开请求函数的范围。

从那时起，所有数据都通过 cookie 检索，在单个函数范围内使用，永远不会离开所使用的函数范围。每次需要数据时，都会从 cookie 中重新获取数据。我不确定 cookie 有多安全，我曾讨论过每次恢复数据时清除 cookie 并在函数完成后重新应用更新的值，但认为这太过分了。

如果页面加载时不存在任何相关 Cookie 数据，它们将被重定向到登录页面，并且所有相关 Cookie 数据(如果存在)将被删除。

是否有任何方法可以改进在多个页面上保留 OAuth2 token 和少量用户详细信息，而无需仅使用 JavaScript 泄露用户信息？

注意这是一个相当旧的内部网站，为了让我们使用 ES5 及以下版本的团队熟悉一些内容，它不再仅限内部使用。

var config = Object.create(null);
config.expire_item = 30; // minutes

function dataref() {

  // setup objects to store details in
  var output;
  output = Object.create(null);
  output.access = Object.create(null);
  output.licensed = Object.create(null);
  output.token = "_token"; 

  // apply predefined names as object values
  // cookies in this namespace holds user name
  output.fname = "_fname"; 
  // cookies in this namespace store true/false flags
  output.has_access.ces = "ces_license";
  output.has_access.ezg = "ezg_license";
  // cookies in this namespace hold pipe & comma delimited product lists
  output.licensed_for.ces = 'ces_products'; 
  output.licensed_for.ezg = 'ezg_products';
  // ...etc.

  return function () {
    // return object with predefined names for cookies
    return output;
  }();

}

function apply_userdata(fn) {
  // get predefined cookie names
  var _data = dataref();
  return function () {
    // apply function to all namespaces
    fn(_data.token);
    fn(_data.fname);
    fn(_data.access.ces);
    fn(_data.access.ezg);
    fn(_data.licensed.ces);
    fn(_data.licensed.ezg);
  }();
}

function resetCookieExpire(name) {
  // updates cookie expiration period.
  return setCookie(name, getCookie(name), option.expire_item);
}

function getUserSensativeData(name) {
  // retrieve cookie value
  return getCookie(name)
}

function deleteUserSensativeData(name) {
  // remove cookie name/value
  return deleteCookie(name);
}

Answer 1

我应该用“我也不是身份验证专家”作为序言，但是我过去在多个项目中使用过几种不同类型的用户身份验证。您所说的内容似乎暗示了一些缺失的信息，但您似乎正在使用 oauth2 隐式流程或 oauth2 授权代码流程。在任何一种情况下，为了在单独的页面加载中保持不变，您必须像当前一样使用 cookie 或本地存储，除非它是单页面应用程序，在这种情况下听起来好像不是。根据您对这个项目的描述，听起来您正在尝试取消它，也就是说，如果您真的对存储这些客户端凭据感到难过，您可以切换到使用 secure=true;httpOnly 的 OIDC 样式流程=true cookie 会自动随每个请求发送。听起来这不是你的选择。Oauth2 被认为是安全的，存储客户端凭证以供重复使用并不会“违反”任何规则。存储客户端凭据可能被视为易受攻击的原因是 XSS或CSRF攻击

制定内容安全策略也大有帮助。

您可以采取其他预防措施，例如设置较短的过期时间(1 小时很常见)，甚至能够在紧急情况下手动使 access_tokens 过期。希望这会有所帮助。