记录–a标签跳转新地址无法访问,但手动输入新地址可以访问

  • 记录–a标签跳转新地址无法访问,但手动输入新地址可以访问已关闭评论
  • 79 次浏览
  • A+
所属分类:Web前端
摘要

大致这样的代码:from推荐下面的解决方案三可以用vscode的插件live serve跑一下两个html文件,效果更佳


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--a标签跳转新地址无法访问,但手动输入新地址可以访问

问题描述

  • 最近遇到一个有意思的问题,项目中有一个地方,点击需要跳转到一个新的域名地址
  • 笔者使用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

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--a标签跳转新地址无法访问,但手动输入新地址可以访问