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

前言

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

一、业务场景

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

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

二、代码分析

1. 链接元素

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

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

2. 风险提示

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

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

3. 链接处理

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

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