- A+
所属分类：Web前端
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
问题描述
- 最近遇到一个有意思的问题，项目中有一个地方，点击需要跳转到一个新的域名地址
- 笔者使用a标签做跳转，跳是跳过去了，可是跳过去以后，反而打不开了，显示403佛伯乐
- 蛤？
大致这样的代码：
<a href="http://abcdefg.com" target="_blank">点击跳转</a>
原因分析
- 既然跳过去出问题，那么猜测是另外一个项目做了拦截
- 于是就去问问之前负责过
http://abcdefg.com这个项目的同事 - 被告知：
- 为了安全考虑，对
document.referrer进行了拦截判断（前后端均可拦截操作） - developer.mozilla.org/zh-CN/docs/…
- 了解，既然直接跳过去，会把referrer带着，那么就想办法，不带着就行了
4种解决方案
from
推荐下面的解决方案三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>from</title> <!-- 解决方案一 禁内容referrer --> <!-- <meta name="referrer" content="never"> --> <!-- 解决方案二 不带着referrer --> <!-- <meta name="referrer" content="no-referrer"> --> </head> <body> <!-- 解决方案三 a标签加rel属性控制 --> <a href="http://127.0.0.1:5502/referrer.html" target="_blank" rel="noopener noreferrer">点击跳转</a> <!-- 解决方案四 换成window.open并注入js执行代码 --> <!-- <button>点击跳转</button> <script> let btn = document.querySelector('button') btn.onclick = () => { window.open('javascript:window.name;', ` <script>location.replace("http://127.0.0.1:5502/referrer.html")</script> `) } </script> --> </body> </html>
referrer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>referrer</title> </head> <body> <h2></h2> <script> let referrer = document.referrer let h2 = document.querySelector('h2') if (referrer) { h2.innerHTML = '不允许从别的地方跳转过来访问' } else { h2.innerHTML = '欢迎直接访问' } </script> </body> </html>
可以用vscode的插件live serve跑一下两个html文件，效果更佳
referrer的用处
- document.referrer这个字段记录了，项目是怎么被打开的（是直接浏览器地址栏打开，还是从某个地方跳转过来打开的）
- 可以统计访问源，或做一些控制，或者可以返回到访问源
A bad pen is better than a good memory...
本文转载于:
https://juejin.cn/post/7277026974005379107
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
