NuxtJS-SSR调用.Net 4.8 Webservice时UrlReferrer来源IP获取异常

问题根因 #

• 首先你的校验逻辑存在设计缺陷：HttpRequest.Request.UrlReferrer 对应的是HTTP请求头的Referer字段，该字段代表的是发起当前请求的上游页面地址，而非请求发起方本身的地址，本身就存在可伪造、跳转场景值不符合预期的问题。
• 结合Nuxt SSR的特性，请求分为两类：
  • 客户端侧发起的请求：和普通SPA应用逻辑一致，请求由用户浏览器直接发起，Referer为前端站点页面地址，因此校验可通过
  • 服务端渲染阶段发起的请求：由Nuxt部署的Node服务端在渲染页面时直接向后端发起，如果你的axios配置透传了用户访问前端站点时携带的Referer头，当用户从搜索引擎/第三方站点跳转访问时，用户访问前端的初始请求Referer为第三方站点地址，透传给后端后自然会解析出第三方站点的IP，导致校验失败。
• 直接输入地址访问/非SSR模式下没有问题，是因为这两种场景下要么初始请求Referer为空，要么所有请求都是浏览器侧发起，Referer固定为前端站点地址。

解决方案 #

方案1：修正后端校验逻辑（最高优先级） #

直接废弃基于UrlReferrer解析IP的校验规则，改用更可靠的校验方式：

• 校验请求发起方IP：通过HttpRequest.UserHostAddress属性获取直接发起请求的IP，如有反向代理层，可配置读取X-Forwarded-For头获取真实IP，将你的Nuxt服务端IP、用户端IP段加入白名单即可
• 补充域名白名单校验：直接比对Origin头或者Referer头的Host是否属于你的前端域名白名单，无需解析IP，避免前端站点IP变更导致校验失效。

方案2：SSR阶段强制覆写请求Referer头 #

如果暂时无法调整后端逻辑，可以在Nuxt的axios拦截器中加判断，服务端发起请求时强制将Referer设置为你的前端站点域名：

// 新增axios拦截器，可放在plugins/axios.js中
export default function ({ $axios, isServer }) {
  $axios.onRequest((config) => {
    if (isServer) {
      // 强制覆盖服务端请求的Referer为前端域名，多环境可替换为环境变量
      config.headers.Referer = 'https://你的前端站点域名'
    }
    return config
  })
}

配置后无论用户从什么来源跳转，服务端发起的请求携带的Referer都是你的前端站点地址，可兼容原有后端校验逻辑。

方案3：接口逻辑迁移到客户端侧执行 #

如果前两个方案都不满足实施条件，可以把所有调用该Webservice的接口逻辑放到客户端生命周期中执行（比如放在onMounted钩子内，或用client-only组件包裹对应逻辑），所有请求都由用户浏览器侧发起，Referer固定为前端站点地址，即可绕过问题。该方案会损失部分SSR首屏加载性能，优先级最低。

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