前端安全问题及解决办法

最新推荐文章于 2022-04-12 16:02:06 发布

lulu-sun

最新推荐文章于 2022-04-12 16:02:06 发布

阅读量523

点赞数

分类专栏：前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/sunlulu66/article/details/104446675

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端安全问题及解决办法

xss(Cross-site Scripting)脚本注入攻击

核心：恶意脚本注入
描述：攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

解决方案：
1、打开npmjs.com下载xss插件，引入xss插件之后就没有任何问题了。
2、将html进行内容转换，或者将

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;
     }
 };

CSRF(Cross-sit request forgery)漏洞

核心：利用用户身份伪造请求
描述：利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，冒充用户对被攻击的网站发送执行某项操作的请求

解决方案：

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

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

iframe安全隐患问题

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

解决办法：

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

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

HTTP劫持

核心：广告、弹框html注入
描述：当我们访问页面的时候，运营商在页面的HTML代码中，插入弹窗、广告等HTML代码，来获取相应的利益

本地存储数据问题

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