IE浏览器历史页面数据缓存调试与XSS前置净化技术咨询

以下是几个可落地的技术思路，用于在数据存入IE历史记录前完成净化：

1. 页面卸载前净化并更新DOM状态 #

IE的往返缓存（bfcache）会在页面触发beforeunload时快照当前DOM状态，可在此阶段主动净化表单数据：

• 监听window.beforeunload事件，在用户跳转前取出textarea的内容
• 使用Angular内置的$sanitize服务（或自定义的XSS净化逻辑）过滤恶意代码
• 将净化后的值重新绑定到模型并触发Angular的digest循环，确保DOM已更新后再被浏览器缓存
• 代码示例：

angular.module('yourApp').controller('Page1Ctrl', function($scope, $sanitize) {
  window.addEventListener('beforeunload', function() {
    if ($scope.textareaContent) {
      // 执行数据净化
      const sanitizedValue = $sanitize($scope.textareaContent);
      // 更新模型与DOM
      $scope.textareaContent = sanitizedValue;
      // 触发Angular视图更新
      $scope.$apply();
    }
  });
});

注意：IE对beforeunload内的DOM操作兼容性较好，需确保$apply()触发，避免视图未同步就被缓存。

2. 禁用IE的表单自动缓存行为 #

若业务允许牺牲部分体验，可直接阻止IE缓存表单数据：

• 给textarea添加autocomplete="off"属性：<textarea autocomplete="off" ng-model="textareaContent"></textarea>
• 若要禁用整个页面的往返缓存，可设置空的unload事件：window.onunload = function() {};，但会导致返回时重新加载页面
• 配合ng-model-options="{updateOn: 'blur'}"，确保只有用户输入完成并失去焦点后，净化后的值才会被绑定

3. 自定义历史状态管理 #

完全接管导航状态，用history.pushState/replaceState存储净化后的数据，替代浏览器默认缓存：

• 跳转至Page2前，将净化后的textarea数据存入历史状态对象
• 返回Page1时，监听popstate事件，从历史状态中取出净化后的数据填充表单，而非依赖浏览器自动填充
• 代码示例：

angular.module('yourApp').controller('Page1Ctrl', function($scope, $sanitize) {
  $scope.navigateToPage2 = function() {
    const sanitizedValue = $sanitize($scope.textareaContent);
    // 更新当前历史状态为净化后的数据
    history.replaceState({cachedText: sanitizedValue}, document.title);
    window.location.href = '/page2';
  };

  // 监听返回事件，加载净化后的数据
  window.addEventListener('popstate', function(e) {
    if (e.state?.cachedText) {
      $scope.$apply(() => {
        $scope.textareaContent = e.state.cachedText;
      });
    }
  });
});

此方案完全控制缓存内容，从根源避免恶意数据进入历史记录。

4. 页面加载时二次净化（兜底） #

若上述方案存在覆盖盲区，可在Page1加载（包括从历史返回）时执行兜底净化：

• 监听Angular的$viewContentLoaded事件，或在控制器初始化时检查并净化模型值
• 代码示例：

angular.module('yourApp').controller('Page1Ctrl', function($scope, $sanitize) {
  $scope.$on('$viewContentLoaded', function() {
    if ($scope.textareaContent) {
      $scope.textareaContent = $sanitize($scope.textareaContent);
    }
  });
});

即使浏览器缓存了恶意数据，也会在页面渲染前完成净化，阻止Angular解析执行恶意代码。

内容的提问来源于stack exchange，提问作者Arshad Rehmani