常见前端安全

1.跨站脚本攻击,俗称XSS(cross )

  什么是XSS?

    xss是恶意用户将脚本植入到页面中执行而获取相应敏感信息。也就是会在web页面某个节点(文本节点、属性节点)运行。

  XSS攻击的危害包括:

    1.盗用账号等敏感信息

    2.非法转账等

  XSS攻击类型:

    1.反射型。通过一个伪装的url链接进行攻击,利用url的search参数将脚本伪装,当页面获取链接参数进行攻击

    2.储存型。通过表单输入,储存数据库,再在页面读取数据,回显执行脚本进行攻击。

    3.富文本。

  注入点:

    1.html节点内容
      评价输入框输入存储DB后读取

      <div> {content} </div>
      <div> <script></script></div>

    2.html属性
      URL传入src,scr提前关闭引号

      <img src=‘#{img}‘ />
      <img src="1" onerror="alert(1)" />
    3.脚本
      提前关闭引号

        <script>
          var data = ‘#{data}‘
          var data = ‘hello‘;alert(0)‘‘
        </script>
    4.富文本编辑
      本质是一段复杂的html,提交

  XSS防御

    1.针对反射型

    2.针对html的脚本注入

//html节点 防御

//对于尖括号“<” ">" 进行转义

//转义时机: 在存入数据库前 或  在读取DB展示前转义

function escapeHtml(str){
    str = str.replace(/&/g, ‘&‘); //这句在先,不然会把&lt的&符号也转了
    str = str.replace(/</g, ‘<‘);
    str = str.replace(/>/g, ‘>‘);
    return str
}

//html属性 防御
//对于引号 “"” 进行转义

function escapeHtmlProp(str){
    if(!str) return ‘‘
    str = str.replace(/"/g, ‘&quto;‘);
    str = str.replace(/‘/g, ‘‘‘);
    str = str.replace(/ /g, ‘ ‘);
    return str
}

//以上两种防御方法可以合并为同一个函数方法

  

    3.针对JS的脚本注入

      直接用JSON.stringify(str)

    4.针对富文本的脚本注入

      1)白名单

        

var xssfilter = function (html){
    if(!html) return;
    var cheerio = require(‘cheerio‘);
    var $ = cheerio.load(html);
    //设置白名单
    var whiteList = {
        ‘img‘: [‘src‘,‘title‘]
    }
    $(‘*‘).each(function(index,el){
        if(!whiteList[el.name]){
            $(el).remove();
            return;
        }
        for( var attr in el.attribs) {
            if(whiteList[el.name].indexOf(attr) === -1){
                $(el).attr(attr,null)
            }
        }
    })
    return html
}

  

      2)黑名单

2.跨站请求伪造,俗称CSRF

  1.攻击原理

    用户登录正常A网站进行正常操作,并且确认身份,保存认证信息。然后恶意网站B页面向A网站发起请求(带上A网站的认证身份),以达到在A网站执行恶意操作。

  2.危害

    利用用户登录态  盗取用户资金

    用户不知情    冒充用户发帖

    完成业务请求   损坏网站声誉

  3.防御

    从关键点切入:恶意网站向认证网站发请求,带上认证信息。

    1.禁止第三方网站带cookie。

      后端设置samesite值

    2.不访问认证网站

      在前端页面加入验证信息

      验证码

      token

    

原文地址:https://www.cnblogs.com/gongxiansheng/p/10134554.html

时间: 2024-10-11 19:33:38

常见前端安全的相关文章

常见前端开发的题目,可能对你有用

1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更广泛的设备所访问.更少的代码和组件,容易维 护.改版方便,不需要变动页面内容.提供打印版本而不需要复制内容.提高网站易用性: 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML

常见前端知识摘要

1.this的典型应用(1)在html元素事件属性中使用(2)构造函数里使用(3)input点击,获取值this.value(4)apply/call求数组最值.Math.max.apply(this,numbers)2.闭包的理解:(1)定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包.(2)表现形式:使函数外部能够调用函数内部定义的变量(3)使用闭包的注意点:一.滥用闭包,会造成内存泄漏:由于闭包会使

vue常见前端UI库

VUE资源汇总:https://github.com/RuMengkai/awesome-vue VUX 项目主页:https://vux.li/#/ github地址:https://github.com/airyland/vux element UI(饿了么后台) Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/#/zh-CN 饿了么github:http://github.com/el

常见前端算法面试题

1.写一个方法将数组换成前端更易解析的树状结构 function getTree(data) {     var newData = [],         hash = {};     for (var i = 0; i < data.length; i++) {         if (!hash[data[i].province]) {             hash[data[i].province] = {                 'province': data[i].pr

常见前端深度问题

1.数据结构 快速排序的原理,时间复杂度2.js的事件委托原理. window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ a

前端安全(XSS、CSRF防御)

一.网络安全 OWASP:开放式Web应用程序安全项目(OWASP,Open Web Application Security Project) OWASP是一个开源的.非盈利的全球性安全组织,致力于应用软件的安全研究.http://www.owasp.org.cn/ 二.XSS攻击 1.总述 2.XSS攻击原理 XSS攻击(Cross-Site Scripting)跨站脚本攻击. 被OWASP评为十大安全漏洞中的第二威胁漏洞. 特点:能注入恶意的HTML/JavaScript代码到用户浏览的网

前端相关开发工具介绍

1.常用前端开发工具-编辑器 sublimetext:Sublime Text 是一款流行的代码编辑器软件,也是HTML和散文先进的文本编辑器,可运行在Linux,Windows和Mac OS X.也是许多程序员喜欢使用的一款文本编辑器软件. atom:他们使用目前最先进流行的技术重新打造了一款称为"属于21世纪"的代码编辑器--Atom, 它开源免费跨平台,并且整合 GIT 并提供类似 SublimeText 的包管理功能,支持插件扩展,可配置性非常高 vim:后台人员使用,Vim是

一个初级的前端工程师需要知道些什么?

按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么是前端后端.后台),了解基本的html.css和javascript语法,可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来,了解过一些框架的使用(例如烂大街但是依然牛逼的jQuery.zepto.bootstrap等等) 在经历过入门的阶段,已经了解了前端要做什么,并且把基本的语法学习过了可以独立做一些简单的页面了,那么就要继续学习达到初级前端工程师

SVG交互动画制作

前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画),JS动画或者我们可以称之为Canvas动画 这里主要我们是要讲解的是SVG动画的实现方法. SVG动画的类型 常见的SVG动画有三种实现方式 第一种,通过原生的SVG来实现,但是这种方法的实现效率较低,而且很多较为精确的动作比较难实现 第二种,通过常见的SVG动画库来实现,比如svg.js,snap