摘要：一随着前端的快速发展，各种技术不断更新，但是前端的安全问题也值得我们重视，不要等到项目上线之后才去重视安全问题，到时候被黑客攻击的时候一切都太晚了。解决办法增加验证因为发送请求的时候会自动增加上，但是却不会，这样就避免了攻击验证。
一、随着前端的快速发展，各种技术不断更新，但是前端的安全问题也值得我们重视，不要等到项目上线之后才去重视安全问题，到时候被黑客攻击的时候一切都太晚了。
二、本文将讲述前端的六大安全问题，是平常比较常见的安全问题，当然如果还有其他必要重要的安全问题大家可以帮忙补充：
1、XSS（Cross-Site Scripting）脚本攻击漏洞；
2、CSRF（Cross-sit request forgery）漏洞；
3、iframe安全隐患问题；
4、本地存储数据问题；
5、第三方依赖的安全性问题；
6.HTTPS加密传输数据；
下面将对这些问题进行分享说明。
三、XSS（Cross-Site Scripting）脚本攻击漏洞
XSS是前端谈论最多的安全问题，是通过在你的输入文本当中或者这HTML标签当中插入js脚本进行攻击，比如会在你的a标签或者img标签之前插入一些脚本文件就能攻击到你的网站，所有在用HTML去切入到div的时候一定要注意，或者长串的字符串嵌入到a标签的时候。
解决办法：
1：如果要使用HTML进行转换内容的时候，写代码时改为innerText而不用innerHTML，或者把<script><iframe>等标签替换掉；
var HtmlUtil = {
/*1.用浏览器内部转换器实现html转码*/
htmlEncode:function (html){
//1.首先动态创建一个容器标签元素，如DIV
var temp = document.createElement ("div");
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
(temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
var output = temp.innerHTML;
temp = null;
return output;
},
/*2.用浏览器内部转换器实现html解码*/
htmlDecode:function (text){
//1.首先动态创建一个容器标签元素，如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
};
2.对一些切入标签的字符串进行转义：
var HtmlUtil = {
/*1.用正则表达式实现html转码*/
htmlEncodeByRegExp:function (str){
var s = "";
if(str.length == 0) return "";
s = str.replace(/&/g,"&");
s = s.replace(//g,">");
s = s.replace(/ /g," ");
s = s.replace(/"/g,"'");
s = s.replace(/"/g,""");
return s;
},
/*2.用正则表达式实现html解码*/
htmlDecodeByRegExp:function (str){
var s = "";
if(str.length == 0) return "";
s = str.replace(/&/g,"&");
s = s.replace(//g,">");
s = s.replace(/ /g," ");
s = s.replace(/'/g,""");
s = s.replace(/"/g,""");
return s;
}
};
四、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进行多次加密然后再多次解码，这样就比较安全了。
七、第三方依赖安全隐患
现如今的项目开发，很多都喜欢用别人写好的框架，为了方便快捷，很快的就搭建起项目，自己写的代码不到20%，过多的用第三方依赖或者插件，一方面会影响性能问题，另一方面第三方的依赖或者插件存在很多安全性问题，也会存在这样那样的漏洞，所以使用起来得谨慎。
解决办法：手动去检查那些依赖的安全性问题基本是不可能的，最好是利用一些自动化的工具进行扫描过后再用，比如NSP(Node Security Platform)，Snyk等等。
八、HTTPS加密传输数据
在浏览器对服务器访问或者请求的过程中，会经过很多的协议或者步骤，当其中的某一步被黑客拦截的时候，如果信息没有加密，就会很容易被盗取。所以接口请求以及网站部署等最好进行HTTPS加密，这样防止被人盗取数据。
前端安全问题先分享到这里，后续再慢慢补充，喜欢的可以点关注，谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/11451.html
摘要：一随着前端的快速发展，各种技术不断更新，但是前端的安全问题也值得我们重视，不要等到项目上线之后才去重视安全问题，到时候被黑客攻击的时候一切都太晚了。解决办法增加验证因为发送请求的时候会自动增加上，但是却不会，这样就避免了攻击验证。 一、随着前端的快速发展，各种技术不断更新，但是前端的安全问题也值得我们重视，不要等到项目上线之后才去重视安全问题，到时候被黑客攻击的时候一切都太晚了。 二、...
摘要：业界动态成为版本，当前发布版本为。前一阶段主要聚焦于减少操作。技术纵横重磅消息要支持开发和开发了主题演讲当中提出的第一项重要公告，正是候选发行版简称的公布。 业界动态 NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成为LTS版本，...
摘要：为什么有跨域问题因为浏览器的同源策略，导致了跨域问题的出现。一同源策略什么是同源策略同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。为什么需要同源策略出于安全原因，浏览器限制从脚本内发起的跨源请求。 为什么有跨域问题 因为浏览器的同源策略，导致了跨域问题的出现。 一. 同源策略 1. 什么是同源策略 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的...
摘要：月日，在中国信息通信研究院中国通信标准化协会联合主办为期两天的可信云大会上，主办方颁发了年上半年可信云系列评估认证，以及公布了可信云相关技术服务能力与应用案例最佳实践评选活动榜单。7月27日，在中国信息通信研究院、中国通信标准化协会联合主办为期两天的2021 可信云大会上，主办方颁发了2021年上半年可信云系列评估认证，以及公布了可信云相关技术、服务能力与应用案例最佳实践评选活动榜单。UCl...
阅读 3203·2021-11-22 12:07
阅读 1825·2021-10-12 10:11
阅读 960·2019-08-30 15:44
阅读 2890·2019-08-30 12:45
阅读 2075·2019-08-29 16:41
阅读 1506·2019-08-29 16:35
阅读 2580·2019-08-29 12:57
阅读 1100·2019-08-26 13:51
