【面试】个人宝典 查缺补漏

CSS

1.

flex:auto;
flex-start, flex-end;
align-self: strech;

这次通过MDN仔细看了flex布局，才明白在flex布局中有很重要的概念是主轴和交叉轴；
flex: auto我是很少用的，展开来对应属性是flex: flex-grow flex-shrink flex-basis ，flex: auto 代表着flex: 1 1 auto

JS

1. Virturl DOM

不定项选择：

A. 虚拟DOM能够一定程度保证性能下限
B. 虚拟DOM都是在内存中进行，不会操作DOM
C. 虚拟DOM是性能的最优解，比直接操作DOM快
D. 采用虚拟DOM的框架要比不采用虚拟DOM的框架性能好

这里查看虚拟DOM or diff算法

2. 宏任务

requestAnimationFrame ✅
MutationObserver ❎
宏任务微任务 Event loop

//例题
async function async1() {
  console.log('async1 start')
  await async2()  // await会阻塞进程并跳出
  console.log('async1 end')
}
 
async function async2() {
  console.log('async2')
}
 
console.log('script start')
setTimeout(function() {
  console.log('setTimeout')
}, 0)
 
async1(); 
   
new Promise( function( resolve ) {
 console.log('promise1')
 resolve();
} ).then( function() {
 console.log('promise2')
} )
 
console.log('script end')

课余知识

1. CSRF

2.XSS攻击

分类

1、反射型 （Reflected XSS ） 发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。

2、存储型存 Stored XSS和 Reflected XSS的差别就在于，具有攻击性的脚本被保存到了服务器端（数据库，内存，文件系统）并且可以被普通用户完整的从服务的取得并执行，从而获得了在网络上传播的能力。

3、DOM型 （DOM-based or local XSS） 即基于DOM或本地的 XSS 攻击：其实是一种特殊类型的反射型 XSS，它是基于 DOM文档对象模型的一种漏洞。可以通过 DOM来动态修改页面内容，从客户端获取 DOM中的数据并在本地执行。基于这个特性，就可以利用 JS脚本来实现 XSS漏洞的利用。

防御措施

• 输入过滤，避免 XSS 的方法之一主要是将用户输入的内容进行过滤。对所有用户提交内容进行可靠的输入验证，包括对 URL、查询关键字、POST数据等，仅接受指定长度范围内、采用适当格式、采用所预期的字符的内容提交，对其他的一律过滤。(客户端和服务器都要)
• 输出转义，往 HTML 标签之间插入不可信数据的时候，首先要做的就是对不可信数据进行 HTML Entity 编码

function htmlEncodeByRegExp  (str){  
         var s = "";
         if(str.length == 0) return "";
         s = str.replace(/&/g,"&");
         s = s.replace(/</g,"&lt;");
         s = s.replace(/>/g,"&gt;");
         s = s.replace(/ /g,"&nbsp;");
         s = s.replace(/\'/g,"&#39;");
         s = s.replace(/\"/g,"&quot;");
         return s;  
 }
var tmpStr="<p>123</p>";   
var html=htmlEncodeByRegExp (tmpStr)
console.log(html) //&lt;p&gt;123&lt;/p&gt;
document.querySelector(".content").innerHTML=html; //<p>123</p>

• 使用 HttpOnly Cookie ，将重要的cookie标记为httponly，这样的话当浏览器向Web服务器发起请求的时就会带上cookie字段，但是在js脚本中却不能访问这个cookie，这样就避免了XSS攻击利用JavaScript的document.cookie获取cookie。
• 现代web开发框架如vue.js、react.js等，在设计的时候就考虑了XSS攻击对html插值进行了更进一步的抽象、过滤和转义，我们只要熟练正确地使用他们，就可以在大部分情况下避免XSS攻击。