QQ邮箱、新浪微博 和 百度 等知名网站都曾遭遇攻击。

唱吧同样也遭遇过攻击。

so，如果从未有过安全方面的问题，可能不是因为你所开发的网站很安全，更大的可能是你的网站的流量非常低或者没有攻击的价值。

常见的

攻击方式

01

XSS攻击

02

CSRF 攻击

03

点击劫持

非前端的攻击暂不讨论(如SQL注入，DDOS攻击等)

XSS按攻击方式分有三类

反射型

存储型

Dom型

反射型

攻击者诱导用户访问一个带有恶意代码的 URL 后，服务器端接收数据后处理，然后把带有恶意代码的数据发送到浏览器端，浏览器端解析这段带有 XSS 代码的数据后当做脚本执行，最终完成 XSS 攻击。

因为这个过程就像一次反射，故称为反射型 XSS。

1. 攻击构造出特殊的 URL ，其中包含恶意代码。

2. 用户被诱导打开带有恶意代码的 URL，服务器端将恶意代码从 URL 中取出当做参数处理，然后返回给用户带有恶意代码的数据。

3. 用户浏览器接收到响应解析执行，混在其中的恶意代码也被执行。

4. 恶意代码窃取用户敏感数据发送给攻击者，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

攻击步骤？ 

攻击Demo(输入框、诱导) 

&

防御Demo

存储型

存储型 XSS 跟 反射型 XSS 的区别是：存储型 XSS 的恶意代码存在服务器上，反射型 XSS 的恶意代码不存在服务器。

存储型 XSS 攻击时恶意脚本会存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行。它是最危险的一种跨站脚本，比反射性 XSS 和 DOM 型 XSS 都更有隐蔽性，因为它不需要用户手动触发。任何允许用户存储数据的 Web 程序都可能存在存储型 XSS 漏洞。若某个页面遭受存储型 XSS 攻击，所有访问该页面的用户都会被 XSS 攻击。

1、攻击者把恶意代码提交到目标网站的服务器中。（区别于反射型不需要诱导用户）

2、用户打开目标网站，网站服务器端把带有恶意代码的数据取出，当做正常数据返回给用户。

3、用户浏览器接收到响应解析执行，混在其中的恶意代码也被执行。

4、恶意代码窃取用户敏感数据发送给攻击者，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

攻击步骤？ 

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

攻击Demo(评论区) 

&

防御Demo

DOM型

DOM 型 XSS 攻击，实际上就是前端 JavaScript 代码不够严谨，把不可信的内容插入到了页面。在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心，不要把不可信的数据作为 HTML 插到页面上，尽量使用 .innerText、.textContent、.setAttribute() 等。

1. 攻击构造出特殊的 URL ，其中包含恶意代码。

2. 用户浏览器执行了恶意代码。

3. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

攻击步骤？ 

攻击Demo(分享页) 

&

防御Demo

1. 攻击特定用户，许多网站具有“告诉朋友”或者“向管理员反馈”功能，会发送email，email中包含指向漏洞的链接，诱使管理员点这个链接，这个时候管理员的cookie就被盗取了。

2. 即时消息、评论区、留言板等可以用户输入的地方，允许用户提交html标签没有进行过滤编码，提交恶意代码到服务器，所有访问者都会被攻击。

3. 在含有漏洞的网站，黑客购买广告，而广告指向本网站的漏洞，当受害者点广告的时候，session信息基本上能够成功盗取。

4. 有些前端页面通过url传参，没有经过处理直接用，攻击者可以构造一个恶意的url，诱导用户点击。

5.登录页面。一般访问一个网站如果登录过期，会跳向登录页面url会更一个redirect参数，再次登录成功后会根据redirect参数跳向刚才那个页面。 如果没有对redirect进行过滤就会被攻击。

常见的xss攻击场景有哪些？

xss防御

1. 内容安全策略（Content Security Policy，CSP），实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，大大增强了网页的安全性。

Content-Security-Policy: 

script-src 'self';  //只信任当前域名

object-src 'none'; // <object>标签： 不信任任何 URL，即不加载任何资源

style-src cdn.example.org third-party.org; // 样式表： 只信任 cdn.example.org 和 third-party.org

child-src https:  // 页面子内容，如 <frame>、<iframe>： 必须使用HTTPS协议加载

通过 HTTP 头信息的 Content-Security-Policy 的字段设置如下：

Text

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

2.转义/编码

function encodeHtml(str) {

    return str.replace(/"/g, '&quot;')

                  .replace(/'/g, '&apos;')

                  .replace(/</g, '&lt;')

                  .replace(/>/g, '&gt;');

}

在 XSS 攻击中，攻击者主要是通过构造特殊字符来注入脚本，所以对用户的输入进行检测就很有必要，并且需要在客户端与服务端都进行输入检测，然后对用户输入的数据进行转义。

主要就是对输入所包含的特殊字符进行转义，如 <，>，&，"，'，来防止 XSS 攻击。

3.过滤

在富文本中因为需要保留 HTML ，所以我们不能使用转义的方法防御 XSS 攻击，这里使用过滤的方式防御 XSS 攻击，也就是通过只使用白名单允许的 HTML 标记及其属性，来防御攻击。

这里推荐一个名为 XSS 的组件 ，这就是一个根据白名单过滤 HTML，防止 XSS 攻击的组件。

https://github.com/leizongmin/js-xss/blob/master/README.zh.md

CSRF攻击

CSRF，是跨站请求伪造（Cross Site Request Forgery）的缩写，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。

攻击Demo(转账) 

&

防御Demo

CSRF防御方法

1.SameSite 属性

Cookie 的 SameSite 属性用来限制第三方 Cookie，从而减少安全风险，可以用来防止 CSRF 攻击和用户追踪。它有三个值：

SameSite=Strict

Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。

SameSite=Lax(Chrome 计划将 Lax 变为默认设置。)

Lax 规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。（form表单get提交、a链接）

SameSite=None

将其设为None。前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

2.同源检测

在 HTTP 协议中，每一个异步请求都会携带两个 Header ，Origin和Referer

Origin，指示了请求来自于哪个站点。(只有跨域请求才有)

Referer，包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。

因此，可以在接口中利用这两个，来判断接口是否可信，

再来决定是否返回数据

3.验证码

接口可通过验证短信验证码、图形验证码等方式。

4.token验证

服务器将 Token 返回到前端

前端发请求时携带这个 Token

服务器验证 Token 是否正确是否过期

点击劫持

点击劫持是指在一个Web页面中隐藏了一个透明的iframe，用外层假页面诱导用户点击，实际上是在隐藏的frame上触发了点击事件进行一些用户不知情的操作。​​​​​​​

1. 攻击者构建了一个非常有吸引力的网页

2. 将被攻击的页面放置在当前页面的 iframe 中

3. 使用样式将 iframe 叠加到非常有吸引力内容的上方

4. 将iframe设置为100%透明

5. 你被诱导点击了网页内容，你以为你点击的是***，而实际上，你成功被攻击了。

攻击步骤？ 

攻击Demo & 防御Demo

防御方法

1. X-Frame-Options HTTP

这个请求头用来给浏览器指示允许一个页面可否在 <frame>, <iframe> 或者 <object> 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去。有三个值：

DENY
表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。
SAMEORIGIN
表示该页面可以在相同域名页面的 frame 中展示。
ALLOW-FROM uri
表示该页面可以在指定来源的 frame 中展示。

 2. HTML5中iframe的 sandbox 属性

<iframe sandbox src="..."> ... </iframe>

• allow-forms：允许iframe中提交form表单
• allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等）
• allow-scripts：允许iframe中执行JavaScript
• allow-same-origin：允许iframe中的网页开启同源策略

if (top != window) { top.location = window.location; }

3.

不可取，可以被绕过

window.onbeforeunload = function() { return false; };