问题描述
最近写一个网址集合页面遇到一个问题，大部分网站都可以通过<a>标签直接跳转过去，但是有一个网站跳转就是会直接跳转到网站的错误提示
大致这样的代码：
<a href="http://abcdefg.com" target="_blank">点击跳转</a>原因分析
最后查询得知为了安全考虑，对
document.referrer'行了拦截判断（前后端均可拦截操作）
5种解决方案
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>
<!-- 解决方案四 使用referrerpolicy属性控制 -->
<!-- <a href="http://127.0.0.1:5500/referrer.html" target="_blank" referrerpolicy="no-referrer">点击跳转</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>referrer的用处
document.referrer这个字段记录了，项目是怎么被打开的（是直接浏览器地址栏打开，还是从某个地方跳转过来打开的）可以统计访问源，或做一些控制，或者可以返回到访问源