「前端食堂」想进大厂必须要知道的Web安全问题

「观感度：🌟🌟🌟🌟🌟」

「口味：芋泥草莓」

「烹饪时间：15min」

本文已收录在前端食堂Github github.com/Geekhyt，感谢Star。

从胡子的长度和忧郁的眼神我察觉到，面前坐着的这位面试官应该有点东西，浑身上下流露着打过 CTF 的气场。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，面试官面无表情但很有耐心的听着我bilibala。

我按照原定计划顺利地介绍(吹)完自己的项目经验，面试官露出了一丝淡淡的微笑看着我说：

❝

你觉得自己最擅长的是什么？

❞

(我淡淡的回应道：虽然是一名前端工程师，但是我对web安全很感兴趣。)

0.CIA三元组知道吗？

• 机密性（Confidentiality）
• 完整性（Integrity）
• 可用性（Availability）

(这三个东西一定要回答的干净利落，不假思索)

1.XSS攻击是如何产生的？

黑客在你的浏览器中插入一段恶意 JavaScript 脚本，窃取你的隐私信息、冒充你的身份进行操作。这就是 XSS 攻击(Cross-Site Scripting，跨站脚本攻击)

因为浏览器无法区分脚本是被恶意注入的还是正常的内容，它都会执行，况且 HTML 非常灵活，可以在任何时候对它进行修改。

2.知道XSS有哪几种类型吗？

（送分题）

• 反射型 XSS (也叫非持久型)
• 基于 DOM 的 XSS
• 存储型 XSS (也叫持久型 XSS)

3.分别说一下它们的实现原理

反射型：顾名思义，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又将这部分返回给用户，恶意脚本在页面中被执行。一般发生在前后端一体的应用中，服务端逻辑会改变最终的网页代码。

基于DOM型：目前更流行前后端分离的项目，反射型 XSS 无用武之地。 但这种攻击不需要经过服务器，我们知道，网页本身的 JavaScript 也是可以改变 HTML 的，黑客正是利用这一点来实现插入恶意脚本。

存储型：又叫持久型 XSS，顾名思义，黑客将恶意 JavaScript 脚本长期保存在服务端数据库中，用户一旦访问相关页面数据，恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。

4.说一说它们之间的区别

反射型的 XSS 的恶意脚本存在 URL 里，存储型 XSS 的恶意代码存在数据库里。

而基于DOM型的XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，其他两种 XSS 都属于服务端的安全漏洞。

(面试官微微抬起头，递给我一张纸。)

5.再画个图解释一下把

(好的，给你降维解释一波)

反射型

基于DOM型

存储型

（面试官：小伙子图画的不错）

6.黑客可以通过XSS攻击做哪些事儿？

• 盗取用户 Cookie
• 未授权操作
• 修改 DOM
• 刷浮窗广告
• 发动 XSS 蠕虫攻击
• 劫持用户行为，进一步渗透内网

(…太多了)

7.XSS攻击如何进行防护？

• 一切用户输入皆不可信，在输出时进行验证
• 将 HTML 元素内容、属性以及 URL 请求参数、CSS 值进行编码
• 当编码影响业务时，使用白名单规则进行检测和过滤
• 使用 W3C 提出的 CSP (Content Security Policy，内容安全策略)，定义域名白名单
• 设置 Cookie 的 HttpOnly 属性

8.知道哪些XSS攻击案例简单说一下

(没想到你还爱听新闻)

• 2005年，年仅19岁的 Samy Kamkar 发起了对 MySpace.com 的 XSS Worm 攻击。 Samy Kamkar 的蠕虫在短短几小时内就感染了100万用户——它在每个用户的自我简介后边加了一句话：“but most of all, Samy is my hero.”（Samy是我的偶像）。这是 Web 安全史上第一个重量级的 XSS Worm，具有里程碑意义。
• 2007年12月，百度空间收到蠕虫攻击，用户之间开始转发垃圾短消息。
• QQ 邮箱 m.exmail.qq.com 域名被发现反射型 XSS 漏洞
• 2011年新浪微博曾被黑客 XSS 攻击，黑客诱导用户点击一个带有诱惑性的链接，便会自动发送一条带有同样诱惑性链接微博。攻击范围层层扩大，也是一种蠕虫攻击。

9.什么是CSRF攻击？

CSRF 英文全称是 Cross-site request forgery，又称为“跨站请求伪造”。

顾名思义，CSRF 攻击就是黑客引诱用户打开黑客的网站，利用用户的登陆状态发起跨站请求。

降维解释：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。 利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证， 达到冒充用户对被攻击的网站执行某项操作的目的。

10.CSRF攻击一般怎么实现？

• 最容易实现的是 Get 请求，一般进入黑客网站后，可以通过设置 img的 src 属性来自动发起请求
• 在黑客的网站中，构造隐藏表单来自动发起 Post 请求
• 通过引诱链接诱惑用户点击触发请求，利用 a 标签的 href。

点击下载美女视频

11.CSRF攻击和XSS攻击有什么区别？

CSRF 攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。

CSRF 攻击成本也比 XSS 低，用户每天都要访问大量网页，无法确认每一个网页的合法性， 从用户角度来说，无法彻底防止 CSRF 攻击。

12.那应该如何防范CSRF攻击？

• 针对实际情况，设置关键 Cookie 的 SameSite 属性为 Strict 或 Lax
• 服务端验证请求来源站点(Referer、Origin)
• 使用 CSRF Token，服务端随机生成返回给浏览器的 Token，每一次请求都会携带不同的 CSRF Token
• 加入二次验证(独立的支付密码)

13.关于Web密码学你了解哪些呢？

• 对称加密算法
  • 对称加密算法就是加密和解密使用同一个密钥，简单粗暴
  • 常见的经典对称加密算法有 DES、AES(AES-128)、IDEA、国密SM1、国密SM4
• 非对称加密算法
  • 非对称加密就是加密和解密使用不同的密钥。发送方使用公钥对信息进行加密，接收方收到密文后，使用私钥进行解密。
  • 主要解决了密钥分发的难题
  • 我们常说的签名就是私钥加密
  • 常见的经典非对称加密算法有RSA、ECC和国密SM2
• 散列算法
  • 不可逆性、鲁棒性、唯一性
  • MD5、SHA(SHA-256)、国密SM3
  • 使用时记得加盐

AES 是国际上最认可的密码学算法，只要算力没有极大的突破性进展，这种算法在可预期的未来都是安全的。

ECC 是目前国际上加密强度最高的非对称加密算法。

MD5 和 SHA 的唯一性被*解了，但是大部分场景下，不会构成安全问题。一般使用 SHA-256 加盐即可满足大部分使用场景。

14.简单说一下HTTPS的实现原理

1. Client 发送 random1+对称加密套件列表+非对称加密套件列表
2. Server 收到信息， 选择 对称加密套件+非对称加密套件 并和 random2+证书(公钥在证书中) 一起返回
3. Client 验证证书有效性，并用 random1+random2 生成 pre-master 通过服务器公钥加密+浏览器确认 发送给 Server
4. Server 收到 pre-master，根据约定的加密算法对 random1+random2+pre-master（解密）生成 master-secret，然后发送服务器确认
5. Client 收到生成同样的 master-secert，对称加密秘钥传输完毕

(基操，勿6)

HTTPS 在 TCP 和 HTTP 中间加入了 SSL/TLS 安全层。

• 对发起 HTTP 请求的数据进行加密操作
• 对接收到 HTTP 的内容进行解密操作。

采用对称加密的方式加密传输数据和非对称加密的方式来传输密钥，既可以解决传输效率问题也能保证两端数据的安全传输。除此之外，为了能够证明服务器是可靠的，引入了数字证书，让浏览器验证证书的可靠性。

面试官拿起旁边已经凉透的乌龙茶，喝了一口。

(小伙子，有点东西)

「持续更新……」

参考

• 白帽子讲Web安全
• 浏览器工作原理与实践
• 安全攻防技能30讲

❤️爱心三连击

1.看到这里了就点个赞支持下吧，你的「赞」是我创作的动力。

2.关注公众号前端食堂，「你的前端食堂，记得按时吃饭」！

3.本文已收录在前端食堂Github github.com/Geekhyt，求个小星星，感谢Star。