2024 高级前端面试题之前端安全模块「精选篇」

本文链接：https://blog.youkuaiyun.com/xnxqwzy/article/details/137036718

本文详细介绍了前端安全中的关键概念，如代码注入XSS的攻击与防御方法、cookie防范XSS、跨站请求伪造(CSRF)原理、浏览器同源策略和CORS，以及密码安全措施。同时提供学习路径和资源推荐，针对网络安全入门者和面试者提供了实用指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该内容主要整理关于前端安全模块的相关面试题，其他内容面试题请移步至
「最新最全的前端面试题集锦」
查看。

前端安全模块精选篇

1. 代码注入XSS

*       *         * 如何攻击
* 如何防御
* cookie 如何防范 XSS 攻击

2. 跨站请求伪造CSRF
3. 浏览器同源策略 SOP
4. 跨域资源共享 CORS
5. 密码安全

1. 代码注入XSS

跨网站指令码（英语：Cross-site
scripting，通常简称为：XSS）是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了
HTML 以及使用者端脚本语言

XSS 分为三种：反射型，存储型和 DOM-based

如何攻击

XSS 通过修改 HTML 节点或者执行 JS代码来攻击网站。
例如通过 URL 获取某些参数

<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div>
，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击

如何防御

最普遍的做法是 转义输入输出的内容 ，对于引号，尖括号，斜杠进行转义

function escape(str) {
str = str.replace(/&/g, “&”);
str = str.replace(/</g, “<”);
str = str.replace(/>/g, “>”);
str = str.replace(/"/g, “&quto;”);
str = str.replace(/'/g, “&##39;”);
str = str.replace(/`/g, “&##96;”);
str = str.replace(///g, “&##x2F;”);
return str
}
通过转义可以将攻击代码 <script>alert(1)</script> 变成字符串

// -> <script>alert(1)<&##x2F;script>
escape(‘’);
// ->
XSS Demo
<script>alert(“xss”);</script>
console.log(html);

以上示例使用了 js-xss 来实现。可以看到在输出中保留了 h1 标签且过滤了 script 标签

cookie 如何防范 XSS 攻击

XSS (跨站脚本攻击)是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻击，需要在 HTTP
头部配上，set-cookie

httpOnly 这个属性可以防止 XSS，它会禁止 javascript 脚本来访问 cookie
secure- 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie

2. 跨站请求伪造CSRF

CSRF 就是利用用户的登录态发起恶意请求
CSRF（Cross-site request forgery）跨站请求伪造，是一种常见的攻击方式。是指 A 网站正常登陆后，cookie
正常保存登录信息，其他网站 B 通过某种方式调用 A 网站接口进行操作，A 的接口会在请求时会自动带上 cookie。

同源策略可以通过 html 标签加载资源，而且同源策略不阻止接口请求而是拦截请求结果，CSRF 恰恰占了这两个便宜。
对于 GET 请求，直接放到 <img> 就能神不知鬼不觉地请求跨域接口。
对于 POST 请求，很多例子都使用 form 提交：

👇 例子

    <form action="<nowiki>http://bank.com/transfer.do</nowiki>" method="POST">
  <input type="hidden" name="acct" value="MARIA" />
  <input type="hidden" name="amount" value="100000" />
  <input type="submit" value="View my pictures" />
</form>

浏览器同源策略不能作为防范CSRF 的方法
浏览器允许这么做，归根到底就是因为你 无法用 js 直接操作获得的结果 。

CSRF怎么获取用户的登录态
cookie通常是不能跨域访问的，那为什么会有CSRF攻击
总结

3. 浏览器同源策略 SOP

3.1 同源
3.2 限制
3.3 绕过跨域
3.4 浏览器同源策略与ajax

4. 跨域资源共享 CORS

4.1 简单请求
4.2 预检请求
4.3 CORS 与 cookie

5. 密码安全

题外话

初入计算机行业的人或者大学计算机相关专业毕业生，很多因缺少实战经验，就业处处碰壁。下面我们来看两组数据：

2023届全国高校毕业生预计达到1158万人，就业形势严峻；

国家网络安全宣传周公布的数据显示，到2027年我国网络安全人员缺口将达327万。

一方面是每年应届毕业生就业形势严峻，一方面是网络安全人才百万缺口。

6月9日，麦可思研究2023年版就业蓝皮书（包括《2023年中国本科生就业报告》《2023年中国高职生就业报告》）正式发布。

2022届大学毕业生月收入较高的前10个专业

本科计算机类、高职自动化类专业月收入较高。2022届本科计算机类、高职自动化类专业月收入分别为6863元、5339元。其中，本科计算机类专业起薪与2021届基本持平，高职自动化类月收入增长明显，2022届反超铁道运输类专业（5295元）排在第一位。

具体看专业，2022届本科月收入较高的专业是信息安全（7579元）。对比2018届，电子科学与技术、自动化等与人工智能相关的本科专业表现不俗，较五年前起薪涨幅均达到了19%。数据科学与大数据技术虽是近年新增专业但表现亮眼，已跻身2022届本科毕业生毕业半年后月收入较高专业前三。五年前唯一进入本科高薪榜前10的人文社科类专业——法语已退出前10之列。

“没有网络安全就没有国家安全”。当前，网络安全已被提升到国家战略的高度，成为影响国家安全、社会稳定至关重要的因素之一。

网络安全行业特点

1、就业薪资非常高，涨薪快 2022年猎聘网发布网络安全行业就业薪资行业最高人均33.77万！

2、人才缺口大，就业机会多

2019年9月18日《中华人民共和国中央人民政府》官方网站发表：我国网络空间安全人才需求140万人，而全国各大学校每年培养的人员不到1.5W人。猎聘网《2021年上半年网络安全报告》预测2027年网安人才需求300W，现在从事网络安全行业的从业人员只有10W人。

行业发展空间大，岗位非常多

网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…

职业增值潜力大

网络安全专业具有很强的技术特性，尤其是掌握工作中的核心网络架构、安全技术，在职业发展上具有不可替代的竞争优势。

随着个人能力的不断提升，所从事工作的职业价值也会随着自身经验的丰富以及项目运作的成熟，升值空间一路看涨，这也是为什么受大家欢迎的主要原因。

从某种程度来讲，在网络安全领域，跟医生职业一样，越老越吃香，因为技术愈加成熟，自然工作会受到重视，升职加薪则是水到渠成之事。

黑客&网络安全如何学习

今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。