常说的前端安全是什么

不念不忘少年蓝@ 2023-02-22 12:18 7阅读 0赞

本文将讲述前端的九种安全问题，是平常比较常见的安全问题，当然如果还有其他必要重要的安全问题大家可以帮忙补充：

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

XSS这类安全问题发生的本质原因在于：浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。用户写一些恶意的js代码，来执行一些可以的行为，盗取Cookie信息、会话攻击、、修改Web页面以欺骗用户。

解决方案：

1.输入过滤：对数据进行严格的输出编码，使得攻击者提供的数据不再被浏览器认为是脚本而被误执行。例如

2.将输出的字符串中的反斜杠进行转义，用正则去转码解码

3.从url中获取的信息，在前端进行转义后再输出

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

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

解决办法：

1.增加token验证.因为cookie发送请求的时候会自动增加上，但是token却不会，这样就避免了攻击

2.Referer验证。页面来源的判断

**三、iframe安全隐患问题；**

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

解决办法：

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

2.在iframe添加一个叫sandbox的属性，浏览器会对iframe内容进行严格的控制，详细了解可以看看相关的API接口文档。

**四、本地存储数据问题；**

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

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

项目开发中过多的用第三方依赖或者插件，一方面会影响性能问题，另一方面第三方的依赖或者插件存在很多安全性问题，也会存在漏洞，所以要谨慎使用第三方的插件。

**六、HTTPS加密传输数据；**

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

**七、SQL注入：**

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

解决方案：

1.防止系统敏感信息泄露：该方法主要是在后台实现

2.数据转义

3.增加黑名单或白名单验证

**八、文件上传漏洞**

解决方案：

1.检查服务器是否判断了上传文件类型及后缀

2.定义上传文件类型白名单

3.文件上传目录禁止执行脚本解析

**九、CDN劫持/污染**

以出于性能考虑，前端应用通常会把一些静态资源存放到CDN上，在提高前端应用的访问速度的同时也隐含了一个新的安全风险。  
如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，那么我们的前端应用拿到的就是有问题的JS脚本或者Stylesheet文件。这种攻击方式造成的效果和XSS跨站脚本攻击相似。

解决方案：

防御这种攻击的办法是使用浏览器提供的SRI（Subresource Integrity）功能。

每个资源文件都有一个SRI值。由两部分组成，减号（-）左侧是生成SRI值用到的哈希算法名，右侧是经过Base64编码后的该资源文件的Hash值。

浏览器在处理这个script元素的时候，就会检查对应的JS脚本文件的完整性，看其是否和script元素中integrity属性指定的SRI值一致，如果不匹配，浏览器则会中止对这个JS脚本的处理

前端安全问题先分享到这里，欢迎大家留言补充。