前言

网页的安全性优化是一个越来越被开发者重视的问题（例如配置 SSL 证书实现网站的 https 访问，通过插件对 XSS 攻击进行预防等），今天我们就来分析 掘金 是如何实现网站跳转外部链接时“拦截”并通知的功能。

一、业务场景

在 掘金 的文章或者沸点中打开一个链接时，如果为 外部链接 （非本站的链接）时，则会先跳转至一个风险提示的页面，告知用户即将打开的新页面 _{出现任何问题概不负责} 非本站提供，注意账号财产安全。其实就是一个免责的声明。（以下将用一篇文章中的某个外部链接做演示。_{因为这个网站的加载动画非常好康}）

其中最主要的提示页面如下图：

二、代码分析

1. 链接元素

我们需要对其代码（可见的）进行分析，首先关注点击跳转的元素。打开控制台 检查元素 查看此链接元素有什么特殊的地方。

通过上图我们可以直观看出链接前被拼接了掘金内部链接 https://link.juejin.cn/?target= ，而 = 后的网址才是真实网址。

2. 风险提示

然后我们再来看下风险提示页。

在 风险提示 页，只需将 URL 上的 target 参数取出并显示在页面中即可。（URL传参常见于各类搜索页面）

3. 链接处理

当然还有关键的一环是，这个链接是何时被处理成这样的。先来看看是不是在编辑文章时处理的。

从上图可知，编辑文章时链接并未实时做处理。我们知道掘金的文章草稿是实时保存的，那么我们来看下请求中发送的数据是否做了处理。

从发送的请求中可以看出字段 mark_content 中的链接并未作处理，则链接应该是在后台被处理的。

三、进行编码

1. 风险提示页面

掘金的技术栈是 Vue2.x ，此处给出 Vue2.x 版本的写法：

// 风险提示页
<template><div class="box"><div class="tip-box"><imgclass="logo"src="https://lf-cdn-tos.bytescm.com/obj/static/link_juejin_cn/assets/logo_new.0ec938fb.svg"/><div class="content"><div class="title"><del>冰冰你个小可爱</del> 即将离开稀土掘金，请注意账号财产安全</div><div class="link">{{ target }}</div><button class="btn" @click="navigateToTarget">继续访问</button></div></div></div>
</template><script>
export default {name: "RiskTip",data() {return { target: "" };},methods: {// 获取 urlgetTargetURL() {const query = window.location.href.split("?")[1] || "";const target = query.split("target=")[1] || "";this.target = window.decodeURIComponent(target);},// 跳转页面navigateToTarget() {if (!this.target) {return;}window.location.href = this.target;},},mounted() {this.getTargetURL(); // 获取 url},
};
</script><style scoped>
.box {height: 100vh;background-color: #f4f5f5;
}.box .tip-box {position: absolute;left: 50%;top: 30%;max-width: 624px;width: 86%;background-color: #fff;transform: translateX(-50%);padding: 30px 40px 0;box-sizing: border-box;border: 1px solid #e5e6eb;border-radius: 2px;
}.box .tip-box .logo {display: block;width: 116px;height: 24px;position: absolute;top: -40px;left: 0;
}.box .tip-box .content .title {font-size: 18px;line-height: 24px;
}.box .tip-box .content .link {padding: 16px 0 24px;border-bottom: 1px solid #e5e6eb;position: relative;color: gray;font-size: 14px;
}.box .tip-box .content .btn {display: block;margin: 20px 0 24px auto;color: #fff;border-radius: 3px;border: none;background: #007fff;height: 32px;font-size: 14px;padding: 0 14px;cursor: pointer;outline: 0;
}
</style>

让我们来康康效果如何：

2. 前端链接处理

由请求传参可知，富文本中的链接并未作处理，那如果我们需要前端做处理然后再返回给后台的话，就需要借助正则表达式，替换所有富文本中的链接。这里我们封装一个公共方法：

// utils/index.js
/*** 替换富文本中的链接* 将富文本中的不是本站的链接前追加 "https://link.juejin.cn/?target="* @param    html  传入富文本* @returns  html  处理后的富文本*/
export const replaceHTMLHref = (html) => {const juejinReg = /https:\/\/juejin.cn/g; // 匹配"https://juejin.cn"const juejinSignReg = /JUEJIN_URL/g; // 匹配"JUEJIN_URL"const urlReg =/((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*(?!juejin.cn)[\w\-\@?^=%&/~\+#])?)/g; // 匹配所有网址/*** 匹配替换三次* 第一次将所有"https://juejin.cn"替换为"JUEJIN_URL"* 第二次将所有网址增加前缀"https://link.juejin.cn/?target="* 第三次将所有"JUEJIN_URL"替换为"https://juejin.cn"*/const result = html.replace(juejinReg, "JUEJIN_URL").replace(urlReg, "https://link.juejin.cn/?target=$1").replace(juejinSignReg, "https://juejin.cn");return result;
};

我们写一段代码测试一下，康康他是否生效：

// 省略其他非关键代码
import { replaceHTMLHref } from "@/utils";const str = '一个外部网址：\nhttps://webgradients.com/\n又一个外部网址：\nhttps://www.baidu.com/\n掘金：\nhttps://juejin.cn/';
console.log(replaceHTMLHref(str));

至此，前端处理富文本中的链接的功能已实现。

四、掘金彩蛋

在查看编辑文章请求的时候偶然发现，编辑文章页面的控制台会打印如下内容：

控制台彩蛋很多网站都有，但不得不说，掘金官方还真是蛮可爱的。٩(‘ω’)و

小结

通过检查元素、查看请求等方式，推导了掘金「跳转外链风险提示」的可能实现方式。但相信我们从此案例中收获到的不仅仅是一种解决方案，更是一种处理问题的思路。我们只有不断向优秀的项目学习，才能更好的提升自己的技术水平。

掘金「跳转外链风险提示」实现思考相关推荐

react跳转url，跳转外链，新页面打开页面
react中实现在js中内部跳转路由,有两种方法. 方法一: import PropTypes from 'prop-types'; export default class Header exten ...
php跳转外链,分享两种外链跳转方法，可避免权重流失。
前2天,在修改互推联盟自适应页面时,考虑到原先的跳转机制可能会对博友造成困扰,所以想修改成直接跳转模式,彻底抛弃之前强行重写 title 即 iframe 框架的不友好机制. 下面的内容是在研究外链跳 ...
vue跳转外链页面以及跳转html页面超简单方法
文章目录实现思路跳转到外链页面(实际案例) 跳转成功跳转到其他HTML页面(实际案例) 跳转成功超级技巧实现思路直接使用js代码window.open方法实现,非常简单再吐槽一句,那么简 ...
ShowMeBug 荣获稀土掘金「2021年度人气技术团队」
2021 年,ShowMeBug 技术团队将产研工作中涉及的一些黑科技比如实时协同的架构绘图.代码自动补全等技术背后的细节与深入思考,开放分享给广大技术爱好者朋友们,一方面让大家更真实的了解ShowM ...
vue ios微信小程序跳转外链地址，返回页面执行自动后退或关闭页面
需求是页面外跳后,返回到项目首页,判断上一页有没有,有则后退一页,没有则关闭微信浏览器处理方案: 创建refresh.js 文件在index.html 文件中引入 home.vue // 在首页先 ...
微信小程序跳转外链，打开视频号及小程序内跳转方法
现有一轮播图,要求按照配置进行跳转 1,跳转至外部链接 void wx.navigateTo({url: `/pages/webview/index?webview=${encodeURICompon ...
nginx做小程序外链跳转_小程序跳转外部链接怎么设置，实现小程序跳转外链的两种方法...
小程序跳转到外部链接有很多种类型,包括小程序跳转到APP,小程序跳转到小程序,小程序跳转到公众号,小程序跳转到网页等.由于小程序跳转的对象比较多,各自的规则又不一样,因此小程序跳转外部链接是用户咨询较 ...
微信卡券会员卡跳转外链php,微信卡券，在卡包中跳转到小程序的字段怎么填写...
期望实现的功能微信卡券领取到卡包之后,点立即兑换按钮跳转到小程序这是官方文档的说明: 卡券内跳转小程序场景介绍商户创建卡券时可以将卡.券内的服务入口设置进入小程序服务. 步骤 1.开发者须将小程 ...
cordova-plugin-themeablebrowser 0.2.17 ThemeableBrowserionic跳转外链插件在ios中heardBar会遮住内容的bug...
ionic+angular的app项目中需要在App打开一个外部的url链接,用了这个插件发现在iPhone手机中会出现toolbar挡住url页面内容解决方法: 在原有基础上加上statusBar ...
微信小程序页面自动跳转外链
链接需要认证! <web-view src='https://www.163.com/'></web-view>

掘金「跳转外链风险提示」实现思考

前言