从输入url 到 渲染页面的整个过程
- 对DNS进行解析获取ip地址
- 根据得到的ip地址进行发送HTTP请求
- 服务器处理HTTP请求并返回响应给浏览器
- 浏览器将HTML解析成 DOM 树
- 将 CSS 解析成 CSSOM 树
- 将 DOM 树和 CSSOM 树构造成 render 树
- JS 根据得到的 render 树能够得到节点的几何属性,计算出每个节点在屏幕中的位置
- 按照计算出来的规则,绘制到屏幕上
为何将 CSS 放到 head 中
在渲染DOM 节点前把CSS加载完,能够避免重复渲染,且如果未先加载 CSS 的情况下,加载出来的页面因为没有样式会很丑。
为何将 js 放到 body 最后
对 js 的解析会阻塞页面渲染。
解决方案(二选一)
- 给其添加 async 属性:async 会在脚本加载之后立即执行。如果是多个,执行顺序和加载顺序无关。async 会在 load 事件之前执行,但并不能确保与 DOMContentLoaded 的执行顺序。
- 给其添加 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 的区别
- CSRF 需要用户先登录网站A,XSS 不需要登录
- CSRF 是利用网站A 本身的漏洞,去请求网站A的api;XSS 是向网站A注入JS代码,然后执行JS里的代码,篡改网站A的内容。(XSS 利用的是站点内的信任用户,而 CSRF 则是通过伪装来自受信任用户的请求来利用受信任的网站 )
同源策略
同源策略是浏览器的安全功能,不同源的客户端在没有明确授权下,不能读写对方资源的。
协议、域名、端口,三者任一不同,则算是跨域。
跨域方式
- JSONP(只支持 get 请求):通过 script 标签的异步加载实现,利用 script 标签不受同源策略的限制。
- 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()
})
- proxy 代理:在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据,利用服务器与服务器交互不会有跨域问题,是完全只靠前端自己独立解决跨域的方式。
devServer: {
proxy:{
"/api": {
target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
ws: false, // 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { //重写匹配的字段,如果不需要在请求路径上,重写为""
"^/api": "/api"
}
},
},
}