熟悉面试中常见的的 web 安全问题

背景

以前出去面试的时候， 常常会被问到一些安全方面的问题。

安全涉及的领域很大， 我也仅仅是了解一些皮毛， 每次面试前都要找资料复习， 很麻烦。

因此我就根据以前搜集的一些资料和面试的经验，系统的梳理了一下， 内容比较粗浅， 点到为止，但愿对你们有所帮助。

#正文

首先简单介绍几种常见的攻击方式：

1. SQL注入
2. XSS
3. CSRF
4. 点击劫持
5. 中间人攻击

1. SQL 注入

这是一种比较简单的攻击方式。

若是后台人员使用用户输入的数据来组装SQL查询语句的时候不作防范， 遇到一些恶意的输入， 最后生成的SQL就会有问题。

好比地址栏输入的是：

articlrs/index.php?id=1

发送一个get请求， 调用的查询语句是：

sql = "SELECT * FROM articles WHERE id =", $id

正常状况下， 返回 id = 1 的文章。

若是攻击者想得到全部的文章，语句就能够改为：

articlrs/index.php?id=-1 OR 1 = 1

这样就能够了， 为何呢？

这是由于，id = -1 永远是 false，1=1 永远是true，全部整个where语句永远是ture.

因此 where 条件至关于没有加where条件，那么查询的结果至关于整张表的内容，攻击者就达到了目的。

如今的系统通常都会加入 过滤 和 验证 机制， 能够有效预防SQL注入问题。

2. XSS

XSS 全称是跨站脚本攻击。

经过代码注入的方式来达到攻击的目的。

咱们有个社交网站，容许你们相互访问空间，网站多是这样作的：

<form action="" method="POST">
     <input type="text" name="text">
     <input type="submit" value="submit">input>
 form>
<h2>你输入的内容: {{{text}}}h2>

复制代码

若是你用的是Chrome浏览器， 会获得来自浏览器的警告：

Chrome 这类浏览器能自动帮助用户防护攻击， 很贴心。

可是也不是说， 只要我用Chrome就万事大吉了，该防护， 还得防护。

如何防护 XSS

对于 XSS 攻击，一般来讲，有两种方式能够防护：

1. 字符转译
2. CSP(Content Security Policy)

1.字符转译

作法就是转义输入输出的内容，对于引号、尖括号、斜杠等字符进行转义。

& 替换为：&
< 替换为：&lt;
> 替换为：&gt;
” 替换为：" ‘ 替换为：&#x27; / 替换为：&#x2f; 复制代码

经过转义能够将攻击代码 :

<script>alert('1')script>
复制代码

转义成:

<script>alert(1)</script>
复制代码

替换了这些字符以后，恶意代码就会失效，XSS 攻击将不会轻易发生。

对于通常的输入， 能够像上面那样粗暴的转译。

有些状况， 光转译也是不够的，好比：

<a href="{{xss}}">点我a>
复制代码

连接中若是存在 javacript: 开头的协议，点击连接时浏览器会执行后面的代码。

这个时候光转义是没有用的，须要对 url 协议进行白名控制，只容许 http, https, http, mailto 等安全协议。

包括图片 src 属性 img src="{{xss}}", iframe iframe src="{{xss}}" 都会存在这样的问题，都须要白名单处理。

可是别的一些状况， 好比，富文本，这时候就不能这么干了。

如此粗暴的转译会破坏掉原有的格式。

这种状况， 比较合适的策略是使用白名单进行过滤标签和属性。

简单总结一下：

说完字符转译， 咱们再看看CSP。

2.CSP

CSP , Content Security Policy 。

本质也是白名单，经过设置白名单， 咱们能够设置容许浏览器加载哪些外部资源。

要开启CSP能够经过两种方式：

1. 设置 HTTP Header 中的 Content-Security-Policy
2. 设置 meta 标签的方式

只要配置了正确的规则，那么即便网站存在漏洞，恶意代码也不会被执行。

CSP的兼容性：

CSP 文档地址：

developer.mozilla.org/en-US/docs/…

3. CSRF

CSRF 全称是跨站请求伪造( Cross Site Request Forgery)

本质上， 说白了就是借用用户的身份或权限偷偷的完成某些操做。

CSRF 的发生实际上是借助了 cookie 的特性。

咱们登陆了某个 tao.com 购物网站以后，cookie 就会有登陆过的标记了。

此时请求http://tao.com/pay?id=123&money=1000， 是会带着 cookie 的，server 端就知道已经登陆了。

若是在http://tao.com去请求其余域名的 API , 例如http://tx.com/api时，是不会带 cookie 的，这是浏览器同源策略的限制。

可是此时在其余域名的页面中，请求http://tao.com/pay?id=123&money=1000，就会带着tao.com的 cookie 。

这是发生 CSRF 攻击的理论基础。

如何防护 CSRF

防护CSRF 有效的手段就是加入各个层级的权限验证.

例如如今的购物网站，只要涉及现金交易，确定要输入密码或者扫码验证才行。

除此以外，敏感的接口要使用POST请求而不是GET.

4.点击劫持

click-jacking，也被称为UI-覆盖攻击。

这也是比较常问到的一个问题，也是咱们最多见的一种状况。

攻击方式就是在某些操做的按钮上加一层透明的iframe。

点击一下， 就入坑了。

如何防护点击劫持

经常使用的两种方式：

1. 使用 HTTP 头防护

经过配置 nginx 发送 X-Frame-Options 响应头.

这个 HTTP 响应头 就是为了防护用 iframe 嵌套的点击劫持攻击。

这样浏览器就会阻止嵌入网页的渲染。

该响应头有三个值可选，分别是：

1. DENY，表示页面不容许经过 iframe 的方式展现。
2. SAMEORIGIN，表示页面能够在相同域名下经过 iframe 的方式展现。
3. ALLOW-FROM，表示页面能够在指定来源的 iframe 中展现。

更详细的能够查阅 MDN 上关于 X-Frame-Options 响应头的内容。

2. 使用 Javascript 防护

判断顶层视口的域名是否是和本页面的域名一致，若是不一致就让恶意网页自动跳转到我方的网页。

if (top.location.hostname !== self.location.hostname) {    
    alert("您正在访问不安全的页面，即将跳转到安全页面！")   
    top.location.href = self.location.href;
 }

复制代码

5. 中间人攻击

中间人攻击（Man-in-the-Middle Attack, MITM）是一种由来已久的网络入侵手段.

如 SMB 会话劫持、DNS 欺骗等攻击都是典型的MITM攻击。

简而言之，所谓的MITM攻击就是经过拦截正常的网络通讯数据，并进行数据篡改和嗅探来达到攻击的目的，而通讯的双方却绝不知情。

如何防护中间人攻击

如下是针对防止中间人攻击的一些建议：

1. 确保当前你所访问的网站使用了HTTPS
2. 若是你是一个网站管理员，你应当执行HSTS协议
3. 不要在公共Wi-Fi上发送敏感数据
4. 若是你的网站使用了SSL，确保你禁用了不安全的SSL/TLS协议。
5. 不要点击恶意连接或电子邮件。

还有一个容易被忽略的漏洞

window.opener

带有 target="_blank" 跳转的网页拥有了浏览器 window.opener 对象赋予的对原网页的跳转权限，这可能会被恶意网站利用.

例如一个恶意网站在某 UGC 网站 Po 了其恶意网址，该 UGC 网站用户在新窗口打开页面时，恶意网站利用该漏洞将原 UGC 网站跳转到伪造的钓鱼页面，用户返回到原窗口时可能会忽视浏览器 URL 已发生了变化，伪造页面便可进一步进行钓鱼或其余恶意行为:

代码以下:

<script language="javascript">
  window.opener.location = 'https://example.com'
script> 
复制代码

想象一下，你在浏览淘宝的时候，点击了网页聊天窗口的一条外链，出去看了一眼，回来以后淘宝网已经变成了另外一个域名的高仿网站，而你却不曾发觉，继续买东西把本身的钱直接打到骗子手里。

如何修复

为 target="_blank" 加上 rel="noopener noreferrer" 属性。

<a href="外跳的地址" rel="noopener noreferrer">外跳的地址a>
复制代码

缺点: 为禁止了跳转带上 referrer，目标网址没办法检测来源地址。

还有一种方法是，全部的外部连接都替换为内部的跳转链接服务，点击链接时，先跳到内部地址，再由服务器 redirect 到外部网址。

如今不少站点都是这么作的, 不只能够规避风险，还能够控制非法站点的打开：

"/redirect?target=http%3A%2F%2Fxxx.yyy.com"> http://xxx.yyy.com

大概就是这么多。

总结

上文介绍了了一些常见的前端安全方面的知识及如何防护这些攻击，应对面试的话，基本上也算够用了。

安全的领域很大，上面我只是粗浅的介绍了几个方面。

若是你们对于安全这一块有兴趣的话，能够找一些相关资料继续研究。

文中如有谬误， 还请各位大佬指正, 谢谢。

最后

若是以为内容有帮助能够关注下个人公众号「前端e进阶」，及时了解最新动态，一块儿学习！