你了解哪些前端安全相关的知识？或者名词？
- xss
- csrf
- https
- csp：内容安全策略，可以禁止加载外域代码，禁止外域提交等等
- hsts：强制客户端使用https与服务端建立连接
- x-frame-options：控制当前页面是否可以被嵌入到iframe中
- referrer-policy：控制referer的携带策略
能稍微详细的聊一下xss吗
cross-site scripting，跨站脚本，通常简称为xss。
说白了就是攻击者想尽一切办法将可执行代码注入到网页中，而恶意代码未经过过滤，与网站正常的代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
外在表现上，都有哪些攻击场景？
- 评论区植入js代码
- url上拼接js代码
有些同学可能觉得这种场景下，用户能输入的代码长度有限，根本构不成什么威胁，然后攻击者上可以通过引入外部脚本实现复杂攻击的。
具体从技术上分析，都有哪些xss攻击的类型呢？
1）存储型server
场景：常见于带有用户保存数据的网站功能，攻击者通过可输入区域来注入恶意代码，如论坛发帖、商品评论，用户私信等。
2）反射型server
存储型的恶意代码通过可输入区域，存储在数据库中，而反射型的恶意代码拼接在url上。需要用户主动打开恶意的URL才能生效。
场景：通过URL传递参数的功能，如网站搜索、跳转等。
3）DOM型server
DOM型xss攻击中，取出和执行恶意代码由浏览器端完成，属于签到JavaScript自身的安全漏洞，而其他两种xss都属于服务端的安全漏洞。
场景：通过URL传递参数的功能，如网站搜索、跳转。
如何防范xss攻击呢？
主旨：防止攻击者提交恶意代码，防止浏览器执行恶意代码。
1）对数据进行严格的输出编码：如HTML元素的编码、CSS编码、JS编码、URL编码等。
- 避免拼接HTML；Vue/React技术栈，避免使用
v-html/dangerouslySetInnerHTML
2）CSP HTTP Header，即Content-Security-Policy（不支持CSP的旧版浏览器可以设置X-XSS-Protection）
- 增加攻击难度，配置CSP（本质上建立白名单，由浏览器进行拦截）
- 禁止加载外域代码，防止复杂的逻辑攻击
- 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域
那再来说一下CSRF吧
Cross-site request forgery，跨站请求伪造
攻击者诱导受害者进入恶意网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
如何防范CSRF的攻击呢？
CSRF一般都是发生在第三方域名，攻击者无法获取到cookie信息，只是可以利用浏览器机制去适应cookie。
1）组织第三方域名的访问
- Cookie SameSite：Strict表示浏览器会完全禁止第三方cookie、Lax表示第三方站点中使用POST方法都不会携带cookie、None表示任何情况下都会发生cookie数据。
- 同源检测：通过
request header中的origin referer等，来确定发送请求的站点是否上自己期望中站点。
2）提交请求时附加额外信息
- CSRF Token：当用户打开页面时，服务器利用加密算法给当前用户生成一个Token；每次页面加载时，前端把获取的Token加到所有能发送请求的html元素上；服务端每次接收请求，都校验Token的有效性。
- 双重Cookie：用户访问网站的时候，服务器向浏览器注入一个额外的cookie，内容随便；每次前端发起请求，都在请求上拼接csrfcookie这个参数，参数值就从cookie里获取；服务端接收到请求，就去校验请求参数里的值和cookie里的值是否一致。
为什么会有事件循环
单线程
JavaScript的主要用途是用户互动，以及操作DOM。如果它是多线程的会有很多复杂的问题要处理，比如一个线程删除了当前DOM节点，一个要操作当前DOM节点，最后就不知道要以哪个线程的操作为准，为了避免这种情况，所以JS是单线程的。
非阻塞：通过event loop实现。
宏任务和微任务
为什么要引入微任务，只有一种类型的任务不行吗？
页面渲染事件，各种IO的完成事件等随时被添加到任务队列中，一直会保持先进先出的原则执行，我们不能准确地控制这些事件被添加到任务队列中。但是这个时候突然有高优先级的任务需要尽快执行，那么一种类型的任务就不合适了，所以引入了微任务队列。