前端基础面试题

1. 请写出box-sizing属性的值及其含义

答：

content-box：在宽度和高度之外绘制元素的内边距和边框。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit：规定应从父元素继承 box-sizing 属性的值

2.请描述 sessionStorage、localstorage及cookies三者之间的异同点

答:从不同的方面列出相同点和不同点：

含义：

1. sessionStorage, localStorage, cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。 区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。
2. Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。
   cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密）。

储存：

1. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
2. cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。

大小：

1. 存储大小：cookie数据大小不会超过4K
2. sessionStorage和localStorage比cookie大得多，可以达到5M或者更多;

有效时长：

1. sessionStorage数据在当前浏览器窗口关闭后自动删除。
2. localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。
3. cookie在设置的过期时间之前一直有效，即使窗口或者浏览器关闭；

3.xss和csrf是什么？有什么区别？如何防范？

答：

XSS

1. XSS：跨站脚本攻击。
2. XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。
3. 最后导致的结果可能是：盗用Cookie破坏页面的正常结构，插入广告等恶意内容D-doss攻击
4. 防范措施：

(1)、编码：对用户输入的数据进行编码
(2)、过滤：移除用户输入的和事件相关的属性，如Script节点
(3)、校正：避免直接对HTML Entity进行解码。使用DOM Parse转换，校正 不配对的DOM标签

CSRF

1.CSRF：跨站请求伪造
2、攻击原理 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9K2icyXS-1627351681420)(./csrf攻击原理.jpeg)]
3. 要完成一次CSRF攻击，受害者必须满足两个必要的条件:

（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

4. CSRF如何防御

(1)、Token 验证：服务器发送给客户端一个token；客户端提交的表单中带着这个token。如果这个 token 不合法，那么服务器拒绝这个请求。
(2)、隐藏令牌：把 token 隐藏在 http 的 head头中
(3)、Referer 验证：Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。

4. 请写出以下程序的输出结果

let a = {age: 1};
let b = a;
console.log(b) // {age: 1}
a.age = 2;
console.log(b) // {age: 2}
let c = 45;
let d = c;
c = 34;
console.log(d); //45

5. 写出以下程序的输出结果

let a = { b: 2 }
let a1 = 0
let a2 = [1, 2]
let a3 = function () {
  return 23
}
let a4 = NaN
let a5 = 'true'
let a6 = false
let a7 = null
let a8 = undefined

console.log(typeof a) //object
console.log(typeof a1) //number
console.log(typeof a2) //object
console.log(typeof a3) //function
console.log(typeof a4) //number
console.log(typeof a5) //string
console.log(typeof a6) //boolean
console.log(typeof a7) //object
console.log(typeof a8) //undefined

6. 请写出以下程序的执行结果

setTimeout(() => {
  console.log("1");
}, 0);
var obj = {
  func: function() {
    setTimeout(function() {
      console.log("2");
    }, 0);
    return new Promise(function(resolve) {
      console.log("3");
      resolve();
    });
  }
};
obj.func().then(function() {
  console.log("4");
});
console.log("5");

程序输出结果：3 5 4 1 2

7.请写出JS数字千分位格式化的方法，如输入参数100000000，输出结果为100,000,000；

答：方法很多，这里列举其中两种：

1. var test = "1234567890";

function formatCash(str) {
  str = (str || 0).toString();
  if (str.length <= 1) {
    return str;
  }
  var arr = [];

  for (var i = 1, len = str.length; i < len; i++) {
    if (str.length % 3 && i === 1) {
      arr.push(str.substr(0, str.length % 3));
    }
    if (i % 3 === 0) {
      arr.push(str.substr(i - 2, 3));
    }
  }
  return arr.join(",");
}

console.log(formatCash(test));

---------------------------------------------------------------------------

2.var test = "1234567890";

function formatCash(str) {
  var arr = [];
  var counter = 0;
  str = (str || 0).toString().split("");
  for (var i = str.length - 1; i >= 0; i--) {
    counter++;
    arr.unshift(str[i]);
    if (!(counter % 3) && i !== 0) {
      arr.unshift(",");
    }
  }
  return arr.join("");
}

console.log(formatCash(test));

8.请写出以下程序的输出结果

let x = [1, 2, 3];
let y = x;
let z = [4, 5, 6];
y[0] = 10;
y = z;
z[1] = 20;
x[2] = z = 30;
console.log(x, y, z);

答：[ 10, 2, 30 ] [ 4, 20, 6 ] 30