前端浏览器相关知识

从输入url 到 渲染页面的整个过程

1. 对DNS进行解析获取ip地址
2. 根据得到的ip地址进行发送HTTP请求
3. 服务器处理HTTP请求并返回响应给浏览器
4. 浏览器将HTML解析成 DOM 树
5. 将 CSS 解析成 CSSOM 树
6. 将 DOM 树和 CSSOM 树构造成 render 树
7. JS 根据得到的 render 树能够得到节点的几何属性，计算出每个节点在屏幕中的位置
8. 按照计算出来的规则，绘制到屏幕上

为何将 CSS 放到 head 中

在渲染DOM 节点前把CSS加载完，能够避免重复渲染，且如果未先加载 CSS 的情况下，加载出来的页面因为没有样式会很丑。

为何将 js 放到 body 最后

对 js 的解析会阻塞页面渲染。

解决方案（二选一）

1. 给其添加 async 属性：async 会在脚本加载之后立即执行。如果是多个，执行顺序和加载顺序无关。async 会在 load 事件之前执行，但并不能确保与 DOMContentLoaded 的执行顺序。
2. 给其添加 defer 属性：defer 是 HTML 解析完才会执行。如果是多个，则按照加载顺序依次执行。defer脚本会在 DOMContentLoaded 和 load 事件之前执行

Window.onLoad 和 DOMContentLoaded 的区别

window.addeventListener('onLoad', function(){
	// 页面加载完全部资源才执行，包括图片、视频
})
window.addeventListener('DOMContentLoaded', function(){
	// DOM 渲染完即可执行，包括图片、视频等还没加载完
})

XSS（跨站脚本攻击）

攻击原理：攻击者通过在目标网站注入恶意脚本，使之在用户浏览器上运行，从而获取用户敏感信息。

XSS 防范：

• 过滤（过滤诸如 <script> <img> 等敏感标签）
• 编码：对用户数入的数据进行 HTML Entity 编码，把字符转换成转义字符。比如说<script>alert(1)</script>，若不进行任何处理，则浏览器会执行 alert 的 js 操作，实现 XSS 注入。进行编码处理之后，将变量作为纯文本进行输入，且不引起 JavaScript 的执行。
• 设置 HTTPOnly：对敏感的 cookie 设置 HttpOnly，禁止 JavaScript 访问这些信息，攻击者在完成 XSS 攻击后也无法窃取敏感信息。
• 输入内容长度控制：对于不受信任的输入，都应该先定一个合理的长度。虽然无法完全防止 XSS 的发生，但是可以增加 XSS 攻击的难度。

CSRF（跨站请求伪造）

攻击原理：用户在A站点已登录的情况下，被攻击者引导至B站点；此时攻击者在B站点伪造一个A站点的请求来模拟用户操作（如支付等敏感操作）。

攻击者盗用你的身份，以你的名义向第三方网站发送恶意请求

CSRF 防范：

• 在A站点页面下生成随机 token，用户在发起敏感操作时带上此 token 给服务端验证
• 服务端验证请求的 refer 来源
• 给 cookie 设置 samesite 属性，防止被第三方发起请求时带上

XSS 和 CSRF 的区别

1. CSRF 需要用户先登录网站A，XSS 不需要登录
2. CSRF 是利用网站A 本身的漏洞，去请求网站A的api；XSS 是向网站A注入JS代码，然后执行JS里的代码，篡改网站A的内容。（XSS 利用的是站点内的信任用户，而 CSRF 则是通过伪装来自受信任用户的请求来利用受信任的网站 ）

同源策略

同源策略是浏览器的安全功能，不同源的客户端在没有明确授权下，不能读写对方资源的。

协议、域名、端口，三者任一不同，则算是跨域。

跨域方式

1. JSONP（只支持 get 请求）：通过 script 标签的异步加载实现，利用 script 标签不受同源策略的限制。
2. CORS：服务器设置 Access-Control-Allow-Origin 来实现跨域，如果浏览器检测到相应的设置，就会允许 ajax 进行跨域访问。

  // 以Node.js + express 为例
app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  next()
})

3. proxy 代理：在本地创建一个虚拟服务器，发送请求数据，同时接受请求的数据，利用服务器与服务器交互不会有跨域问题，是完全只靠前端自己独立解决跨域的方式。

 devServer: {
    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
          ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"
          }
      },
  },
  }