前端的安全性问题-爱代码爱编程

本文将讲述前端的六大安全问题，是平常比较常见的安全问题

1、XSS（Cross-Site Scripting）脚本攻击漏洞；

通过在你的输入文本当中或者这HTML标签当中插入js脚本进行攻击，在每次打开网页的时候就会执行该脚本。
🌰：

用户提交的数据未经处理，直接住注入到动态页面中
留言板内容的提交
利用xss窃取用户名密码

解决办法：
XSS攻击其核心都是利用了脚本注入，因此我们解决办法其实很简单，不信赖用户输入，对特殊字符如”<”,”>”转义，就可以从根本上防止这一问题。

1：对于富文本的防范：filter
因为富文本是比较特殊的，在富文本中输入标签，我们需要展示出来，所以我们不能用之前的html的encode方法来执行。所以我们就得用一个叫白名单过滤的方式来防范。
原理就是：首先列举一下比较合法的标签，称为白名单，这些标签是不会对页面进行攻击的。之后对用户输入的内容进行白名单过滤。
2.对一些切入标签的字符串进行转义：

2、CSRF（Cross-sit request forgery）漏洞；

CSRF也称为跨站请求伪造，其实就是对网站中的一些表单提交行为被黑客利用。比如你的网站登录的时候存到cookie的一些个人信息，当你访问黑客的网站有一段相同代码隐藏div，但你点击的时候就会导致你的网站被登出或者被登录，就是在对别的网站就行操作的时候会对你之前访问的网站发送请求。

防范：

验证码。 应用程序和用户进行交互过程中，特别是账户交易这种核心步骤，强制用户输入验证码，才能完成最终请求。在通常情况下，验证码够很好地遏制
CSRF攻击。但增加验证码降低了用户的体验，网站不能给所有的操作都加上验证码。所以只能将验证码作为一种辅助手段，在关键业务点设置验证码。

解决办法：

1、进行二次验证，在进行敏感数据操作时，要求用户进行二次验证，减少风险
2、在表单中增加一个hidden隐藏字段，用来提交token，并在服务器检查token是否正确
3、验证 HTTP Referer 字段
4、在http头中加入自定义的属性，在服务器进行验证
5.避免使用GET，使用POST请求方式

访问某网站实例，referer会注明来源，此处是通过地址来的。

CSRF能够攻击成功的本质是：重要操作的所有参数都是可以被攻击者猜测到的。
所以只要防止攻击者成功的构造一个伪造请求，就可以杜绝攻击了！

3、iframe安全隐患问题；

有时候前端页面为了显示别人的网站或者一些组件的时候，就用iframe来引入进来，比如嵌入一些广告等等。但是有些iframe安全性我们无法去评估测试，有时候会携带一些第三方的插件啊，或者嵌入了一下不安全的脚本啊，这些都是值得我们去考虑的。

解决办法：

还好在HTML5中，iframe有了一个叫做sandbox的安全属性，通过它可以对iframe的行为进行各种限制，充分实现“最小权限“原则。使用sandbox的最简单的方式就是只在iframe元素中添加上这个关键词就好。

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

另外，sandbox也提供了丰富的配置参数，我们可以进行较为细粒度的控制。一些典型的参数如下：

allow-forms：允许iframe中提交form表单

allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等）

allow-s：允许iframe中执行Java

allow-same-origin：允许iframe中的网页开启同源策略

1.使用安全的网站进行嵌入；

2.在iframe添加一个叫sandbox的属性，浏览器会对iframe内容进行严格的控制。

4、本地存储数据问题；
很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie，这样是非常不安全的，黑客们可以很容易就拿到用户的信息，所有在放到cookie中的信息或者localStorage里的信息要进行加密，加密可以自己定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行多次加密然后再多次解码，这样就比较安全了。

5、第三方依赖的安全性问题；

现如今的项目开发，很多都喜欢用别人写好的框架，为了方便快捷，很快的就搭建起项目，自己写的代码不到20%，过多的用第三方依赖或者插件，一方面会影响性能问题，另一方面第三方的依赖或者插件存在很多安全性问题，也会存在这样那样的漏洞，所以使用起来得谨慎。

解决办法：手动去检查那些依赖的安全性问题基本是不可能的，最好是利用一些自动化的工具进行扫描过后再用，比如NSP(Node Security
Platform)，Snyk等等。

6.HTTPS加密传输数据；
在浏览器对服务器访问或者请求的过程中，会经过很多的协议或者步骤，当其中的某一步被黑客拦截的时候，如果信息没有加密，就会很容易被盗取。所以接口请求以及网站部署等最好进行HTTPS加密，这样防止被人盗取数据。

7.SQL注入攻击

SQL注入(SQL Injection)，应用程序在向后台数据库传递SQL(Structured Query Language，结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

8.文件上传漏洞

原理：
由于文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型，导致允许攻击者向某个可通过 Web 访问的目录上传任意后台文件，并能够将这些文件传递给解释器，就可以在远程服务器上执行任意后台脚本。

防范：

1、检查服务器是否判断了上传文件类型及后缀。
2、定义上传文件类型白名单，即只允许白名单里面类型的文件上传。
3、文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。

9.点击劫持

点击劫持， clickjacking，也被称为UI-覆盖攻击。这个词首次出现在2008年，是由 互联网安全专家罗伯特·汉森和耶利米·格劳斯曼首创的。
它是通过覆盖不可见的框架误导受害者点击。
就像一张图片上面铺了一层透明的纸一样，你看到的是黑客的页面，但是其实这个页面只是在底部，而你真正点击的是被黑客透明化的另一个网页。一个简单的点击劫持例子，就是当你点击了一个不明链接之后，自动关注了某一个人的博客或者订阅了视频。