一个小白的前端学习记录~

TODO：在这里整点学习路线给学弟学妹

前端基础

数据结构及算法

前端进阶​

笔面试记录

布局（layout）

• 确定内容的大小和位置的算法

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

width

指定content box 宽度，可取值为长度、百分数、auto等，百分数是相对于content box的宽度。

height

指定content box 高度可取值为长度、百分数、auto等，百分数是相对于content box的高度。weight/height都需注意的若使用百分比则其content box需指定宽度/高度否则不生效。

padding

• 当只指定一个值时，该值会统一应用到全部四个边的内边距上。

• 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。

• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。

margin

• 当只指定一个值时，该值会统一应用到全部四个边的外边距上。

• 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。

• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。

border

• border巧用：制作三角形

box-sizing

box-sizing 属性可以被用来调整这些表现:

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

overflow

将其设置为auto，则当内容过多的时候会显示滚动条，否则不显示。而为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

块级元素

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，通常浏览器会在块级元素前后另起一个新行。

• 常见的有body、article、div、main、section、h1-h6、p、ul、li

• display: block

行级元素

一个行内元素只占据它对应标签的边框所包含的空间 行级元素和其他行级元素一起，不使用盒模型中的width、height属性

• 常见的有span、em、strong、cite、section、code等

• display: inline

• block 块级盒子

• inline 行级盒子

• inline-block 本身是行级，可以被放在行级盒子中，可以设置宽高，作为一个整体不会被拆散成多行。

• none 排版时被完全忽略

常规流（Normal Flow）

• 根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流之内（in-flow）。常规流中的盒子，在某种排版上下文中参与布局。

• 行级排版上下文、块级排版上下文、Table排版上下文、Flex排版上下文、Grid排版上下文……

行内格式化上下文（Inline formatting context）

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

• 对于水平书写模式，各个框从左边开始水平地排列

• 对于垂直书写模式，各个框从顶部开始水平地排列

• 只包含行级盒子的容器会创建一个IFC，IFC中排版规则如下

  • 盒子在一行内水平摆放，当一行放不下时会换行显示。

  • text-align 决定一行内盒子的水平对齐

  • vertical-align 决定一个盒子在行内的垂直对齐
• 一个段落实际上是一系列行框的集合，这些行框在块的方向上排列。

块级格式化上下文（Block Formatting Context）

• Block Formatting Context（BFC）

• 盒子从上到下摆放

• BFC内的垂直margin会合并（见前文margin中的margin collapse，外边距重叠）

• BFC内盒子的margin则不会与外面的合并

• BFC 不会与浮动元素重叠

FlexBox

• 一种新的排版上下文

• 可以控制子级盒子的：

  • 摆放流向(flex-direction)

    • 默认（row）：由左往右 →

    • row-reverse：由右往左←

    • column：由上到下 ↓

    • column-reverse：由下到上↑

  • 摆放顺序

  • 盒子高度和宽度

  • 是否允许折行（wrap 、nowrap 、wrap-reverse）
• flex子项会创建一个BFC

重点再讲一下主轴和交叉轴的对齐，以默认的由右往左排列（row），其主轴为水平轴，交叉轴为垂直轴。其中主轴（justify-content）的对齐方式有以下几种（初始值为flex-start ）：

• flex-start 在主轴开始的地方对齐

• flex-end 在主轴结束的地方对齐

• center 在主轴上居中对齐

• space-between 在主轴上两端对齐，中间穿插空间

• space-around 在主轴上两边也加上空白，保持元素占用大小不变

交叉轴的对齐方式如下（初始值为stretch）：

• flex-start：在交叉轴开始的地方对齐

• flex-end：在交叉轴结束的地方对齐

• center：在交叉轴上居中对齐

• stretch：在交叉轴上，拉伸元素以适应容器

• baseline：两边与中间的空白大小相同

如果想给flex中的某个元素搞特殊，那么可以给他设置一个align-self属性，如图

那如果网页拉伸或者缩小，flex容器中的内容会如何变呢？

• 可以通过设置flex-grow在有剩余空间的时候控制伸展能力，flex-shrink在剩余空间不足的时候控制收缩。

Grid布局

• display：grid会使元素生成一个块级的Grid容器

• 可以使用grid-template相关属性将容器划分为网格

  • 也可以用单位 fr 来定义上述网格轨道大小的弹性系数。 每个定义了 fr 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, <flex>) )

  • 想要元素跨越多行/多列？

    • grid line 网格线

    • grid area网格区域

    • 使用grid-template-columns-start/grid-template-columns-end等，可简写为grid-area;

• 首先将容器设置为设置为一个4行2列的grid

#container {
  width: 300px;
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

• 然后将A这个元素,设置从第1个网格行线开始到第3个网格行线,即占两行,列同理占两列,如图

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

可简写为:

.a {
  grid-area:1/1/3/3;
}

• 那么再进行一些更改,将a改为2-4行/列即占据了第2、3行/列,b改为1-3行/列即占据了第1、2行/列

.a {
  grid-area:2/2/4/4;
}
.b {
  grid-area:1/1/3/3;
}

浮动（float）

• 浮动允许文本和内联元素环绕它。具有浮动属性的元素会从网页的正常流动(文档流)中移除

• 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素

position定位

position有如下几种定位类型：

• static：默认值，非定位元素

• relative：相对自身原本位置偏移，不脱离文档流

• absolute：绝对定位，相对非static祖先元素定位

• fixed：相对于视口绝对定位

相对定位(relative)

position:relative

• 在常规流中布局

• 相对于自己本该在的地方进行偏移（top、left、bottom、right）

• 流内其他元素当它未偏移一样照原样布局

绝对定位(absolute)

position:absolute

• 脱离常规流

• 相对于最近的非static祖先定位

  • 比如一个图标，要为它做一个角标，则将图标设置为position:relative，再将其position设置为absolute进行偏移即可实现。

• 不会对流内元素布局造成影响

建议及感想

• 保持好奇心，善用浏览器的开发者工具

• 持续学习，CSS新特性还在不断出现

也算是给自己CSS学习的一个梳理，关于以上布局，主要还是多用，多查，在实践中成长，用多了自然而然的就记住了，然后平时看到感兴趣的前端项目也要进行学习，看看优秀的项目是如何进行布局的。

学习进度

计算机网络

• http (1.0&2.0)

• https

• OSI模型

• tcp/udp

• websocket

• ...

浏览器

• 浏览器输入url发生什么（详解，DNS、渲染过程等）

• 跨域问题与解决方案

• 浏览器缓存策略

• 浏览器工作原理

• 跨页面通信

学习资料

安全问题很常见，会危害

• 用户

• 公司

• 程序员（祭天QAQ）

两个角度看web安全

假如你是一个hacker——攻击

跨站脚本攻击XSS(Cross Site Scripting)

注入恶意脚本，完成攻击，后果：泄露用户隐私等

XSS主要利用了开发者对用户提交内容的盲目信任

特点

• 通常难以从UI上感知（一般都是暗地里执行脚本）

• 窃取用户信息（cookie/token）

• 绘制UI（如弹窗等），诱骗用户点击/填写表单

举个栗子

public async submit(ctx) {
    const {content, id} = ctx.request.body;
    await db.save({
       content,	// 没有对content进行过滤！！
       id
    });
}
public async render(ctx) {
    const { content } = await db.query({
        id: ctx.query.id
    });
    // 没有对content进行过滤！！
    ctx.body = `<div>${content}</div>`;
}

可以看到上述代码，压根没有对用户输入的content内容进行任何过滤。这个时候就可以提交一个<script>alert('xss');</script>脚本，进行攻击

xss攻击也分几大类：Store XSS、Reflected XSS、DOM-based XSS、Mutation-based XSS

Store XSS

• 提交的恶意脚本被存在数据库中

• 访问页面 -> 读数据 == 被攻击

• 危害最大，对全部用户可见

• 如：某个视频网站，上传了恶意脚本被存到数据库中，从此电商网站上便多了一个视频共享账户。

Reflected XSS

• 不涉及数据库

• 从 URL 上攻击，在URL上带上脚本

DOM-based XSS

• 不需要服务器的参与

• 恶意攻击的发起+执行，全在浏览器完成
• 完成注入脚本的地方，是由浏览器来的，这是它与Reflected XSS的不同之处

Mutation-based XSS

• 一个巧妙地攻击方式，利用浏览器的特性

  如果用户所提供的富文本内容通过javascript代码进入innerHTML属性后，一些意外的变化会使得这个认定不再成立：浏览器的渲染引擎会将本来没有任何危害的HTML代码渲染成具有潜在危险的XSS攻击代码。

• 巧妙，最难防御的一种方式,攻击者非常的懂浏览器

Cross-site request forgery（CSRF，跨站伪造请求）

• 在用户不知情的前提下

• 利用用户权限(cookie)

• 构造指定HTTP 请求，进而窃取或修改用户敏感信息

  一个用户访问了一个恶意的页面，这个页面向银行发送一个转账请求，ServerA为银行的服务器，发现这个请求带有用户的cookie，成功

Injection（注入）

• SQL注入：通过SQL参数进行注入

  案例：读取请求字段，直接以字符串的形式拼接SQL语句

  复制

  public async rederForm(ctx) {
      const {username, form_id } = ctx.query;
      const result = await sql.query(`
      	SELECT a, b, c FROM table
      	WHERE username = ${username}
      	AND form_id = ${form_id}
      `);
      ctx.body = renderForm(result);
  } 

  那么攻击者可以传入一个userName：any; DROP TABLE table; ，于是被动删库跑路成就达成√

• 读取+改进行流量攻击

Denial of Service（DOS）攻击

• 通过某种方式(构造特定请求)，导致服务器资源被显著消耗,

• 来不及响应更多请求，导致请求挤压，进而雪崩效应。

• 拓展：正则表达式——贪婪模式

  • 重复匹配时，? /no ? ：满足”一个即可“ / 尽可能多

• 例子：ReDoS:基于正则表达式的DoS

• 贪婪：n次不行 ? n-1次再试试?——回溯
• Distributed Dos （DDOS）

  • 短时间内，来自大量僵尸设备的请求流量，服务器不能及时完成全部请求，导致请求堆积，进而雪崩效应，无法响应新请求。（量大就完事儿了）

  • 特点：

    • 直接访问IP

    • 任意API

    • 消耗大量带宽（耗尽）

中间人攻击（传输层）

• 明文传输

• 信息篡改不可知

• 对方身份未验证

假如你是一一个开发者一一防御

XSS攻击防御

• 永远不要信任用户的提交内容

  • 不要将用户的提交内容直接转换成DOM

• 现成工具

  • 主流框架默认防御XSS（react等）

  • google-closure-library

  • 服务端：DOMPurify

• 用户需求：不讲武德，必须动态生成DOM？

  • new DOMParser();

  • svg：也要扫描，因为其中也可以插入script标签

  • 不要用户自定义跳转链接（或者做好过滤）！

    <a href="javascript:alert('xss')"></a>

同源策略（CSP）

• 协议

• 域名

• 端口

任意一者不同，跨域×

一般的同源请求都是没有问题的，而跨域的不行，CSP允许开发者定义

• 哪些源（域名）是被认为是安全的

• 来自安全源的脚本可以被执行，否则直接抛错

• 对eval + inline script 直接拒绝

• 设置

  • 服务器的响应头部

  复制

   Content-Security-Policy: script-src 'self'; // 同源
   Content-Security-Policy: script-src 'self' https://domain.com

  • 浏览器的响应头部

  复制

  <meta http-equiv=" Content-Security-Policy" content="script-src self"> 

CSRF攻击防御

• Origin + Referrer

• 其他判断【请求来自于合法来源】的方式

  • 先有页面，后有请求

    • if 请求来自合法页面

    • then 服务器接受过页面请求

    • then 服务器可以标识

• iframe攻击：限制Origin是吧，那我同源请求

• 避免GET + POST一起请求，攻击者一石二鸟！

  复制

  // 不要像下面这样将更新+获取逻辑放到同一个GET接口
  public async getAndUpdate(ctx) {
      const { update, id } = ctx.query;
      if (update) {
          await this.update(update);
      }
      ctx.body = await this.get(id);
  }

• SameSite Cookie

  • 限制Cookie domain

  • 页面域名是否匹配

  • 依赖cookie的第三方服务怎么办？

    内嵌一个X站播放器，识别不了用户登录态，发不了弹幕

    Set-Cookie: SameSite=None; Secure ;
• SameSite vs CORS（跨站资源共享）

以上这么多防御CSRF的方法，那么什么是防御CSRF的正确姿势呢？写一个中间件，专门生成这方面的防御。

Injection防御

• 找到项目中查询SQL的地方

• 使用prepared statement

  复制

  PREPARE q FROM 'SELECT user FROM users WHERE gender = ?';
  SET @gender = 'female';
  EXECUTE q USING @gender;
  DEALLOCATE PREPARE q;

• 最小权限原则

  • 所有命令都不要用 sodo || root ×

• 建立允许名单 + 过滤

  • rm 坚决拒绝

• 对URL类型参数进行协议、域名、ip等限制

  • 避免攻击者访问内网

防御DoS

• Code Review （避免贪婪匹配等）

• 代码扫描 + 正则性能测试

• 避免用户提供的使用正则

防御DDos

传输层——防御中间人

搬出大名鼎鼎的HTTPS

• 可靠性：加密

• 完整性：MAC验证

• 不可抵赖性：数字签名

• 拓展：数字签名

  • 私钥（自己藏好）

  • 公钥（公开可见）

  • CA：Certificate Authority 证书机构

  • 数字签名，浏览器内置CA公钥

• 当签名算法不够健壮时：被暴力破解（现在都已比较完善）

HTTP Strict-Transport-Security（HSTS）

• 将HTTP主动升级到HTTPS

静态资源被劫持篡改？对比hash

尾声

• 安全无小事

• 使用的依赖(npm package， 甚至是NodeJS)可能成为最薄弱的一环
• 保持学习心态

总结感想

这节课老师图文并茂的讲解了Web安全相关的很多知识，非常有意思，包括Web攻击的种类、防御方式等

学习进度

• 语言基础与基本类型

• 变量、作用域与内存

• 基本引用类型与集合引用类型