window.open居然404？认识Referer

项目中，遇到了一个问题，上游系统内嵌我们的网站。但是，首次打开的时候，会显示404页面。再次打开就正常了。经过一系列排查，发现是referer的问题。本文就来和大家聊下referer的一些事情

什么是Referer

Referer是一个HTTP头部，它通常由Web浏览器发送给Web服务器，表示用户是从哪个页面链接过来的。例如，如果你在A页面点击一个链接到B页面，那么B页面的服务器在接收到请求时，通常会看到一个Referer头部，指向A页面的URL。

举个例子，从百度搜索页面，跳转到掘金。抓取到referer的数据如下:

可以看出referer中，包含了

协议：例如 http: 或 https:。
域名：如 www.baidu.com。
端口：如果使用的是非标准端口，例如 :8080。
路径：资源的路径，例如 /link。
查询参数 ：URL中跟随的任何查询参数，例如 ?url=1cb97FGjEHYtDoRZvmBM8jmu-OTYixTlagDYBGnq0jK&wd=&eqid=b7e1b23800021ecc0000000265096d00。

因此，referer就是表示来源。

referer有什么作用？

统计与分析 ：网站经常需要对其流量来源进行跟踪和分析。通过检查 Referer 头部，网站可以得知用户是从哪个外部链接、搜索引擎或其他来源来到他们的网站的。这有助于网站所有者了解哪些来源为他们带来了最多的流量，以及用户是如何在网站内部导航的。
日志记录 ：除了分析工具外，Referer 也在服务器的访问日志中记录，这可以帮助网站管理员诊断问题、跟踪错误或理解用户行为。
增强功能与用户体验 ：一些网站使用 Referer 头部来调整或增强用户体验。例如，某些服务可能会基于引荐页面为用户提供特定的内容或广告。
安全与反盗链 ：尽管 Referer 头部本身并不是一个安全特性，但有时它被用作一个简单的方法来试图预防所谓的"热链接"或"盗链"。例如，一个图片主机可能只允许某些引荐者的请求访问其图片，从而试图防止其他网站直接链接其资源。
网络策略决策 ：Referer 头部可以用于决策，例如内容适配、缓存决策或其他与网络交付优化相关的策略。

我们后端代码中，就是使用了安全与反盗链，禁止了其他网站跳转。导致我们自己打开时没有问题，别人跳转过来出现了404

referer安全性

由于referer中，可能会存在用户隐私信息，不希望被暴露。所以，在进行跳转时候，需要注意做一些安全措施。

源页面，增加meta,在跳转的时候，不传referer值

ini 复制代码

    <meta name="referrer" content="no-referrer">

源服务端，配置请求头

服务器端设置Referrer-Policy HTTP头部。Referrer-Policy: no-referrer。但是，这样会导致整个站点不发送Referer头部。
js跳转设置

javascript 复制代码

var link = document.createElement('a'); 
link.href = 'https://example.com'; 
link.target = '_blank'; 
link.rel = 'noreferrer'; 
document.body.appendChild(link); 
link.click(); 
document.body.removeChild(link);

也就是,设置标签为noreferrer

bash 复制代码

<a href="https://example.com"rel="noreferrer">https://example.com</a>

说了这么多，就是由于服务端referer的限制，导致了window.open显示404。从安全的角度，也应该对referer进行限制。我们最后使用的方式是js跳转方式，使用了noreferrer。