update

fusanqiang · Jul 28, 2020 · 7d4553f · 7d4553f
1 parent db2d416
commit 7d4553f
Show file tree

Hide file tree

Showing 42 changed files with 835 additions and 124 deletions.
diff --git a/.vuepress/header.json b/.vuepress/header.json
@@ -220,11 +220,23 @@
         ],
         [
           "http/330",
-          "如何避免 CDN 为 PC 端缓存移动端页面"
+          "如何避免 CDN 为 PC 端缓存移动端页面⭐️"
         ],
         [
           "http/360",
           "在 node 端如何向服务器上传文件"
+        ],
+        [
+          "http/363",
+          "什么情况下会发送 OPTIONS 请求⭐️"
+        ],
+        [
+          "http/364",
+          "CORS 如果需要指定多个域名怎么办⭐️"
+        ],
+        [
+          "http/366",
+          "既然 cors 配置可以做跨域控制，那可以防止 CSRF 攻击吗 ⭐️"
         ]
       ]
     },
@@ -370,7 +382,7 @@
         ],
         [
           "network/135",
-          "ssh 的原理是什么"
+          "ssh 的原理是什么⭐️"
         ],
         [
           "network/174",
@@ -387,6 +399,10 @@
         [
           "network/184",
           "tcp 中 time_wait 堆积过多会有什么问题，为什么它超时时间这么长"
+        ],
+        [
+          "network/365",
+          "localhost 与 127.0.0.1 有什么区别⭐️"
         ]
       ]
     },
@@ -856,6 +872,14 @@
         [
           "server/353",
           "如何实现一个 timeout 的中间件"
+        ],
+        [
+          "server/363",
+          "什么情况下会发送 OPTIONS 请求⭐️"
+        ],
+        [
+          "server/368",
+          "如何获取当前系统中的在线用户数 (并发用户数)⭐️"
         ]
       ]
     },
@@ -938,7 +962,7 @@
         ],
         [
           "css/179",
-          "如何使用 css 写一个有 3D 效果的立方体"
+          "如何使用 css 写一个有 3D 效果的立方体⭐️"
         ],
         [
           "css/185",
@@ -970,15 +994,15 @@
         ],
         [
           "css/308",
-          "如何实现左右固定，中间自适应布局"
+          "如何实现左右固定，中间自适应布局⭐️"
         ],
         [
           "css/309",
           "如何实现表格单双行条纹样式⭐️"
         ],
         [
           "css/311",
-          "简述下 css specificity"
+          "简述下 css specificity⭐️"
         ],
         [
           "css/317",
@@ -1018,7 +1042,11 @@
         ],
         [
           "css/342",
-          "伪类与伪元素有什么区别"
+          "伪类与伪元素有什么区别⭐️"
+        ],
+        [
+          "css/369",
+          "css 如何匹配前N个子元素及最后N个子元素⭐️"
         ]
       ]
     },
@@ -1047,6 +1075,10 @@
           "dom/215",
           "input 中监听值的变化是在监听什么事件⭐️"
         ],
+        [
+          "dom/269",
+          "CSP 是干什么用的了⭐️"
+        ],
         [
           "dom/286",
           "prefetch 与 preload 的区别是什么⭐️"
@@ -1058,6 +1090,10 @@
         [
           "dom/315",
           "在浏览器中如何监听剪切板中内容⭐️"
+        ],
+        [
+          "dom/367",
+          "js 动画和 css 动画那个性能比较好"
         ]
       ]
     },
@@ -1259,7 +1295,7 @@
         ],
         [
           "js/361",
-          "js 如何全部替代一个子串为另一个子串"
+          "js 如何全部替代一个子串为另一个子串⭐️"
         ]
       ]
     },
@@ -1634,7 +1670,7 @@
         ],
         [
           "前端工程化/192",
-          "什么是 Open Graph 协议，用来做什么"
+          "什么是 Open Graph 协议，用来做什么⭐️"
         ],
         [
           "前端工程化/193",
@@ -1915,6 +1951,10 @@
         [
           "open/264",
           "当一个排期五天的任务需要在两天后上线如何解决"
+        ],
+        [
+          "open/340",
+          "你做前端有多少时间花在写 css 上"
         ]
       ]
     }

diff --git a/Readme.md b/Readme.md
@@ -27,6 +27,12 @@
 ### [DevOps](https://q.shanyue.tech/devops/)
 ### [开放式问题](https://q.shanyue.tech/open/)
 
+## 大厂内推
+
++ [阿里-供应链平台事业部-前端-校招/社招](https://q.shanyue.tech/infer/ali-ascp.html)
++ [字节-视频架构组-前端-社招](https://q.shanyue.tech/infer/toutiao-media-arch.html)
++ [腾讯-CSIG智慧零售-前端-社招](https://q.shanyue.tech/infer/tencent-csig.html)
+
 ## 大厂面经
 
 ### 阿里
@@ -53,12 +59,6 @@
 
 更多面经请转至 [大厂面经大全](https://q.shanyue.tech/interviews/fe.html)
 
-## 大厂内推
-
-+ [阿里-供应链平台事业部-前端-校招/社招](https://q.shanyue.tech/infer/ali-ascp.html)
-+ [字节-视频架构组-前端-社招](https://q.shanyue.tech/infer/toutiao-media-arch.html)
-+ [腾讯-CSIG智慧零售-前端-社招](https://q.shanyue.tech/infer/tencent-csig.html)
-
 ## 大厂内推与大厂面经推送
 
 关注公众号【互联网大厂招聘】，将持续推送大厂的面试经验与大厂的内推，直达招聘负责人或团队负责人
@@ -67,7 +67,7 @@
   <img src="http://mmbiz.qpic.cn/mmbiz_jpg/w7L7YMmnfhic7ooecF6PU5cGlHoakmTNBwKXf6VCC5TfAiagrmiahQ2kFxYLibPYgicicWsEgAFwsOrrOS16Bw2eml0w/0" loading="lazy" width="260">
 </div>
 
-如果你想在网站及公众号上发布招聘，请添加我的微信 `shanyue-94`，我将与你在以下几个方面进行讨论，并共同拟定模拟面试题在我公众号上发布招聘信息
+如果你想在网站及公众号上发布招聘，请添加我的微信 `shanyue94`，我将与你在以下几个方面进行讨论，并共同拟定模拟面试题在我公众号上发布招聘信息
 
 1. 业务描述，及其业务发展与前景
 1. 职位描述，及其技术侧重于偏向

diff --git a/base/Readme.md b/base/Readme.md
@@ -90,4 +90,8 @@
 + [【Q329】什么是一致性哈希，可以解决什么问题](data-structure/332.html)
 + [【Q343】如何查找地图中某个点两公里内的餐厅](data-structure/346.html)
 + [【Q344】如何列出所有已合并到 master 的分支并删除](git/347.html)
-+ [【Q356】在 node 端如何向服务器上传文件](http/360.html)
++ [【Q356】在 node 端如何向服务器上传文件](http/360.html)
++ [【Q358】什么情况下会发送 OPTIONS 请求](http/363.html)
++ [【Q359】CORS 如果需要指定多个域名怎么办](http/364.html)
++ [【Q360】localhost 与 127.0.0.1 有什么区别](network/365.html)
++ [【Q361】既然 cors 配置可以做跨域控制，那可以防止 CSRF 攻击吗 ](http/366.html)
diff --git a/base/http/328.md b/base/http/328.md
@@ -12,9 +12,9 @@
 
 - `Access-Control-Allow-Origin`
 - `Access-Control-Allow-Methods`
-- `Access-Control-Expose-Headers`
 - `Access-Control-Allow-Headers`
-- `Access-Control-Max-Age`
 - `Access-Control-Allow-Credentials`
+- `Access-Control-Expose-Headers`
+- `Access-Control-Max-Age`
 
 关于如何写一个 `cors` 的中间件可以参考 [koajs/cors](https://github.com/koajs/cors)
diff --git a/base/http/330.md b/base/http/330.md
@@ -6,5 +6,47 @@
  欢迎在 Issue 中交流与讨论: [Issue 330](https://github.com/shfshanyue/Daily-Question/issues/330) 
 :::
 
+::: tip Author 
+回答者: [shfshanyue](https://github.com/shfshanyue) 
+:::
+
+如果 PC 端和移动端是一套代码则不会出现这个问题。**这个问题出现在 PC 端和移动端是两套代码，却共用一个域名。**
+
+使用 `nginx` 配置如下，根据 UA 判断是否移动端，而走不同的逻辑 (判断UA是否移动端容易出问题)
+
+``` conf
+location / {
+    // 默认 PC 端
+    root /usr/local/website/web;
+    
+    # 判断 UA，访问移动端
+    if ( $http_user_agent ~* "(Android|webOS|iPhone|iPad|BlackBerry)" ){ 
+        root /usr/local/website/mobile;
+    }
+ 
+    index index.html index.htm;
+}
+```
+
+解决方案通常使用 `Vary` 响应头，来控制 CDN 对不同请求头的缓存。
+
+**此处可以使用 `Vary: User-Agent` ，代表如果 User-Agent 不一样，则重新发起请求，而非从缓存中读取页面**
+
+``` txt
+Vary: User-Agent
+```
+
+当然，`User-Agent` 实在过多，此时缓存失效就会过多。
+
+## 简答
+
+使用 `Vary: User-Agent`，根据 UA 进行缓存。
+
+``` txt
+Vary: User-Agent
+```
 
+但最好不要出现这种情况，PC 端和移动端如果是两套代码，建议用两个域名，理由如下
 
+1. `nginx` 判断是否移动端容易出错
+1. 对缓存不友好
diff --git a/base/http/363.md b/base/http/363.md
@@ -0,0 +1,16 @@
+# 什么情况下会发送 OPTIONS 请求
+
+
+
+::: tip Issue 
+ 欢迎在 Issue 中交流与讨论: [Issue 363](https://github.com/shfshanyue/Daily-Question/issues/363) 
+:::
+
+::: tip Author 
+回答者: [hedongxiaoshimei](https://github.com/hedongxiaoshimei) 
+:::
+
+[搬运地址](https://blog.csdn.net/kahhy/article/details/81563063)
+1:请求的方法不是GET/HEAD/POST
+2:POST请求的Content-Type 异常
+3:请求设置了自定义的header字段
diff --git a/base/http/364.md b/base/http/364.md
@@ -0,0 +1,91 @@
+# CORS 如果需要指定多个域名怎么办
+
+
+
+::: tip Issue 
+ 欢迎在 Issue 中交流与讨论: [Issue 364](https://github.com/shfshanyue/Daily-Question/issues/364) 
+:::
+
+::: tip Author 
+回答者: [shfshanyue](https://github.com/shfshanyue) 
+:::
+
+`CORS` 通过控制 `Access-Control-Allow-Origin` 控制哪些域名可以共享资源，取值如下
+
+``` bash
+Access-Control-Allow-Origin: <origin> | *
+```
+
+其中 `*` 代表所有域名，`origin` 代表指定特定域名，那如何设置多个域名了？
+
+此时需要通过代码实现，**根据请求头中的 `Origin` 来设置响应头 `Access-Control-Allow-Origin`**，那 Origin 又是什么东西？
+
+## 请求头: Origin
+
+并不是所有请求都会自动带上 `Origin`，在浏览器中带 `Origin` 的逻辑如下
+
+1. 如果存在跨域，则带上 `Origin`，值为当前域名
+1. 如果不存在跨域，则不带 `Origin`
+
+逻辑理清楚后，关于服务器中对于 `Access-Control-Allow-Origin` 设置多域名的逻辑也很清晰了
+
+1. 如果请求头不带有 `Origin`，证明未跨域，则不作任何处理
+1. 如果请求头带有 `Origin`，证明跨域，根据 `Origin` 设置相应的 `Access-Control-Allow-Origin: <Origin>`
+
+使用伪代码实现如下:
+
+``` js
+// 获取 Origin 请求头
+const requestOrigin = ctx.get('Origin');
+
+// 如果没有，则跳过
+if (!requestOrigin) {
+  return await next();
+}
+
+// 设置响应头
+ctx.set('Access-Control-Allow-Origin', requestOrigin)
+```
+
+## Vary: Origin
+
+此时可以给多个域名控制 CORS，但此时假设有两个域名访问 `static.shanyue.tech` 的跨域资源
+
+1. `foo.shanyue.tech`，响应头中返回 `Access-Control-Allow-Origin: foo.shanyue.tech`
+1. `bar.shanyue.tech`，响应头中返回 `Access-Control-Allow-Origin: bar.shanyue.tech`
+
+看起来一切正常，但如果中间有缓存怎么办？
+
+1. `foo.shanyue.tech`，响应头中返回 `Access-Control-Allow-Origin: foo.shanyue.tech`，被 CDN 缓存
+1. **`bar.shanyue.tech`，因由缓存，响应头中返回 `Access-Control-Allow-Origin: foo.shanyue.tech`，跨域出现问题**
+
+此时，`Vary: Origin` 就上场了，代表为不同的 `Origin` 缓存不同的资源
+
+## 总结 (简要答案)
+
+CORS 如何指定多个域名？
+
+**根据请求头中的 `Origin` 来设置响应头 `Access-Control-Allow-Origin`**，思路如下
+
+1. 总是设置 `Vary: Origin`，避免 CDN 缓存破坏 CORS 配置
+1. 如果请求头不带有 `Origin`，证明未跨域，则不作任何处理
+1. 如果请求头带有 `Origin`，证明浏览器访问跨域，根据 `Origin` 设置相应的 `Access-Control-Allow-Origin: <Origin>` 
+
+使用伪代码实现如下
+
+``` js
+// 获取 Origin 请求头
+const requestOrigin = ctx.get('Origin');
+
+ctx.set('Vary', 'Origin')
+
+// 如果没有，则跳过
+if (!requestOrigin) {
+  return await next();
+}
+
+// 设置响应头
+ctx.set('Access-Control-Allow-Origin', requestOrigin)
+```
+
+>  相关问题：[如何避免 CDN 为 PC 端缓存移动端页面](https://github.com/shfshanyue/Daily-Question/issues/330)
diff --git a/base/http/366.md b/base/http/366.md
@@ -0,0 +1,16 @@
+# 既然 cors 配置可以做跨域控制，那可以防止 CSRF 攻击吗 
+
+
+
+::: tip Issue 
+ 欢迎在 Issue 中交流与讨论: [Issue 366](https://github.com/shfshanyue/Daily-Question/issues/366) 
+:::
+
+::: tip Author 
+回答者: [shfshanyue](https://github.com/shfshanyue) 
+:::
+
+**对 CORS 一点用也没有**
+
+1. **`form` 提交不通过 `CORS` 检测**，你可以在本地进行测试
+1.  即使通过 `xhr` 及 `fetch` 进行提交被 CORS 拦住，**但是对于简单请求而言，请求仍被发送**，已造成了攻击
diff --git a/base/http/Readme.md b/base/http/Readme.md
@@ -31,4 +31,7 @@
 + [【Q301】base64 由哪64个字符构成](303.html)
 + [【Q325】关于 cors 的响应头有哪些](328.html)
 + [【Q327】如何避免 CDN 为 PC 端缓存移动端页面](330.html)
-+ [【Q356】在 node 端如何向服务器上传文件](360.html)
++ [【Q356】在 node 端如何向服务器上传文件](360.html)
++ [【Q358】什么情况下会发送 OPTIONS 请求](363.html)
++ [【Q359】CORS 如果需要指定多个域名怎么办](364.html)
++ [【Q361】既然 cors 配置可以做跨域控制，那可以防止 CSRF 攻击吗 ](366.html)