前端存在哪些安全性

本文不是一个大而全的课程，只是我们日常中常见的问题，因为网络安全是一个很大的话题，我们这里只介绍前端工程师应知应会的东西。大概包括 XSS, CSRF, 点击劫持，SQL注入，OS注入，请求劫持，DDOS，以及简单的防范策略。

1.XSS

XSS的英文是Cross Site Scripting也就是常说的跨站脚本攻击，因为缩写和CSS重叠，所以只能叫XSS，跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。

那么XSS一般是如何进行攻击的呢？假设我们页面中存在一个input或者textarea用来收集用户输入的数据，正常情况下不会有什么问题，假设用户输入的内容为 <script>alert(1)</script>。当我们将用户输入的这段内容通过innnerHTML添加到页面中时，就会运行该段代码，弹出alert。

document.body.innerHTML = inputValue;

可以发现，用户输入的js脚本是可以被执行的，这样的话就形成了一个安全漏洞，很多黑客都是先通过alert的方式先去试验网站是否可以被XSS，这也就意味着可以运行js里面的任何脚本。用户在不知情的情况下输入的账号密码会被黑客记录发送给自己，也可以通过js改写页面显示非法图片，将用户的登录状态复制到黑客的电脑上黑客可以使用用户的身份进行操作等等。

一般XSS的攻击方式有两种，一种是上面介绍的通过input输入的方式进行攻击叫做存储型，就是用户输入的内容会存储到数据库，每次打开页面都会执行，另一种是通过url参数攻击叫做反射型，假设我们网站url中携带的内容会渲染到页面。

http://localhost:8080/index.html?name=yd

黑客可以发送如下的链接给用户，用户一旦打开就会执行脚本。

http://localhost:8080/index.html?name=<script>alert(123)</script>

XSS的危害有哪些，简单来说javascript能做什么，他就可以做什么。

1.获取页面数据

2.获取Cookies

3.修改前端逻辑

4.发送请求

5.获取用户的信息和登录态

6.欺骗用户

如何防止XSS攻击呢？

1. 可以在header中设置响应头 X-XSS-Protection，默认情况下禁止XSS攻击的，如果检测到url中存在XSS攻击，页面是拒绝访问的。但是他对存储型的攻击是无效的，只能拦截url中存在注入攻击的情况。

ctx.set('X-XSS-Protection', 0); // 允许XSS攻击

值有如下4种:

• 0 允许XSS攻击

• 1 禁止XSS攻击。如果检测到跨站脚本攻击，浏览器将清除页面(删除不安全的部分)

• 1;mode=block 启用XSS过滤，如果检测到攻击，浏览器将不会清除页面，而是阻止页面加载。

• 1report= 启用XSS过滤，如果检测到跨站脚本攻击，浏览器将清除页面并使用CSP report-uri 指令的功能发送违规报告。

通常情况下浏览器会默认设置为1，禁止XSS攻击。

2. CSP

内容安全策略(CSP Content Security Policy) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括XSS和数据注入等攻击。这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。

CSP本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行，我们只需要配置规则，如何拦截是浏览器自己实现的，我们可以通过这种方式来尽量减少XSS攻击。

这个策略他有如下几种方式:

// 只允许加载本站资源
Content-Security-Policy: default-src 'self'

// 只允许加载HTTPS协议图片
Content-Security-Policy: img-src https://*

// 不允许加载任何来源框架
Content-Security-Policy: child-src 'none'

一般被攻击是我们的网站执行了其他网站的js脚本，注入了黑客的js代码。假设我们的网站设置了只允许加载自己网站的代码，那么注入的js脚本就没办法执行了。

// 设置只允许执行自己网站的js脚本，
ctx.set('Content-Security-Policy', "default-src 'self'")

// 浏览器打开连接时4000端口的外部资源不能被加载
https://127.0.0.1:3000?from=<script src="http://127.0.0.1:4000/hack.js"