Emerging background

The operation student wanted to copy the content of the article to the management background of the company after editing and publishing the article of wechat public account. However, when I pasted it, I found that the uploaded picture said “this picture is from wechat public platform and can not be quoted without permission”. That’s depressing. They don’t want to re-upload one by one while editing. How to do?

Cause of occurrence

Because the wechat public platform has adopted anti-theft chain Settings for pictures, wechat pictures are not allowed to be called externally by default. Because leachaking means that the resource can be accessed from anywhere, it increases traffic charges for the resource owner’s website.

How to achieve anti-theft chain

Check whether the request header referer is from this site. If not, access to the real image is denied. Therefore, to bypass the anti-theft chain, forge the request header and change the refer.

The specific implementation

Use nodeJS server for anti-theft resource transfer

A flowchart

  1. The own server receives the request for the target image URL parameter
  2. Referer requests target images
  3. Return the requested data as a response

expect

  1. Wechat image domain image URL

    https://mmbiz.qpic.cn/sz_mmbiz_jpg/skIv7LAPeGJrjaOJNmWNB9HNHTIic2UT1WDnUk32R5hlic5lWfnNY1BmEic1uW6vyEPyoqicl4thq1x3iaicluEicni cqA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
Copy the code

  2. Image URL after nodeJS transfer

 https://m.wbiao.cn/mallapi/wechat/picReverseUrl?url=https://mmbiz.qpic.cn/sz_mmbiz_jpg/skIv7LAPeGJrjaOJNmWNB9HNHTIic2UT1WDnUk3 2R5hlic5lWfnNY1BmEic1uW6vyEPyoqicl4thq1x3iaicluEicnicqA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
Copy the code

The main code of the implementation

Server (using KOA as an example) :

const Router = require("koa-router"); // KOA routing middleware
const router = new Router(); // Instantiate the route
const request = require("request");

router.get("/api".async (ctx, next) => {
  var url = ctx.request.query.url;
  var options = {
    method: "GET".url: url,
    headers: {
      Referer: request.host,
    },
  };

  const PassThrough = require("stream").PassThrough;
  ctx.body = request(options)
    .on("response".(response) = > {
      Object.keys(response.headers).forEach((key) = > {
        if ("transfer-encoding" === key) return;
        ctx.set(key, response.headers[key]);
      });
    })
    .on("error", ctx.onerror)
    .pipe(PassThrough());
});

module.exports = router;
Copy the code

Client (combined with wangEditor rich text) :

When you paste the content, To begin with https://mmbiz.qpic.cn/ replace his agent address https://m.wbiao.cn/mallapi/wechat/picReverseUrl?url=https://mmbiz.qpic.cn/

const E = window.wangEditor
    editor = new E('#toolbar-container'.'#text-container')
    editor.config.pasteIgnoreImg = false
    editor.config.pasteTextHandle = pasteStr= > {
      const _result = pasteStr.replace(
        /https:\/\/mmbiz.qpic.cn\//g.`${location.origin}/mallapi/wechat/picReverseUrl? url=https://mmbiz.qpic.cn/`
      )
      return _result
    }
    editor.create()
    ` ``
Copy the code

Attached is github DEMO: github.com/hopkinson/w…