JS面试真题 part7

31、web常见的攻击方式有哪些？如何防御

自己回答：

xss，脚本攻击，输入框里拼接sql语句。防御：进行转义
xsrf，浏览器链接盗取cookie，点击第三方链接，伪装获取用户信息，用获取的信息登录网页。防御：用https链接，设置浏览器的一个属性

标准回答：

web攻击是针对用户上网行为或网站服务器等设备进行攻击的行为
如植入恶意代码，修改网站权限，获取网站用户隐私信息等等

web常见的攻击方式有

• XSS （Cross Site Scripting）跨站脚本攻击
• CSRF （Cross-Site requset forgery）跨站请求伪造
• SQL 注入攻击

XSS ，跨站脚本攻击，允许攻击者将恶意代码提供给其他用户使用的页面中
举例：

一个搜索页面，根据url参数决定关键词内容

 <input type="text" value="<%= getParameter("keyword") %>">
<button> 搜索</button>
<div>
 您搜索的关键词是：<%= getParameter("keyword") %>
</div>

这里看似没问题，如果不按套路出牌呢？
用户输入"><script>alert('XSS');</script>，拼接到HTML中返回给浏览器。形成了如下的HTML

<input type="text" value=""><script>alert('XSS');</script>">
<button>搜索</button>
<div>
    您搜索的关键词是： "><script>alert('XSS');</script>
</div>

浏览器无法分辨出<script>alert('XSS');</script>是恶意代码，因而将其执行，试想一下，如果是获取 cookie 发送对黑客服务器呢？
根据攻击的来源，XSS攻击可以分成：

• 存储型 恶意代码存储在数据库里，如论坛发帖，商品评论，用户私信等
• 反射型 恶意代码存在URL里，如网站搜索，跳转等
• DOM型 取出和执行都由浏览器完成，属于前端安全漏洞，其他两种是服务端安全漏洞

XSS预防：
XSS攻击的两大要素：

• 攻击者提交恶意代码
• 浏览器执行恶意代码

针对第一个要素，我们在用户输入的过程中，过滤掉用户输入的恶劣代码，然后提交给后端，但是如果攻击者绕开前端请求，直接构造请求就不能预防了

而如果在后端写入数据库前，对输入进行过滤，然后把内容给前端，但是这个内容在不同地方就会有不同显示

• 当 5<7 作为HTML拼接页面，可以正常显示

 <div title="comment">5 &lt; 7</div>

• 当 5<7 通过Ajax返回，然后赋值给 JavaScript 的变量时。前端得到的字符串就是转义后的字符。这个内容不能直接用于vue等模板的展示，也不能直接用于内容长度的计算。不能用于标题、alert等

可以看到，过滤并非可靠，下面就要通过防止浏览器执行恶意代码：
在使用.innerHTML 、.outerHTML 、document.write() 时要特别小心，不要把不可信的数据作为HTML插到页面上，而应尽量使用 .textContent 、.setAttribute()等
如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML功能，就在前端 render 阶段避免 innerHTML、outerHTML的xss隐患

DOM 中的内联事件监听器，如location、onclickonerror、onloadr、onmouseove等，<a> 标签的 href 属性,JavaScript的 eval()、setTimeout()、setInterval()等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 AP，很容易产生安全隐患，请务必避免

CSRF

CSRF跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。

利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的

一个典型的CSRF攻击有着如下的流程

• 受害者登录a.com，并保留了登录凭证(Cookie)
• 攻击者引诱受害者访问了b.com
• b.com 向 a.com 发送了一个请求:a.com/act=xx。浏览器会默认携带a.com的Cookie
• a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求
• a.com以受害者的名义执行了act=xx
• 攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作

csrf 可以通过 get 请求，即通过访问 img 的页面后，浏览器自动访问目标地址，发送请求同样，也可以设置一个自动提交的表单发送post请求

CSRF的特点

• 攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生
• 攻击利用受害者在被攻击网站的登录凭证，冒充受孩子提交操；而不是直接窃取数据
• 整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”
• 跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入第三方论坛、文章中，难以进行追踪

CSRF的预防
CSRF 通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。
防止csrf常用方案如下

• 阻止不明外域的访问
  • 同源检测
  • Samesite Cookie
• 提交时要求附加本域才能获取的信息
  • CSRF Token
  • 双重Cookie验证

这里主要讲讲Token这种形式，流程如下：

• 用户打开页面的时候，服务器需要给这个用户生成一个Token
• 对于GET请求，Token将附在请求地址之后，对于POST请求来说，要在form的最后加上

<input type=”hidden” name=”csrftoken” value=”tokenvalue”/>

• 当用户从客户端得到了Token，再次提交给服务器的时候，服务器需要判断Token的有效性

SQL注入

SQL注入攻击，是通过将恶意的Sql查询或添加语句插入到应用的输入参数中，再在后台Sql服务上解析执行进行的攻击

流程如下所示:

• 找出SQL漏洞的注入点
• 判断数据库的类型以及版本
• 猜解用户名和密码
• 利用工具查找Web后台管理入口
• 入侵和破坏

预防方式如下:

• 严格检查输入变量的类型和格式
• 过滤和转义特殊字符.
• 对访问数据库的Web应用程序采用Web应用防火墙

上述只是列举了常见的 web 攻击方式，实际开发过程中还会遇到很多安全问题，对于这些问题，切记不可忽视

32、说说JavaScript中内存泄漏的几种情况

自己回答：内存泄漏：就是无法回收资源。比如：闭包，没有解除的事件绑定
标准回答：

1、意外的全局变量

function foo(arg) {
     bar = "this is a hidden global variable";
}

另一种意外的全局变量可能由 this 创建

function foo() {
    this.variable = "potential accidental global";
}
// foo 调用自己，this 指向了全局对象 (window)
foo();

上述使用严格模式，可以避免意外的全局变量

2、定时器也常会造成内存泄漏

var someResource = getData();
setInterval(function() {
	 var node = document.getElementById('Node');
	 if(node) {
		 // 处理node和someResource
		 node.innerHTML = JSON.stringify(someResource));
	 }
}, 1000);

如果 id 为 Node 的元素从DOM中移除，该定时器仍会存在，同时，因为回调函数中包含对 someResource 的引用，定时器外面的someResource也不会释放

3、闭包，维持函数内局部变量，使其得不到释放

function bindEvent() {
	 var obj = document.createElement('XXX');
	 var unused = function () {
	      console.log(obj, '闭包内引用obj，obj不会被释放 ');
	 };
	 obj = null; // 解决方法
}

4、没有清理对DOM元素的引用同样造成内存泄漏

const refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, 'refA'); // 但是还存在引用能console出整个div 没有被回收 
refA = null;
console.log(refA, 'refA');//解除引用

5、使用事件监听 addEventListener 监听的时候，不监听的时候没有解除事件绑定

JS具有自动垃圾回收机制，具体可以看 博客 垃圾回收 &浏览器事件循环

33、JavaScript如何实现继承

自己回答：原型链继承，构造函数继承，组合继承，原型继承，寄生继承，寄生组合继承，类继承（es6，语法糖）

原型链继承： 将子类的prototpye指向父类的实例，继承父类的属性
缺点:共享父类的属性，相当于浅拷贝，当父类的属性是引用类型，会造成多个实例互相影响, 不能动态传参

function Person(name,age){
    this.name=name
    this.age=age
}
function Student(sex){
    this.sex=sex
}

Student.prototpye=new Person('','')

//使用
let s1= new Student('')

构造函数继承： 在子类函数里，调用父类的call函数。缺点：不能继承父类的prototpye，以及每次都要调用一次父类构造函数

function Person(name,age){
    this.name=name
    this.age=age
}
function Student(name,age,sex){
    Person.call(this,name,age)
    this.sex=sex
}

//使用
let s1= new Student('','','')

组合继承: 原型链和构造函数的结合体，缺点：

function Person(name,age){
    this.name=name
    this.age=age
}
function Student(name,age,sex){
    Person.call(this,name,age)
    this.sex=sex
}
let p=new Person()//为了继承Person上的prototpye，传参后面new Student时会再调用 Person.call，
Student.prototpye=p
Student.prototpye.constructor=Student

原型继承： 借助 Object.create 方法实现对普通对象的继承 ，缺点和原型链继承一样，浅拷贝，引用属性会公用
寄生继承： 在原型继承的基础上，增强一些方法和属性，缺点和原型继承一样
**寄生组合继承: ** 组合继承里，let p=new Person()，Student.prototpye=p 存在问题，寄生组合替换了这部分的继承。使用Object.create 减少组合继承中多进行一次构造函数的过程

child.prototype = Object.create(parent.prototype);
 child.prototype.constructor = child;

标准回答：看这篇博客 面向对象编程/原型及原型链(手写call，apply，bind，new；创建对象的多种方式&优缺点；继承的多种方式&优缺点)

总结：

通过Object.create 来划分不同的继承方式，最后的寄生组合继承方式是通过组合继承改造之后的最优继承方式，而 extends 的语法糖和寄生组合继承方式基本类似。

34、说说JavaScript数字精度丢失的问题，如何解决

自己回答：将数字转string存储，或者使用es6的bigInt

标准回答：

现象：

0.1 + 0.2 === 0.3 // false

问题： 计算机存储双精度浮点数需要先把十进制转成二进制的科学计数法，然后用自己的规则{符号位+（指数位+指数偏移量的二进制）+小数部分}存储二进制的科学记数法

因为存储时有位数限制（64位），并且某些十进制的浮点数在转换为二进制时会出现无限循环，会造成二进制的舍入操作（0舍1入），当再转换为十进制时就造成了计算误差

解决方案： 理论上有限的空间存储无限的小数是不可能保证精确的，但我们可以处理一下得到我们期望的结果。当你拿到1.4000000000000001这样的数据要展示时，建议使用toPrecision凑整并parseFloat转成数字后再显示，如下：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True

对于运算类操作，如 +-*/,就不能使用toPrecision了。正确的做法是把小数转成整数后再运算，以加法为例：

/**
 * 
 */
function add(num1, num2) {
	 const num1Digits = (num1.toString().split('.')[1] || '').length;
	 const num2Digits = (num2.toString().split('.')[1] || '').length;
	 const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
	 return (num1 * baseNum + num2 * baseNum) / baseNum;
}

最后还可以使用第三方库，如 Math.js、BigDecimal.js。
要解决大数的问题，可以引入bignumber.js，原理是把所有数字当成字符串，重新实现计算逻辑，缺点是性能比原生差很多。

35、举例说明你对尾递归的理解，有哪些应用场景

递归：指函数在定义中使用函数自身的方法
下面实现一个函数 pow(x,n)，它可以计算 x 的 n 次方

使用迭代的方式，如下：

function pow(x, n) {
	 let result = 1;
	 // 在循环中，用 x 乘以 result n 次
	 for (let i = 0; i < n; i++) {
	 	result *= x;
	 }
	 return result;
}

使用递归的方式，如下：

function pow(x, n) {
	 if (n == 1) {
	    return x;
	 } else {
	    return x * pow(x, n - 1);
	 }
}

pow(x, n)被调用时，执行分为两个分支

			 if n==1 = x
			 /
pow(x, n) =
			 \
			 else = x * pow(x, n - 1)

也就是说 pow 递归地调用自身，直到 n == 1

为了计算 pow(2,4),递归遍历经过了下面几个步骤：
1、pow(2,4) = 2 * pow(2,3)
2、pow(2,3) = 2 * pow(2,2)
3、pow(2,2) = 2 * pow(2,1)
4、pow(2,1) = 2
因此。递归将函数调用简化为一个更简单的函数调用，然后再将其简化为一个更简单的函数，以此类推，直到结果

尾递归

尾递归，即在函数尾位置调用自身（或是一个尾调用本身的其他函数等等）。尾递归也是递归的一种特殊情形。尾递归是一种特殊的尾调用，即在尾部直接调用自身的递归函数
尾递归在普通尾调用的基础上，多了两个特征

• 在尾部调用的是函数自身
• 可通过优化，使得计算仅占用常量栈空间
  在递归调用的过程中系统为每一层的返回点、局部量等开辟了栈来存储，递归次数过多容易造成栈溢出
  这时候，我们就可以使用尾递归，即一个函数中所有递归形式的调用都出现在函数的末尾。对于尾递归来说，由于只存在一个调用记录，所以永远不会发生“栈溢出”错误
  实现阶乘，如果用普通的递归，如下：

function factorial(n) {
	 if (n === 1) return 1;
	 return n * factorial(n - 1);
}
factorial(5) // 120

如果n等于5，这个方法要执行5次，才返回最终的计算表达式，这样每次都要保存这个方法，就容易造成栈溢出，复杂度为O(n)
如果我们使用尾递归，则如下：

function factorial(n, total) {
	 if (n === 1) return total;
	 return factorial(n - 1, n * total);
}
factorial(5, 1) // 120

可以看到，每一次返回的就是一个新的函数，不带上一个函数的参数，也就不需要储存上一个函数了，尾递归只需要保存一个调用栈，复杂度O(1)

应用场景：

1、数组求和

function sumArray(arr, total) {
	 if(arr.length === 1) {
	 	return total
	 }
	 return sum(arr, total + arr.pop())
}

2、使用尾递归优化斐波那契数列

function factorial2 (n, start = 1, total = 1) {
 if(n <= 2){
   return total
 }
 return factorial2 (n -1, total, total + start)
}

3、数组扁平化

let a = [1,2,3, [1,2,3, [1,2,3]]]
// 变成
let a = [1,2,3,1,2,3,1,2,3]
// 具体实现
function flat(arr = [], result = []) {
	 arr.forEach(v => {
		 if(Array.isArray(v)) {
			 result = result.concat(flat(v, []))
		 }else {
			 result.push(v)
		 }
	 })
	 return result
}

4、数组对象格式化

let obj = {
	 a: '1',
	 b: {
		 c: '2',
		 D: {
		    E: '3'
		 }
	 }
}
// 转化如下
let obj = {
	 a: '1',
	 b: {
		 c: '2',
		 d: {
			 e: '3'
		 }
	 }
}
// 代码实现
function keysLower(obj) {
	 let reg = new RegExp("([A-Z]+)", "g");
	 for (let key in obj) {
		 if (obj.hasOwnProperty(key)) {
			 let temp = obj[key];
			 if (reg.test(key.toString())) {
				 // 将修改后的属性名重新赋值给temp，并在对象 obj 内添加一个转换后的属性
				 temp = obj[key.replace(reg, function (result) {
				      return result.toLowerCase()
				 })] = obj[key];
				 // 将之前大写的键属性删除
				 delete obj[key];
			 }
			 // 如果属性是对象或者数组，重新执行函数
			 if (typeof temp === 'object' || Object.prototype.toString.call(temp) === '[object Array]') {
		    	 keysLower(temp);
			 }
		 }
	 }
	 return obj;
};