前端与安全：跨域解决方案与防护策略-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28501497/article/details/113878096

一、前端解决跨域方法

后端配置cors，可以指定访问来源的ip，或者允许全部，具体看后端配置规则
jsonp(其实是使用协议漏洞，就比如image ,script的src属性可以直接访问，类似于引入一个js,然后里面有定义好固定的函数，属性等，只能是get请求)
nginx的反向代理，多用于vue

二、常见前端安全防护方法

对于用户输入内容进行校验和限制
提交方式使用post避免参数外漏
对关键数据进行加密

三、常见网站攻击方式

sql注入
xss攻击（对于输入框内容使用js语法）
csrf 模仿人为交互并访问危险网站

四、js垃圾回收机制

js自动运行回收机制，对于不使用的变量（全局变量，局部变量）会进行回收，回收机制分为标记清除法和引用计数法，标记清除法就是根据变量‘进入环境’和‘离开环境’进行区分是否需要进行清除，引用计数法是一个变量a赋值给另一个变量b，这个变量a次数就加一，如果又赋值给另一个变量c，变量a又加一，就是2了，如果变量b值发生改变，则变量a的计数就减一

五、前端性能优化

css,js文件压缩
图片压缩
访问接口避免返回不需要的数据（偏向后端）
采用less,sass编译
进行图片懒加载
数据异步加载，防止一次性加载数据过多导致页面卡顿
精灵图/雪碧图

六、闭包

闭包就是一个函数里面套另一个函数

七、存储到浏览器方式

cookie 可以设置失效时间
localStorage 自己删除才失效
sessionStorage 浏览器关闭才失效

八、哪些操作会导致内存泄漏

var 定义全局变量，建议使用let
闭包
定时器
echarts
keep-alive（vue）

九、事件模型三个阶段

捕获（从鼠标移动点击都会有事件触发）
目标（一直到达点击的目标）
冒泡（事件触发向上传递）

十、css盒模型

标准盒模型 width(内容)+padding+border+margin
ie盒模型 width+padding+border(内容）+margin

十一、基本类型

null
undefined
number
string
boolean
引用类型（object array function）
symbol

十二、prototype constructor proto三者关系

我的文档

	function Person(){
	
		}
	let person=new Person()
	person.__proto__===Person.prototype  //true
	person.constructor===Person.prototype.constructor  //true

十三、常见错误码

1.400 请求格式参数错误
2.401 请求http认证未通过
3.403 访问拒绝
4.404 找不到资源
5.500 服务器错误
6.501 请求还没有被实现
7.502 网关错误
8.503 服务暂时不可用

十四、函数防抖和函数节流

// 函数防抖
// 实现原理就是当用户多次调用的时候 做一个延时  如果在延时时间内又做了 则清除上次延时内的操作，重新建立延时器 多用于input框输入 用户滚动条下拉

// var timer
// function ajaxi(params) {
// 	console.log('我是函数里面的参数')
// 	console.log(params)
// }
// var ipt = document.getElementById('ipt')

// function timeout(fun, delay) {
// 	return function(argument) {
// 		if (timer) {
// 			clearTimeout(timer)
// 		}
// 		timer = setTimeout(() => {
// 			fun.call(this, argument)
// 		}, delay)
// 	}
// }
// let ts = timeout(ajaxi, 1000)
// ipt.addEventListener('keyup', (e) => {
// 	ts(e.target.value)
// })



// 自己理解
// var timer
// function ajaxi(params) {
// 	console.log('我是函数里面的参数')
// }
// var ipt = document.getElementById('ipt')
// ipt.addEventListener('keyup', (e) => {
// 	if (timer) {
// 		clearTimeout(timer)
// 	}
// 	timer = setTimeout(() => {
// 		ajaxi(e.target.value)
// 	}, 1000)
// })




// 函数节流 一定的时间内请求一次 常见为onresize事件
//模拟一段ajax请求
// function ajax(content) {
//   console.log('ajax request ' + content)
// }

 function throttle(fun, delay) {
         let last, deferTimer
         return function (args) {
             let that = this
             let _args = arguments
            let now = +new Date()
		if (last && now < last + delay) {
                 clearTimeout(deferTimer)
                 deferTimer = setTimeout(function () {
                     last = now
                     fun.apply(that, _args)
             }, delay)
         }else {
			last = now
             fun.apply(that,_args)
            }
         }
     }

    let throttleAjax = throttle(ajax, 1000)

    let inputc = document.getElementById('ipt')
     inputc.addEventListener('keyup', function(e) {
		throttleAjax(e.target.value)
     })




// 自己理解 其实就是记录当前第一次点击的时间 和当前时间进行比较 如果大于时间差 就接着调取，如果小于则跳过
var timer, now, first

function ajaxi(params) {
	console.log(params)
}
var ipt = document.getElementById('ipt')
ipt.addEventListener('keyup', (e) => {
	now = new Date()
	if (first) {
		if (now - first > 1000) {
			timer = setTimeout(() => {
				ajaxi(e.target.value)
			}, 1000)
			first = now
		}
	} else {
		first = new Date()
		timer = setTimeout(() => {
			ajaxi(e.target.value)
		}, 1000)
	}


})

十五、安全性问题（解决用户输入框内输入别的字符串）

var a =
	"&lt;p&gt;&lt;span style=&quot;font-weight: 700; font-style: italic; text-decoration-line: underline;&quot;&gt;2123123123123123&lt;/span&gt;&lt;/p&gt;"
var documentte = document.createElement("div")
documentte.innerHTML = a
text = documentte.innerText || documentte.textContent//通过这个做一个转义
documentte = null
$(".test2").html(text);//重新赋值