该内容主要整理关于 前端安全模块 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。
前端安全模块精选篇
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
攻击
如何防御
- 最普遍的做法是转义输入输出的内容,对于引号,尖括号,斜杠进行转义
functionescape(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('<script>alert(1)</script>')
- 对于显示富文本来说,不能通过上面的办法来转义所有字符,因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法,当然也可以通过黑名单过滤,但是考虑到需要过滤的标签和标签属性实在太多,更加推荐使用白名单的方式
var xss =require("xss");var html =xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');// -> <h1>XSS Demo</h1><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
提交:👇 例子<formaction="<nowiki>http://bank.com/transfer.do</nowiki>"method="POST"><inputtype="hidden"name="acct"value="MARIA"/><inputtype="hidden"name="amount"value="100000"/><inputtype="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. 密码安全
版权归原作者 八了个戒 所有, 如有侵权,请联系我们删除。