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

问题描述

  • 最近遇到一个有意思的问题,项目中有一个地方,点击需要跳转到一个新的域名地址
  • 笔者使用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标签跳转新地址无法访问,但手动输入新地址可以访问的更多相关文章

  1. django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能

    1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...

  2. 套接字编程简介: IPV4套接字地址结构/ 通用套接字地址结构/ IPV6套接字地址结构/新通用套接字地址结构

    IPv4套接字地址结构通常也称为“网际套接字地址结构”,它以sockaddr_in命名,定义在<netinet/in.h>头文件中. struct in_addr { in_addr_t ...

  3. 其他信息: 未找到源,不过,未能搜索部分或所有事件日志。 若要创建源,您需要用于读取所有事件日志的权限以确保新的源名称是唯一的。 不可访问的日志: Security。

    其他信息: 未找到源,不过,未能搜索部分或所有事件日志.  若要创建源,您需要用于读取所有事件日志的权限以确保新的源名称是唯一的.  不可访问的日志: Security. System.Diagnos ...

  4. Spring mvc创建的web项目,如何获知其web的项目名称,访问具体的链接地址?

    Spring mvc创建的web项目,如何获知其web的项目名称,访问具体的链接地址? 访问URL:  http://localhost:8090/firstapp/login 在eclipse集成的 ...

  5. 博客搬家啦。请访问我的新底盘www.boyipark.com

    博客搬家啦.请访问我的新底盘 www.boyipark.com

  6. 新的博客已经启用,欢迎大家访问(402v.com)

    非常抱歉这个博客已经暂停更新,新的博客已经启用,欢迎大家访问(402v.com)!谢谢支持!

  7. 《UNIX环境高级编程》笔记--文件访问权限和新文件、目录所有权

    1.与进程关联的用户ID和组ID 与一个进程关联的ID有一下几个: 实际用户ID和实际组ID标识我们究竟是谁.通常在一个会话间值是不会改变的,但是超级用户进程有方法改变 他们,在以后的进程控制中会进行 ...

  8. 只要访问url地址 那么容器就会根据地址进行对象的创建

    只要访问url地址 那么容器就会根据地址进行对象的创建

  9. 【spring boot】spring boot中使用@RestController不起作用,不返回json,依旧去找访问接口的请求地址对应的页面

    问题描述: spring boot中使用@RestController不起作用,不返回json,依旧去找访问接口的请求地址对应的页面 表现结果: 1>使用postman测试接口,表现为返回是40 ...

  10. 使用新浪IP库获取IP详细地址

    使用新浪IP库获取IP详细地址 <?php class Tool{ /** * 获取IP的归属地( 新浪IP库 ) * * @param $ip String IP地址:112.65.102.1 ...

随机推荐

  1. [Ngbatis源码学习][SpringBoot] ApplicationContextInitializer接口类的使用和原理解读

    ApplicationContextInitializer接口类的使用和原理解读 在看Ngbatis源码的过程中,看到了自定义的ApplicationContextInitializer实现类,对Ap ...

  2. Laravel入坑指南(5)——请求与响应

    作为互联网典型的Web应用,接收用户请求的数据,并将处理的结果向用户进行响应,是最基础也是最必备的功能.在原生的PHP中,我们常用$_POST.$_GET.$_REQUEST和$_FILES对不同的请 ...

  3. Laravel入坑指南(2)——路由、控制器

    接上一节,我们已经把Laravel有Hello World项目跑起来了. 现在各位小友最着急的,应该是想了解,我们怎么在"页面"echo一个自己的Hello World字符串. & ...

  4. Java Base64编码使用介绍

    Base64编码介绍     BASE64 编码是一种常用的字符编码,Base64编码本质上是一种将二进制数据转成文本数据的方案. 但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差 ...

  5. CentOS 8安装RabbitMQ

    第一步:安装yum仓库 导入签名KEY: ## primary RabbitMQ signing key ## 这一步如果因为网络问题下载不成功,可以先将签名文件下载下来,本地导入 rpm --imp ...

  6. 程序员应具备的PS基本技能(二):程序员切图最常使用的工具组-选择工具组

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  7. webpack图片压缩

    减少代码体积 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io) npm install image-mininizer webpack plugin image ...

  8. Git 如何删除本地分支和远程分支

    查看已有的本地及远程分支:git branch -a   删除远程分支(当前删除的是origin/dev分支):git push origin --delete dev   删除后,再次查看分支情况: ...

  9. Android Studio 有关 setOnClickListener() 方法的总结

    •前言 在 Android Studio 开发中,你会经常和这种代码打交道: 1 package com.example.activitytest; 2 public class FirstActiv ...

  10. 图片动态操作,利用SeekBar控制属性示例,适配屏幕解决方案

    需求为,让图片适配屏幕大小,并且可以用一个滑块来控制图片的旋转,用一个滑块来控制图片大小,核心语法思路,控制图片的大小, 核心语法为:mImageView.setLayoutParams(new Li ...