- 职责（做了哪些事情）怎么做的
- 项目有哪些难点，怎么解决的
- 做了哪些优化，对业务提升？对开发效率提升？
常见问题
做了哪些性能优化的事情
做了哪些提效的工具
你的优点？
你的缺点？
项目有哪些亮点？
云诊室
职责（做了哪些事情）
这个项目最初是从一个jquery的项目迁移过来，我负责梳理了业务的梳理及工程的搭建，业务模块的分工及组件的设计。具体是怎么做的：
- 接入eslint stylelint prettier commitlint 等约束团队代码风格
- webpack配置优化项
- 自定义的组件之间的通信方式
- sentry的接入及业务错误日志的上报
-
难点（遇到的问题）
cookie登录的问题 samesite 问题
优化（对业务、对开发效率的提升）
扩展问题
CodeReview
内容
- 代码语法、格式交给stylelint、eslint、premitter来校验，因此我们的review要看用户有没有强制提交
- 函数、变量的命名是否规范
- 函数体的内容长度
- 组件封装的是否具有扩展性
-
Demo
函数this = self 可以改用箭头函数使用
- 数组返回新数组可以直接使用map
- 对象的遍历for-in 可以改为Object.keys
- 最多的是判空处理
- await语句后要catch
- ….
Sentry相关
原理
引出问题JS的错误类型有哪些？我做了什么封装
Sentry的使用
JS的错误分类
CodeReview注意哪些事项
封装一个SDK要注意哪些事情
CSRF
参考链接 前端安全系列之二：如何防止CSRF攻击
什么是CSRF攻击？
第三方网站利用用户登录过的cookie信息攻击，举个例子，在b.com网站里登录过了，保存了cookie登录信息，这时候在a.com里内含有b.com的 img标签或者a标签链接 或者是ifrme链接或者是fom表单，这时候就会对b.com 发起攻。
那么如何避免csrf攻击呢？
什么是XSS攻击？
Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
Cookie
定义
当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
生命周期
- 会话期 Cookie 是最简单的 Cookie：浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie 也会被保留下来，就好像浏览器从来没有关闭一样，这会导致 Cookie 的生命周期无限期延长。
持久性 Cookie 的生命周期取决于过期时间（Expires）或有效期（Max-Age）指定的一段时间。
限制访问 Cookie
标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端
JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的cookie
Cookie 的作用域
Domain 和 Path 标识定义了Cookie的作用域：即允许 Cookie 应该发送给哪些URL
Domain 指定了哪些主机可以接受 Cookie。如果不指定，默认为 origin，不包含子域名。如果指定了Domain，则一般包含子域名。因此，指定 Domain 比省略它的限制要少。但是，当子域需要共享有关用户的信息时，这可能会有所帮助。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）
- Path 标识指定了主机下的哪些路径可以接受 Cookie（该 URL 路径必须存在于请求 URL 中）。以字符 %x2F (“/“) 作为路径分隔符，子路径也会被匹配。
SameSite
- 默认属性为Lax，即在img或者iframe或者form表单里默认不会带入cookie信息，但是如果是一个打开的新链接则会带上cookie
- Strict ： 即任何情况都不会带入
- None: 所有情况都会发送，但是需要同时设置Secure
官方解释
- None。浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写。
- Strict。浏览器将只在访问相同站点时发送 cookie。（在原有 Cookies 的限制条件上的加强，如上文 “Cookie 的作用域” 所述）
Lax。与 Strict 类似，但用户从外部站点导航至URL时（例如通过链接）除外。 在新版本浏览器中，为默认选项，Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到URL时才会发送。如 link 链接
如何在跨域请求里带上cookie
前端请求时在request对象中配置”withCredentials”: true；
- 服务端在response的header中配置”Access-Control-Allow-Origin”, “http://xxx:${port}“;
- 服务端在response的header中配置”Access-Control-Allow-Credentials”, “true”
- SameSite同时设置为none
网络
OSI七层模型
http2.0
websocket
难点1：聊天室的功能按钮及底部接诊业务复杂，我将其封装成无副作用的函数
难点2：多人协作，为防止难以维护及代码冲突，组件之间的通信，我采用provide/inject 依赖注入的模式来进行通信，自定义写了个任意组件之间通信的模块（通过递归name实现）
WebRTC视频SDK
扩展问题
发布一个npm包需要注意哪些
若有收获，就点个赞吧
0 人点赞
