背景介绍

前端小伙伴一定知道CSDN 和稀土掘金两大社区吧,那么你大概率会见过这样的图片

再看看市面上大多有一定规模的网站都有这么一个网站，那么他是来做什么的呢，我们来大胆推测一般

跳转过渡页的优点

防止手误点击跳转，要刚好是一个钓鱼网站就麻烦了
甩锅专用(你懂得)，也可在这做一些数据埋点搜集一下自己的用户流失到哪去了
安全考虑，我么知道如果A页面直接跳转得到B页面的话

此时网站 B 可以通过 window.opener 获取到 A 网站的 window 对象。
然后通过 window.opener.location.href = ‘www.baidu.com’ 这种形式跳转到一个钓鱼网站

实现原理解析

就不分析了，我们直接来说逻辑吧

首先我们打开F12看到跳转都是a标签，那么我们只需要对a标签做一个事件代理是不是问题就能解决呢
a标签事件代理

*
* @param {Array} whiteDomList 白名单
* @param {String} safeLink  跳转过渡页
* @description 劫持所有的a标签事件
* @example SetSafeA([])
*/
function SetSafeA(whiteDomList, safeLink = 'https://link.juejin.cn/?target=') {const aArr = document.getElementsByTagName('a')
Array.from(aArr).forEach(item => {item.onclick = () => {let target = item.getAttribute('href')if (/^\//.test(target)) {// 相对本站链接return true}const isSafe = undefined !== whiteDomList.find(item => {return target.indexOf(item) !== -1})if (!isSafe) {window.open(`${safeLink}${target}`, '_blank')} else {return true}return false}
})
}

上述方案用原生js实现了对页面的所有的a标签进行了一个事件拦截
那我们能不能在框架中实现这个这个功能呢下面以vue作为演示

vue自定义指定拦截

/*** 自定义指令 链接拦截*/
Vue.directive('outlink', {bind: (el, binding) => {el.outlink = () => {const from = +binding.valueconst url = el.getAttribute('href')if (url && url !== '' && url != 'javascript:;') {window.location.href = `${GetSchemeByFrom(from)}://outside_webview?url=${url}`}return false}el.onclick = el.outlink},unbind: (el) => {el.onclick = nulldelete el.outlink}
})

上面的也只是作为一个参考，每个业务都有不同的需求只是提供了一种方案，关于安全的问题就不在这一一赘述了，实在是太多了，有兴趣的可以搜一下

前端跳转第三方网页中间页相关推荐

微信小程序跳转第三方网页、第三方小程序。
微信小程序跳转第三方网页.第三方小程序. 微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序微信小程序跳转第三方网页最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到 ...
前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下步骤2: index ...
微信公众号开发之实现自定义微信公众号菜单和跳转第三方网页
自定义菜单创建接口: http请求方式:POST(请使用https协议) https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCE ...
学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
# HTML5期末大作业：海贼王影视网站设计——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业网页设计实例企业网站制作
HTML5期末大作业:海贼王影视网站设计--仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业网页设计实例企业网站制作常见网页设计作 ...
HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
第三方网页应用对接飞书Java版
具体开发流程在飞书官方文档都有,大家可以参考这个链接:开发文档 - 飞书开放平台飞书开发文档中包含丰富多样的开发指南.教程和示例,让开发者获得愉悦.高效的应用开发体验.https://open.fei ...
支付宝小程序跳转第三方H5页面
支付宝小程序跳转第三方H5页面基础API跳转 web-view my.ap.openURL web-view 和 my.ap.openURL 两者比较 my.ap.navigateToAlipayP ...
iframe嵌入页面白屏_Vue使用iframe嵌入第三方网页并修改标题
之前在工作中遇到的问题,点击链到第三方网页,并要求修改标题. 后面查了下,可以用 iframe 标签的功能大概的逻辑就是,点击A按钮,跳转到嵌入页面,嵌入页面中使iframe显示出来的页面,添加样式 ...

前端跳转第三方网页中间页

前端跳转安全提示掘金跳转中间页

背景介绍

跳转过渡页的优点

实现原理解析

前端跳转第三方网页中间页相关推荐

最新文章

热门文章

前端跳转第三方网页中间页

前端跳转安全提示 掘金跳转中间页

背景介绍

跳转过渡页的优点

实现原理解析

前端跳转第三方网页中间页相关推荐

最新文章

热门文章

前端跳转安全提示掘金跳转中间页