前端安全实用防御方案

XSS防御

1. 转义字符（正则替换）

   function escape(str) {
     str = str.replace(/&/g, '&')
     str = str.replace(//g, '>')
     str = str.replace(/"/g, '&quto;')
     str = str.replace(/'/g, ''')
     str = str.replace(/`/g, '`')
     str = str.replace(/\//g, '/')
     return str
   }

2. 转义字符（js-xss插件）

   const xss = require('xss')
   let html = xss('
   XSS Demo
   ')

3. CSP

   1. 设置 HTTP Header 中的 Content-Security-Policy

      1. 只允许加载本站资源

         Content-Security-Policy: default-src ‘self’

      2. 只允许加载 HTTPS 协议图片

         Content-Security-Policy: img-src https://*

      3. 允许加载任何来源框架

         Content-Security-Policy: child-src 'none'

   2. 设置 meta 标签的方式

CSRF防御

1. SameSite：可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

2. 验证Referer：对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

3. Token：服务器下发一个随机 Token，每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

点击劫持防御

1. X-FRAME-OPTIONS：X-FRAME-OPTIONS 是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头 就是为了防御用 iframe 嵌套的点击劫持攻击（该响应头有三个值可选，分别是：DENY，表示页面不允许通过 iframe 的方式展示；SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示；ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示）。

2. JS 防御

运营商劫持防御

1. 思路：在运营商插入非法代码之前监听dom变动

2. step1：挂载dom监听器

3. step2：处理dom变动，进行白名单筛选

4. step3：处理运营商非法注入

5. 代码实现：

   class HijackPreventor {
       constructor(watchNode = Array.from(document.getElementsByTagName('body'))[0],report=()=>{}) {
           this.whiteList = []
           this.whiteRegList = []
           this.filterTagList = ['script']
           this.report = report
           this.setObserver(watchNode)
       }
   ​
       /**
        * 设置域名白名单
        * @param {Array|String} list 
        */
       setWhilteList(item) {
           if (item instanceof Array) {
               this.whiteList = item
           } else if (typeof item === 'string') {
               this.whiteList.push(item)
           } else {
               console.error('[HijackPreventor]: Please set an Array or String type parameter to "setWhilteList" ')
               return;
           }
           this.whiteRegList = this.whiteList.map(wl =>
               new RegExp('/.+?\/\/' + wl + '|\/\/' + wl + '|.+?\.' + wl + '|^' + wl)
           )
       }
   ​
       /**
        * 挂载dom监听器
        * @param {Node} node 
        */
       setObserver(watchNode) {
           const observer = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
           const isSupportObserver = !!observer
           if (isSupportObserver) {
               console.info('[HijackPreventor]: The preventor is running...')
               new observer((records) => {
                   this.filterSafeScript(records)
               }).observe(watchNode, { childList: true, attributes: true })
           } else {
               console.error('[HijackPreventor]: Your platform is not supported with "window.MutationObserver",please update.')
           }
       }
   ​
       /**
        * 获取非法注入
        * @param {Node} records 
        */
       filterSafeScript(records) {
           const { filterTagList, whiteRegList } = this
           let badInjections = []
           records.forEach(record => {
               const addedNodes = Array.from(record.addedNodes)
               addedNodes.forEach((node) => {
                   if (node.tagName && ~filterTagList.indexOf(node.tagName.toLowerCase())) {
                       const isInWhiteList = whiteRegList.some((reg) => reg.test(node.src))
                       if (!isInWhiteList) {
                           badInjections.push({ badNode: node, badSource: node.src })
                       }
                   }
               })
           })
           this.handleBadInjections(badInjections)
       }
   ​
       /**
        * 处理非法注入
        * @param {Array} badInjections 
        */
       handleBadInjections(badInjections) {
           badInjections.forEach(({ badNode, badSource }) => {
               badNode.remove(); // 移除非法注入节点
               console.warn(`[HijackPreventor]: The source "${badSource}" is invalid,removed it already.`)
           })
           this.report(badInjections)
       }
   ​
       /**
        * 模拟插入script，用来测试
        * @param {Node} appendNode 
        */
       mockHijack(appendNode = document.getElementsByTagName('body')[0]) {
           const node = document.createElement("script");
           node.src = 'https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js'
           appendNode.appendChild(node)
       }
   }

 

 

参考资料

1. https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc721851882516c33430a2

2. https://www.jianshu.com/p/f7e19bab20e4

 

微信公众号“前端那些事儿”