前端安全笔记总结
XSS
Cross Site Scripting
跨站脚本


Scripting 能干啥?
- 获取页面数据----偷取网站任意数据资料
- 获取 cookies----偷取用户资料
- 劫持前端逻辑----偷取用户密码和登录状态
- 发送请求---欺骗用户
- ....
Xss 攻击分类
- 反射性
- url 参数直接注入
- 存储性
- 存储到 DB 后读取时注入
XSS 攻击注入点
- HTML 节点内容
<div>
#{content}
</div>
<div>
<div>
<script></script>
</div>
</div>
- HTML 属性
<img src="#{image}" /> <img src="1" onerror="alert(1)" />
- JavaScript 代码
<script>
var data = "#{data}";
var data = "hello;alert(1);"";
</script>
- 富文本
- 富文本保留 HTML
- HTML 有 XSS 攻击的风险
防御机制
- 浏览器自带有防御机制,但很弱
ctx.set('X-XSS-Protection',1)//默认开启浏览器防护
- html 节点内容
- 对字符串进行转义处理
- 转义
< <和> >
var escapeHtml = function(str) {
if (!str) return "";
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
return str;
};
- HTML 属性
- 转义
"&quto;
- 转义
var escapeHtmlProerty = function(str) {
if (!str) return "";
str = str.replace(/"/g, "&quto");
str = str.replace(/'/g, "'");
str = str.replace(/ /g, " ");
return str;
};
对&进行转义,要放在前面str = str.replace(/&/g, "&");
- JavaScript 代码
var escapeForJs = function(str) {
if (!str) return "";
str = str.replace(/\\/g, "\\\\");
str = str.replace(/"/g, '\\"');
return str;
};
也可以这也样处理,转为 json 格式:
forForJs: JSON.stringfy(ctx.query.from)
对\进行转义,要放在前面
- 富文本
- 按黑名单过滤标签和属性
var xssFilter = function(html) {
if (!html) return "";
html = html.replace(/<\s*\/?script\s*>/g, "");
html = html.replace(/javascript:[^'"]/g, "");
html = html.replace(/onerror\s*=\s[^'"]?[^'"]*['"]?>/g, "");
return html;
};
- 按白名单保留部分标签和属性(要优于黑名单)
- 可以使用第三方插件
cheerioREADME - 运行
npm install cheerio - 该插件有自己的语法
- 可以使用第三方插件
var xssFilter = function(html) {
if (!html) return "";
var cheerio = require("cheerio");
var $ = cheerio.load(html);
// 白名单
var whiteList = {
img: ["src"]
};
$("*").each(function(index, elem) {
console.log("this is elem", elem); //在终端打印DOM树结构
if (!switchList[elem.name]) {
$(elem).remove();
return;
}
for (var attr in elem.attribs) {
if (whiteList[elem.name].indexOf(attr) === -1) {
$(elem).attr(attr, null);
}
}
});
console.log(html, $.html());
};
还可以使用第三方插件xss,这样就不用了自己配置白名单了,当然这个插件肯定也允许用户自己定义白名单,运行npm install xss,该插件有自己的语法
var xssFilter = function(html) {
if (!html) return "";
var xss = require("xss");
var ret = xss(html, {
whiteList: {
img: ["src"],
a: ["herf"],
font: ["size", "color"]
},
onIgnoreTag: function() {
return "";
}
});
console.log(html, $.html());
return ret;
};
CSP
CSP 指的是内容安全策略,为了缓解很大一部分潜在的跨站脚本问题,浏览器的扩展程序系统引入了内容安全策略(CSP)的一般概念。这将引入一些相当严格的策略,会使扩展程序在默认情况下更加安全,开发者可以创建并强制应用一些规则,管理网站允许加载的内容
- Content Security Policy
- 内容安全策略
- 用于指定哪些内容可执行
- 添加在头部

ctx.set(Content-Security-Policy, default-src 'self')
CSRF
Cross Site Request Forgy
跨站请求伪造

需要条件
- 用户登录 A 网站
- A 网站确认身份
- B 网站页面向 A 网站发起请求(带 A 网站身份)
CRSF 攻击危害
- 利用用户登录态---盗取用户资金(转账,消费)
- 用户不知情---冒充用户发帖背锅
- 完成业务请求---损坏网站名誉
- ...
CSRF 攻击防御
-
过程:
- B 网站向 A 网站请求
- 带 A 网站 Cookies
- 不访问 A 网站的前端
- referer 为 B 网站(这里的 referer 为为数不多的错误单词)
-
禁止第三方网站带 Cookies,为 Cookies 设置 Same-site 属性
koa 设置方式
ctx.cookies.set("userId", user.id, {
httpOnly: false,
sameSite: "strict"
});
这种方法较好但是,有些浏览器不支持,但将来应该会的

- 不访问 A 网站的前端
- 在前端页面加入验证消息
- 验证码
- 安装第三方插件生成验证码
- 运行
npm install ccap --save
captcha.captcha = async function(ctx, next) {
var ccap = require("ccap");
var capt = ccap();
var data = capt.get();
captcha.setCache(ctx.cookies.get("userId"), data[0]);
ctx.body = data[1];
};
// 设置
captcha.setCache = function(uid, data) {
console.log(uid, dtat);
cache[uid] = data;
};
//验证
capthcha.validCache = function(uid, dtat) {
return cache[uid] === data;
};
下面调用上面
console.log(data.captcha);
//没有验证码
if (!data.captch) {
throw new Erroe("验证码错误");
}
//验证码不匹配
var captcha = require("../tools/captcha");
var result = captcha.validCache(ctx.cookies.get("userID"), data.captcha);
console.log("result", result);
if (!result) {
throw new error("验证码错误");
}
- 不访问 A 网站的前端
- 在前端页面加入验证消息
- token
验证码有时是会影响用户体验的,所以就有了 taken,一般为隐藏的文本框
var csrfToken = parseInt(Math.random() * 99999999, 10);
ctx.cookies.set("csrfToken", csrfToken);
//渲染时
ctx.render("post", { post, comments, csrfToken });
验证
if (!data.crsfToken) {
throw new Error("CSRF Token 为空");
}
if (data.csrfToken !== ctx.cookies.get("csrfToken")) {
throw new Erroe("CSRF Token错误");
}
ajax 做法
html 头部
<meta http-equiv="X-UA-Compatible" content="csrfToken" name="csrf_token" />
referer 为 B 网站
- 验证 referer
- 禁止来自第三方网站的请求
var referer = ctx.request.header.referer;
// console.log(ctx.request.header, referer);
if(!^https?:\/\/loaclhost/.test(referer)){
// if(referer.indexOf('localhost')===-1)//验证不全面,所以要采用上面的做法
throw new Error('非法请求')
}
Cookies
cookies 特性
- 前端数据存储
- 后端通过 HTTP 头设置
- 请求时通过 HTTP 头传给后端
- 前端可读可写
- 遵守同源策略
- 域名
- 有效期
- 路径
- http-only
- secure(https)
cookies 作用
- 存储个性化设置
- 存储未登录时用户唯一标识
- 存储已登录用户的凭证
- 存储其他业务数据
Cookies-登录用户凭证
-
前端提交用户名和密码
-
后端验证用户名和密码
-
后端通过 http 头设置用户凭证
-
后续访问时后端先验证用户凭证
-
验证用户 ID
-
ID+签名
生成复杂字符串
var crypt = {}
const KET = '#$%489!#$%&*156sd'
crypt.cryptUserId = function(userId){
var crypto = require('crypto);
var sign = crypto.createHmac('sha256,KEY');
sign.updata(userId + '');
return sign.digest('hex');
}
module.exports = crypt;
进行设置
//登陆成功,设置Cookies
ctx.cookies.set("sign", crypt.cryptUserId(user.id), {
httpOnly: false,
sameSite: "strict"
});
ctx.cookies.set("userId", user.id, {
httpOnly: false,
sameSite: "strict"
});
验证
var userId = ctx.cookies.get("userId");
var sign = ctx.cookies.get("sign");
var correctSign = crypt.cryptUserId(userId);
if (correctSign !== sign) {
throw new Errow("报告,有人入侵");
}
上面代码,可防御,篡改的 UserId 的入侵
- SessionId
sessionId 为随机生成的字符串,第三方拿不到,就无法入侵
生成复杂字符串
var session = {};
session.set = function(userId, obj) {
var sessionId = Math.random();
if (!cache[sessionId]) {
cache[sessionId] = {};
}
cache[sessionId].conntent = obj;
return sessionId;
};
session.get = function(userId) {
return cache[session] && cache[sessionId].content;
};
module.exports = session;
进行设置
var sessionId = session.set(user.id, {
userId: user.id
});
ctx.cookies.set("sessionId", sessionId, {
httpOnly: ture,
sameSite: "strict"
});
验证
var sessionId = ctx.cookies.get("sessionId");
var sessionObj = session.get(sessionId);
if (!sessionObj || !sessionObj) {
throw new Error("session不存在");
}
var userId = sessionObj.userId;
sessionId 需要持久化,存入数据库,因为内存是有限的。都存在内存中,服务器会出问题
Cookies 其他
-
Cookies 与 XSS 的关系
- XSS 可能偷取 Cookies
- http-only 的 Cookies 不会被偷
-
Cookies 与 CSRF 的关系
- CSRF 利用了用户 Cookies
- 攻击站点无法读写 Cookies
- 最好能阻止第三方使用 Cookies
-
Cookies 安全案例
- 某学校教务处
- 某学校教务系统使用了开源的 CMS
- 改 CMS 使用 username 作为唯一用户标识
- 改 CMS 文章作者暴露了 username
- 可使用任意的 username 登录后台
- 某论坛
- 某论坛使用了某开源的 ASP BBS 程序
- 改 ASP 程序使用用户 ID 作为用户标识
- 可伪造任意用户登录
- 某学校教务处
Cookies-安全策略
- 签名防篡改
- 私有变换(加密)
- http-only(防止 XSS)
- secure(仅允许 https 协议下使用 Cookies)
- same-site(很好地策略,但不是所有浏览器都支持)
加密与解密
npm install crypto
var crypto = require("crypto");
var KEY = "#$%^156ssc#$%";
var cipher = crypto.createCipher("des", KEY);
var text = cipher.update("hello word", "utf8", "hex");
text += cipher.final("hex");
console.log(text);//加密后的
var decipher = crypto.createDecipher("des", KEY);
var originalText = decipher.update(text, "hex", "utf8");
console.log(originalText);//原来的
点击劫持
- 用户亲手操作---盗取用户资金(转账,消费)
- 用户不知情---获取用户敏感信息
- ....if
利用 iframe 内嵌页面,并将原页面透明度设置为零,这样实现点击劫持
点击劫持防御
- JavaScript 禁止内嵌
- 在内嵌页面中
top和window不等
- 在内嵌页面中
if (top.loaction != window.location) {
top.location = window.location;
}
但这种方式有时并不完全有效,因为攻击者是可以禁止 JavaScript 脚本的
<iframe
sandbox="allow-forms"
style="opacity:"
src="..."
width="800"
height="600"
></iframe>
H5 的 sandbox 属性就可以让攻击得到想要的结果
- X-FRAME-OPTIONS 禁止内嵌
这种方式可以有效解决上述问题
加入组织内嵌的头部,这样就可以解决上面的问题,这种方式也是防御点击劫持最有效的
ctx.set('X-Frame-Options','DENY')
- 其他辅助手段
- 加验证码
- 影响用体验,但可以有效预防,不能完全预防
- 仅仅是辅助手段,并不能根本解决
传输安全

http 窃听
- 窃听用户密码
- 窃听传输敏感信息
- 非法获取个人资料
Windows 下命令行执行 tracert 命令可查看一个请求响应完整走的路径
还可以可以用 node 全局安装anyproxy工具来进行操作
anyproxy简介
AnyProxy 是阿里巴巴基于 Node.js 开发的一款开源代理服务器。
代理服务器站在客户端和服务端的中间,它可以收集双方通信的每个比特。一个完整的代理请求过程为:客户端首先与代理服务器创建连接,接着根据代理服务所使用的代理协议,请求对目标服务器创建连接或者获取目标服务器的指定资源。一些代理协议允许代理服务器改变客户端的原始请求、目标服务器的原始响应。
AnyProxy 是完全可以灵活配置的代理服务器。它支持 https 明文代理 ,且提供了 Web 界面便于观测请求情况,同时支持二次开发,可以用 JavaScript 来控制代理的全部流程,搭建前端个性化调试环境。
http 篡改
- 插入广告
- 重定向网站
- 无法防御的 XSS 和 CSRF 攻击
传输案例
- 运营商劫持
- 例如:广告,
- 局域网劫持
- 例如:窃取密码
- 公共 WiFi 获取密码
- 例如:获取敏感信息
- 上面这些都会造成信息泄露,造成严重后果
https

现在叫的 TLS 就是以前的 SSL
通过证书机制来保证安全

- 证书无法伪造
- 证书私钥不被泄露
- 域名管理权不泄露
- CA 坚守原则
以上条例保证了可靠的安全性
若要查看本地设备的证书
选择运行从启动菜单中,然后输入certlm.msc。将显示本地设备的证书管理器工具。
若要查看您的证书,在证书-本地计算机在左窗格中,展开你想要查看的证书的类型的目录。
查看当前用户证书
选择运行从启动菜单中,然后输入certmgr.msc。当前用户的证书管理器工具会显示。
若要查看您的证书,在证书-当前用户在左窗格中,展开你想要查看的证书的类型的目录。
添加删除证书(这种事一般不要干)
选择运行从启动菜单中,然后输入mmc。
将显示在 MMC。
从文件菜单中,选择添加/删除管理单元。添加或删除管理单元窗口会显示。
从可用的管理单元列表中,选择证书,然后选择添加。
添加证书管理单元
在中管理单元中的证书窗口中,选择计算机帐户,然后选择下一步。
或者,您可以选择我的用户帐户当前用户或服务帐户针对特定服务。
备注:如果您不管理员为你的设备,你可以仅对你的用户帐户的管理证书。
在中选择计算机窗口中,保留本地计算机选择,并选择完成。
在中管理单元中添加或删除窗口中,选择确定。
添加证书管理单元
可选:从文件菜单中,选择保存或另存为保存 MMC 控制台文件以供将来使用。
若要查看你的证书 MMC 管理单元中,选择控制台根节点在左窗格中,然后展开证书 (本地计算机)将显示每种类型的证书的目录的列表。 从每个证书目录中,可以查看、 导出、 导入,并删除其证书。
http 和 https
http 不安全,会被窃听到,用以传输非敏感信息
https 安全,不会被第三方窃听到,但需要证书,用以传输敏感信息,但没 http 效率高
两者各有优点各有缺点,结合使用最好
证书可在浏览器控制台的Secrity查看详细的证书
http.creatServer(app.callback()).listen(1521,function(){
console.log('app http is listen on port 1521')
})
https.creatServer({
key: fs.readFileSync('./cert/private.key'),//秘钥
cert: fs.readFileSync('./cert/fullchain.crt'),//证书(生成的根证书要和自己的证书要在都在这里,将根证书粘贴到另一个证书中)
},app.callback()).listen(1521,function(){
console.log('app http is listen on port 1521')
})
// https模块还是要导入的
密码安全
密码的作用---证明是你
密码的存储
密码的传输
密码的替代方案
生物特征密码的问题

密码-泄露渠道
- 数据库被偷
- 服务器被入侵
- 通讯被窃听
- 内部人员泄露数据库
- 其它网站(撞库)
密码-存储
- 严禁明文存储(防泄漏)
- 单向变换(防泄漏)
- 变换复杂度要求(防猜解)
- 密码复杂度要求(防猜解)
- 加盐(防猜解)
密码-哈希算法
- 明文-密文---一一对应
- 雪崩效应
- 密文明文 无法反推
- 密文固定长度
- 常见哈希算法:md5,sha1,sha256


加密次数越多,复杂度越大,就越可以对抗彩虹表

密码-变换次数越多越安全
- 加密成本几乎不变(生成密码时速度慢一些,但对破解者是致命的)
- 彩虹表失效(数量太大,无法建立通用性)
- 解密成本增大 N 倍
传说以前出现密码明文存储被泄露的案例(无法确定)
加密
var password = {};
var md5 = function(str) {
var crypto = require('crypto');
var md5Hash = crypto.createHash('md5');
md5Hash.update(str);
return md5Hash.digest('hex');
};
password.getSalt = function() {
return md5(Math.random()*99999+''+new Data().getTime());
}
password.encryptoPassword = function(salt, password) {
return md5(salt + 'af@#$%^asda&' + password);
}
module.exports = password;
密码验证
// 如果用户没有salt,需要升级
if (!user.salt) {
var salt = password.getSalt();
var newPassword = password.encryptPassword(salt, user.password);
await query(
`update user set password = '$(newPassword)', salt = '${salt} where id = ${user.id}'`
);
user.salt = salt;
user.password = newPassword;
}
var encryptPassword = password.encryptPassword(user.salt, data.password);
if (encryptPassword !== user.password) {
throw new Error("密码不正确");
}
密码传输的安全性
- https 传输
- 频率限制
- 前端加密意义有限
在前端加密需要安装js-md5模块,运行jspm install node:js-md5
前端进行加密,这是前后端要有相同的盐 SUGAR
var SUGAR = "!@#¥@#@¥#¥%GDF456¥%";
daat.password = md5(data.username + SUGAR + data.password);
var password = {};
var md5 = function(str) {
var crypto = require('crypto');
var md5Hash = crypto.createHash('md5');
md5Hash.update(str);
return md5Hash.digest('hex');
};
password.getPasswordFromText = function(username, password) {
var SUGAR = '!@#¥@#@¥#¥%GDF456¥%';//与前端一致
return md5(username+ SUGAR + password);
};
password.getSalt = function() {
return md5(Math.random()*99999+''+new Data().getTime());
}
password.encryptoPassword = function(salt, password) {
return md5(salt + 'af@#$%^asda&' + password);
}
module.exports = password;
if (!user.salt) {
var salt = password.getSalt();
var newPassword = password.getPasswordFromText(user.username, user.password);
var encryptedPassword = password.encryptPassword(salt, newPassword);
await query(
`update user set password = '$(newPassword)', salt = '${salt} where id = ${user.id}'`
);
user.salt = salt;
user.password = encryptedPassword;
}
var encryptPassword = password.encryptPassword(user.salt, data.password);
if (encryptPassword !== user.password) {
throw new Error("密码不正确");
}
生物特征密码
- 指纹(唇纹)
- 声纹
- 虹膜
- 人脸
生物特征密码
- 私密性-容易泄露
- 安全性-碰撞
- 唯一性-终身唯一无法修改
接入层注入
关系型数据库
- 存放结构化数据
- 可高效操作大量数据
- 方便处理数据之间的关联关系
- 常见: access/sqlite(db 结尾,一般用于手机)/mysql/mssql server
sql 语言
select * from table where id = 1- 标准化
- 类似于自然语言的描述性语言
- 用于关系型数据库
- 可完成增删改查以及各种复杂数据库操作
sql 注入
`select * from table where id = ${id};`
`1 or 1 = 1`
`select * from table where id =1 or 1 =1;`
select * from user where username = '${data.username}'
and password = '${data.password}'
1 'or '1'='1
select * from user where username = 'username'
and password = '1' or '1'='1'
SQL 的注入本质是将数据变成了具有逻辑的程序
一些神奇的 SQL 语法
select * from table where id="10" and 1=0
select * from table where id="10" and 1=1
select * from table where id="10" and mid(version(),1,1)=5--猜数据库的版本
select 1,2,3 from table
select id,1,2,3 from table
select * from table union select 1,2,3 from table2--猜字段个数
select * from table where min(username,1,1)="t"--猜用户名
SQl 注入的危害
- 猜解密码
- 获取数据
- 删库操作
- 拖库
SQL 注入防御
- 关闭错误输出
- 通过将错误信息模糊化
console.log("[/site/post] error:", e.message, e.stack);
ctx.body = {
status: -1,
body: "出错了"
};
- 检查数据类型
- 对数据类型进行转义
let id = ctx.parmas.id;
id = parseInt(id, 10);
const post = await query{
`select * from post where id =${connecttion.escape(id)}`//escape进行转义
// 有的时候支持下面这种操作
`select * from post where id = ?`, [id]
}
- 使用参数化查询
- 选安装第三方库 运行
npm install mysql2 - mysql2,和 mysql 不一样,不是同一个人写的,但是 mysql2 向下兼容 mysql
- 选安装第三方库 运行
这个时候就要改一下引入的 mysql 库,还有 query
const query = bluebird.promisify(
connection.execte.bind(connectionModel).getConnection()
);
//原来是
const query = bluebird.promisify(
connection.query.bind(connectionModel).getConnection()
);
- 使用 ORM(对象关系映射)
- 需要安装第三方插件
- 运行
npm install sequelize --save
初始化 ORM 实例
var Sequelize = require("sequelize");
var sequelize = new Sequelize({
host: "localhost",
database: "safety",
username: "root",
define: {
freezeTableName: ture
}
});
module.exports = sequelize;
处理数据表
var sequelize = require("./sequelize");
var Sequelize = require("sequelize");
var Post = sequelize.define(
"post",
{
id: {
type: Sequelize.INTERGER,
primaryKey: ture
},
title: Sequelize.STRING(256),
imgUrl: Sequelize.STRING(256),
content: Sequelize.TEXT
},
{
tableName: "post"
}
);
module.export = Post;
查询操作
let post = await Post.findById(id);
let comment = await Comment.findAll({
where: {
postId: post.id
}
});
nosql 注入和防御
看一段 nosql 代码
var mongoose = require('mongoose');
login async function(ctx) {
var username = ctx.request.body.username;
var password = ctx.request.body.password;
mongoose.findOne({
username: username,
password: password
})
}
看似没有什么问题,其实是有问题的,
比如:{"name":"user""password""{"$gt":0}}
这样密码当密码大于 0 时就可以进行登录,也就是任意密码都行,当然用户名也是可以这样操作的
跟关系型一样,从这几方面入手
- 检查数据类型
- 类型转换
- 写完整条件
接入层上传
上传问题
- 上传文件
- 再次访问上传的文件
- 上传的文件被当成程序解析
上传问题防御
- 限制上传后缀
let ext = path.extname(file.name);
if (ext === ".js") {
throw new Error("不要上传坏文件");
}
但是可以通过改后缀名的方式,达到攻击的目的
- 文件类型检查
if (file.type != "image/png") {
throw new Error("只允许PNG");
}
类型是从浏览器读取的,可以不经过浏览器上传文件,依然不安全
- 文件内容检查
var fileBuffer = fs.readerFileSync(file.path);
fileBuffer[0] == 0x5b;
但是可以通过在文件头部写入对应的内容
GIF89a
<?php
所以还是不安全
- 程序输出
- 比较保险,但是对性能可能会有很大的影响
- 权限控制-可写可执行互斥
- 这还少一个原则,是安全的一个最低保障
信息泄露
- 泄露系统敏感信息
- 泄露用户敏感信息
- 泄露用户密码
信息泄露的途径
- 错误信息失控
- SQL注入
- 水平权限控制不当
- XSS/CSRF
- ...
社会工程学

- 你的身份由你掌握的资料确定
- 别人掌握了你的资料
- 别人伪装成了你的身份
- 利用你的身份干坏事
- ...
社会工程学案例
- 电信诈骗
- 伪装公检法
- QQ视频借钱
- 微信伪装成好友
OAuth思想

- 一切行为由用户授权
- 授权行为不泄露敏感信息
- 授权会过期

- 用户授权读取资料
- 无授权的资料不可读取
- 不允许批量获取数据
- 数据接口可风控审计
其他安全问题
- 拒绝DOS
- 重放攻击
拒绝服务供给DOS
- 模拟正常用户
- 大量占用服务武器资源
- 无法服务正常正常用户
- TCP半连接
- HTTP链接
- DNS
大规模分布式拒绝服务供给DDOS
- 流量十到上百G
- 分布式(肉鸡,代理)
- 极难防御
DOS攻击案例
- 游戏私服互相DDOS
- 换目标,攻击Dns服务器
- DNS服务器机器下线
- 数十万网站DNS解析瘫痪
- 暴风影音后台疯狂请求解析
- 各地local DNS瘫痪,无法上网
DOS攻击防御
- 防火墙
- 交换机,路由器
- 流量清洗
- 高防IP(云)
DOS攻击预防
- 避免重录及业务
- 快速失败访问返回
- 防雪崩机制
- 有损服务
- CDN
重放攻击
- 请求被窃听或记录
- 在次发起相同的请求
- 产生意外的结果
- 用户被多次消费
- 用户登录态被盗取
- 多次抽奖
重放攻击防御
- 加密
- 时间戳
- token(session)
- nonce
- 签名

浙公网安备 33010602011771号