x-note
  • Introduction
  • JavaScript
    • JavaScript 作用域链
    • JavaScript 数据结构与类型
    • JavaScript 原型
    • JavaScript this 关键字
    • JavaScript 函数
    • JavaScript delete 运算符
    • JavaScript 内存管理与垃圾回收
    • JavaScript 严格模式与混乱模式
    • JavaScript 数字精度丢失
    • JavaScript 并发模型
    • 利用原型链实现继承
  • ECMAScript
    • ECMAScript 6 变量及常量的声明
    • ECMAScript 6 变量的解构赋值
    • ECMAScript 6 Promise 对象
    • ECMAScript 6 Symbol
    • ECMAScript 6 Proxy
    • ECMAScript 6 Reflect
    • ECMAScript 6 new.target
    • ECMAScript 6 Set 和 WeakSet
    • ECMAScript 6 Map 和 WeakMap
    • ECMAScript 6 Iterator
    • ECMAScript 6 Generator
    • ECMAScript 6 class
    • ECMAScript 7
    • ECMAScript 8 async 函数
    • ECMAScript 8 内存共享与原子性
    • ECMAScript 8 Others
    • ECMAScript 2018
    • ECMAScript 2019
  • CSS
    • CSS 块格式化上下文(BFC)
    • CSS 盒模型
    • CSS 外边距合并
    • CSS Float
    • CSS Position
    • CSS Border-Image
    • CSS BEM
    • CSS 表布局详解
    • 页面布局之单列布局
    • 页面布局之多列布局
  • React
    • React 组件的生命周期
    • React 虚拟 DOM
    • React Reconciliation
    • React Diff 算法核心
    • React Fiber
    • React Scheduling
    • React Context API
    • React Refs
    • React HMR
    • React Hook
  • VUE
    • VUE 响应式系统
    • VUE 渲染机制
    • 关于 Vue 的思考
  • Webpack
    • Webpack 基本概念
    • Webpack HMR
  • Babel
    • @babel/preset-env
  • WEB
    • WEB 基础知识及概念
      • 屏幕测量单位
      • 重绘与重排
      • 前端模块化系统
      • WEB 客户端存储
      • 浏览器的渲染过程
    • WEB 性能优化
      • WEB 性能指标
      • WEB 图片优化
      • 懒加载资源
    • WEB 安全
      • XSS
      • XSRF
      • 点击劫持
      • 同源策略(Same Origin Policy,SOP)
    • WEB 解决方案
      • webp 兼容方案
      • WEB 拖拽实现方案
    • WEB SEO
  • Git
    • Git 工作流
    • Git 内部原理
  • 传输协议
    • UDP
      • UDP 基本概念
    • TCP
      • TCP 基本概念
    • HTTP
      • HTTP 基础
      • HTTP 缓存
      • HTTP-2
      • HTTP-3
      • HTTPS
      • 自定义 HTTPS 证书
  • Protocol Buffers
    • Protocol Buffers 基础
  • gRPC
    • gRPC 简介
    • gRPC 基础概念
    • GRPC with GraphQL and TypeScript
  • 正则表达式
    • 正则表达式基础
    • 正则表达式的悲观回溯
  • 基础算法
    • 冒泡排序
    • 插入排序
    • 选择排序
    • 快速排序
    • 归并排序
    • 希尔排序
    • 堆排序
    • 桶排序
    • 计数排序
    • 基数排序
    • 二叉树的遍历
    • 动态规划
    • 回溯
  • 压缩算法
    • HPACK
    • QPACK
  • 设计模式
    • DDD
      • 模型元素的模式
    • 常见设计模式
      • 工厂方法
      • 抽象工厂
      • 构造器
      • 原型
      • 单例模式
      • 适配器模式
      • 桥接模式
      • 组合模式
      • 外观模式
      • 享元模式
      • 代理模式
      • 责任链模式
      • 命令模式
      • 迭代器模式
      • 中介者模式
      • 备忘录模式
      • 观察者模式
      • 状态模式
      • 策略模式
      • 模版方法模式
      • 访问者模式
      • 依赖注入
    • MVC
    • MVP
    • MVVM
  • 颜色空间
    • LCH
由 GitBook 提供支持
在本页
  • XSS 类型
  • 存储型 XSS
  • 反射型 XSS
  • DOM 型 XSS
  • XSS 防御
  • 输出检查
  • 处理富文本
  • Cookie 设置 HttpOnly
  • Content-Security-Policy
在GitHub上编辑
  1. WEB
  2. WEB 安全

XSS

跨站脚本攻击(Cross-Site Script),为了与层叠样式表 CSS 更好的区分,通常称之为 XSS。 XSS 指的是攻击者恶意向 Web 页面中插入恶意攻击脚本。

XSS 类型

XSS 可以分为三类:

  1. 存储型

  2. 反射型

  3. DOM 型

存储型 XSS

注入的脚本永久存储在目标服务器上。 然后,当浏览器发送数据请求时,受害者从服务器检索该恶意脚本。

现有一论坛网站,攻击者在评论回复 <script>alert('you has ben hack');</script>. 如果没对内容里的 html 进行转义,那么其他用户访问时,该脚本会被执行。

反射型 XSS

当用户被诱骗点击一个恶意链接,或者提交一个表单,或者浏览恶意网站时,注入脚本进入易受攻击的网站。 WEB 服务器会将注入的脚本反映回用户浏览器,例如错误信息,搜索结果或其它响应,其中包括作为请求的一部分发送到服务器的数据。 浏览器执行代码是因为它假定响应来自用户已经与之交互的“受信任”服务器。

攻击 URL 示例: https://baidu.com?q=<script>alert('you has ben hack');</script>

DOM 型 XSS

本质上 DOM 型 XSS 是反射型中的特殊一种。 只不过 DOM 型没有对文档内容进行修改,只对 DOM 环境进行了修改。

<!-- ORIGIN SITE DOCUMENT -->
<html>
  <title>Welcome!</title>
  Hi
  <script>
    var pos = document.URL.indexOf('name=') + 5;
    document.write(document.URL.substring(pos, document.URL.length));
  </script>
  <br />
  Welcome to our system …
</html>

用于攻击的 URL: http://www.vulnerable.site/welcome.html?name=<script>alert(document.cookie)</script>

DOM 型的特点

  1. 恶意程序脚本在任何时候不会嵌入到处于自然状态下的 HTML 页面.

  2. 这个攻击只有在浏览器没有修改 URL 字符时起作用。

XSS 防御

XSS 的本质是 “HTML 注入”,即将用户数据当成代码的一部分,从而混淆语义。

如果网站使用了 MVC 架构,XSS 则发生在 View 层 -- 拼接变量并输出至 HTML

在对用户数据进行输出时,需要使用到 ESAPI 进行处理。

输出检查

当用户数据作为内容展示或者属性时,需要对动态内容进行 HTMLEncode。

主要是对 html 标签及一些特殊字符( ”、<、>、& 等等 )转换成 HTMLEntities。 对应标准 ISO-8859-1

<button>HTMLEncode($var)</button>
<button id="HTMLEncode($var)">show viewer name</button>

当用户数据作为 JavaScript 中的一部分时,对动态内容采用 JavaScriptEncode - escape()

var pos = document.URL.indexOf('name=') + 5;
document.write(document.URL.substring(escape(pos), document.URL.length));
<button onClick="console.log(escape($name))">show viewer name</button>

当用户数据作为 CSS 中当一部分时,需要 ESAPI.encoder().encodeForCSS()

<style>@import "http://xss.css";</style>
<style>body { background: url("xss.htc"); }</style>
<style>li { list-style-image: url("javascript:alert('XSS')");}</style>
<div style="background:javascript:alert('XSS')"></div>
<div style="width:expression(alert('XSS'))"></div>

由于基于 CSS、style、style attribute 形成 XSS 的方式特别多,尽可能避免用户数据作为 CSS 当一部分

当用户数据作为 URL 中当一部分时,需要对其进行 URLEncode

<a href="localhost:8080/a?nickName=$var">view info</a>

处理富文本

处理富文本时应严格禁止“事件”。 过滤掉危险标签,最好采用白名单方式。

Cookie 设置 HttpOnly

Cookie 设置 HttpOnly 后,JS 脚本将无法获取该 Cookie 信息。 能有效避免 XSS 后的 Cookie 挟持攻击

Content-Security-Policy

上一页WEB 安全下一页XSRF

最后更新于3年前

增加 HTTP 响应头 限制 UA 能够为指定的页面加载哪些资源。

node-esapi
Content-Security-Policy