This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Webpage security optimization is a more and more attention by the developers of the problem (such as configuring SSL certificate to achieve HTTPS access to the website, through plug-ins to prevent XSS attacks, etc.), today we will analyze how to realize the website to jump external links “intercept” and notification function.

1. Business scenarios

When opening a link in the gold digging article or boiling point, if it is an external link (not the link of this site), it will jump to a risk prompt page, and inform the user that any problems will be opened on the new page are not responsible for the non-site to provide, pay attention to account property security. It’s basically a disclaimer. (The following will be demonstrated using an external link from an article. Because the loading animation of this site is very good kang)

The main prompt page is as follows:

Second, code analysis

2.1 Link Elements

We need to analyze the code (visible), focusing first on the elements that click to jump to. Open the console check element to see what’s special about this link element.

From the above figure, we can intuitively see that the nuggets internal link https://link.juejin.cn/?target= is joined before the link, and the website after = is the real website.

2.2 Risk Warning

Then let’s look at the risk alert page.

On the risk alert page, simply remove the target parameter from the URL and display it on the page. (URL uploads are common in various search pages.)

2.3 Link Processing

Of course, the crucial part is when the link was processed. Let’s first see if this is done while editing the article.

As you can see from the figure above, links are not processed in real time while editing the article. We know the nuggets’ draft is saved in real time, so let’s see if the data sent in the request is processed.

As you can see from the sent request that the link in the field mark_content was not processed, the link should have been processed behind the scenes.

Three, coding

3.1 Risk Warning page

The technical stack of gold mining is Vue2 2.x, and the version of Vue2. X is written here:

<div class="tip-box"> <img class="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> Ice ice </div> <div class="link">{{target}}</div> <button class=" BTN "@click="navigateToTarget">  </div> </div> </template> <script> export default { name: "RiskTip", data() { return { target: "" }; }, the methods: {/ / access url getTargetURL () {const query = window. The location. The 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(); // get 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>Copy the code

Let’s see how kangkang works:

3.2 Front-end link processing

If we need the front end to do the processing and then back to the background, we need to use regular expressions to replace all the links in the rich text. Here we encapsulate a public method:

// utils/index.js
/** * replace links in rich text * append "https://link.juejin.cn/?target=" * to links in rich text that are not from this site@param    HTML passes in rich text *@returns  HTML processed rich text */
export const replaceHTMLHref = (html) = > {
  const juejinReg = /https:\/\/juejin.cn/g; / / match "https://juejin.cn"
  const juejinSignReg = /JUEJIN_URL/g; / / match JUEJIN_URL ""
  const urlReg =
    /((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*(? ! juejin.cn)[\w\-\@?^=%&/~\+#])?)/g; // Match all urls

  /** * Match three substitutions * the first time replace all "https://juejin.cn" with "JUEJIN_URL" * the second time prefix all urls with "https://link.juejin.cn/?target=" * For the third time replace all "JUEJIN_URL" with "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;
};
Copy the code

Let’s write a code to test whether Kangkangta works:

// Omit other non-critical code
import { replaceHTMLHref } from "@/utils";

const str = 'an external url: \ nhttps://webgradients.com/\n and an external url: \ nhttps://www.baidu.com/\n nuggets: \ NHTTPS: / / juejin. Cn/';
console.log(replaceHTMLHref(str));
Copy the code

At this point, the front end’s ability to handle links in rich text has been implemented.

Golden eggs

While looking at the edit article request, I happened to find that the edit article page console printed the following:

Console eggs are available on many sites, but I have to say, nuggets officials are pretty cute. Ù© (” omega “) organisation

summary

By checking the elements and checking the request, the possible realization method of “jump outside chain risk prompt” for gold digging is deduced. But I believe that what we gain from this case is not only a solution, but also a way to deal with the problem. Only by constantly learning from excellent projects can we better improve our technical level.