使用 javascript 在多个页面上保护用户详细信息的子集

Question

我不确定这是否可行，但是有没有一种方法可以在仅使用 javascript 的同时确保跨多个页面的用户信息安全？

我从三个单独的 API 请求中恢复了一组预定义的详细信息，初始调用通过 POST 将用户凭据发送到 login_api 并返回一小组数据（OAuth2 令牌、用户出生姓名等），随后的调用触发成功，对于通过 GET 调用的 2 个产品通道，这些请求返回每个通道的产品列表，该列表被认为是该用户有权查看的内容。

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

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

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

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

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

有什么方法可以改进在多个页面中保留 OAuth2 令牌和少量用户详细信息，而不会仅使用 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)

}

Answer 1

我应该以“我也不是身份验证专家”开头，但是我过去曾在多个项目中使用过几种不同类型的用户身份验证。您所说的内容似乎暗示了一些缺失的信息，但您似乎正在使用 oauth2 隐式流程或 oauth2 授权代码流程。在任何一种情况下，为了在单独的页面加载中持续存在，您必须像当前一样使用 cookie 或本地存储，除非它是单页面应用程序，在这种情况下听起来不是。根据您对这个项目的描述，听起来您似乎正在尝试取消它，也就是说，如果您真的对存储这些客户端凭据感到不满意，您可以切换到使用 secure=true 的 OIDC 样式流；httpOnly=true cookie 自动随每个请求发送。听起来这不是您的选择。Oauth2 被认为是安全的，并且存储客户端凭据以供重复使用不会“破坏”任何规则。存储客户端凭据可被视为易受攻击的原因是XSS或CSRF攻击拥有内容安全策略也有很长的路要走。您还可以采取其他预防措施，例如过期时间较短（1 小时很常见），甚至可以在紧急情况下手动使 access_token 过期。希望这可以帮助。