前端安全系列之XSS攻击防范

• 把JS中的标签转成字符

• Cross-Site Scripting(跨站脚本攻击) 为和CSS区分所以叫XSS攻击

• 而已代码未经过滤，混入正常代码中，浏览器无法分辨，导致恶意代码被执行;

• 来自用户的 UGC 信息

• 来自第三方的链接

• URL 参数

• POST 参数

• Referer （可能来自不可信的来源）

• Cookie （可能来自其他子域注入）

• 根据攻击来源可分为三种: 存储型、反射型、DOM型;

  • 存储型:

    • 攻击者将恶意代码提交到目标网站的数据库中, 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器;
    • 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行, 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
    • 常见操作带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等

  • 反射型:

    • 攻击者构造出特殊的 URL，其中包含恶意代码,用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
    • 反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里
    • 反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。

  • DOM 型:

    • 攻击者构造出特殊的 URL，其中包含恶意代码,

      用户打开带有恶意代码的 URL,用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。

    • DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

• 包含两大要素

  • 攻击者提交恶意代码。
  • 浏览器执行恶意代码。

• 两种方式

  • 纯前端渲染(当前主流形式)

    • 浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据,然后浏览器执行 HTML 中的 JavaScript, JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。
    • 但纯前端渲染还需注意避免 DOM 型 XSS 漏洞;
    • 使用.innerHTML、.outerHTML、document.write()要小心;应尽量使用textContent;如果用 Vue/React 技术栈，并且不使用 v-html、dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

  • 转义 HTML

    • Java 工程里，常用的转义库为 org.owasp.encoder;

• DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。