# Lidemy 面試題組

### 01. 請解釋一下什麼是盒模型 box model ，有哪些需要注要注意的地方？

:::spoiler
1. 要能講出由內到外：content padding border margin
2. 要能講出 box-sizing: content-box 跟 border-box 的差別
3. 在實務上常會看到 * { box-sizing: border-box }
4. 要不要順便帶到 display 那幾種我覺得都可以啦
5. 要不要順便提 margin collapse 我也覺得都行
:::

### 02. 請問 HTTP Method 中 GET 與 POST 的差異為何？
:::spoiler
今天的題目可以回答的深淺上下限滿大的，一般基本的回答就是比較偏「實際使用上的回答」：

1. GET 通常是拿東西，POST 是做一些操作
2. GET 的參數帶在 url query string，POST 帶在 request body
3. 承上，GET 因為帶在網址上所以比 POST 不安全
4. 承第二點，GET 因為帶在網址上所以有長度限制

想要回答得更猛就是直接看 RFC：https://tools.ietf.org/html/rfc7231#section-4
:::

### 03. 什麼是 cookie ？什麼是 session ？
:::spoiler
1. 要提到 HTTP 是無狀態的（stateless）
2. cookie 是瀏覽器儲存資料的一個地方，可以從 server 透過 Set-Cookie 設定，在發 request 時會透過 Cookie header 帶回去 server
3. session 就是有狀態的一段關係，最簡單的方式就是透過 cookie 來幫忙帶資料，就可以讓 request 之間建立關聯
4. 敏感資料可以存在 server，叫做 session data，利用 session id 存在 cookie 裡面來做關聯
5. 也可以把 session data 直接寫在 cookie 裡面，叫做 cookie-based session，這樣的 cookie 內容就會是加密過的，因為有敏感資訊

其他請複習 session 與 cookie 三部曲
:::

### 04. 請問什麼是 CSRF ？該如何防範？
:::spoiler
1. csrf 可以作用最大的原因是你從第三方去對某網域做操作的時候，瀏覽器會幫你把這個網域的 cookie 一起帶上去，從伺服器看來就等於是使用者本人在操作，而防禦方式都是圍繞在怎麼解決這個狀況
2. 有一種方法是如果不是用 cookie 做身份驗證，例如說22周作業用 local storage 裡的東西做驗證，那就不會有 csrf 的問題
3. 或是 otp，常見的簡訊驗證碼，多了第二道手續
4. 不登入也是一種，不是登入狀態就不會怎樣
5. samesite cookie 則是靠瀏覽器幫你防禦，只有在同個 site 的時候會帶 cookie
6. csrf token 也是多一道手續，攻擊者沒辦法拿到這東西所以沒辦法在 header 裡面放值

幾個要修正的點：

1. Cookie 跟 session 要分清楚
2. Samesite 是不是 google 發明的不重要，重點是 chrome 會預設 samesite 屬性，這才是重點
3. 不要舉什麼用 get 刪除資料的例子，那個只是方便講解而已，但技術上本來就不該這樣做，舉 post 改資料的會比較好
4. CSRF 通常都是改資料，做某些操作，而不是取得資料或是偷資料
:::

### 05. 請介紹一下 BOM 與 DOM
:::spoiler
1. BOM 是 Browser Object Model，查了一下看似只是個沒有詳細定義的名詞，就是瀏覽器提供給 JS 的各種東西，透過 window 來存取，例如說什麼 location, navigator 之類的
2. DOM 是 Document Object Model，在 JS 裡面透過 document 可以取得，是可以讓你透過程式去改變 document 的一個 API
這邊我也不是很熟，查了一下發現 BOM 跟我們以前提過的 Web APIs 看起來差不多，都是瀏覽器提供給 js 的東西

https://javascript.info/browser-environment

https://frontendmasters.com/books/front-end-handbook/2017/learning/dom.html

https://stackoverflow.com/questions/2213594/whats-the-difference-between-the-browser-object-model-and-the-document-object-m
:::

### 06. 請問 process 跟 thread 的差別是什麼？
:::spoiler
可以再次複習這篇好文：https://developers.google.com/web/updates/2018/09/inside-browser-part1

1. 基本上一個應用程式在執行的時候就會產生一個程序（Process）
2. 一個程序底下可以有多個執行緒（Thread）
3. Process 之間基本上資料是不共享的，而同個 Process 底下的 thread 們則共享資料
4. 一個 CPU 同時間只能執行一個任務，但又不能一直執行同一個 process 的任務，所以會來回在不同 process 之間切換，這就叫做 context switch
5. 以瀏覽器為例，Chrome 是一個 process，然後還會幫每一個 tab 都產生一個 process，因此一個分頁掛掉不會影響到其他的
6. tab 的 process 底下又會有不同 thread 來做事，例如說負責渲染的 UI thread，負責網路的 network thread 等等
:::

### 07. 請問什麼是 CORS issue ？會造成這問題的原因是什麼，又該如何解決？
:::spoiler
1. CORS 跟 same origin policy 有關，是為了安全性所以瀏覽器禁止跨來源的存取
2. server 加上正確的 header 是唯一正解
其他請參考 CORS 完全手冊
:::

### 08. 什麼是 SQL injection ？該如何防範？
:::spoiler
1. SQL Injection 就是攻擊者可以刻意操弄部分 query 內容，跟原本的合在一起而產生具有新的意義的 query，進而達成攻擊
2. 防範方式是跳脫字串或是用 Prepared statement
3. 也可以提到詳細的攻擊方法，例如說利用 union 來拿資料或者是 blind SQL injection 是什麼
:::

### 09. 在 JavaScript 中宣告變數有三個關字可以使用， var, let, const ，請問這三種的差異為何？
:::spoiler
1. 其實除了這三個以外，還有一種方式是都不加關鍵字的，這種的會把變數變成全域變數，例如說 a = 3
2. var 的 scope 是 function，可以重新賦值，需注意 hoisting
3. let 的 scope 是 block，可以重新賦值，有 hoisting + TDZ
4. const 的 scope 是 block，不能重新賦值但可以更改內容，宣告時就要給初始值，有 hoisting + TDZ
:::

### 10. 請問在資料庫裡面什麼是一對多（one-to-many）關係，什麼是多對多關係（many-to-many），table 又該如何設計？請與例子說明
:::spoiler
1. 一對多關係就像是分類與文章，一個分類底下可以有多篇文章，然後每篇文章只會有一個分類，這是在資料庫裡面我們就會在文章的 table 裡存一個分類的 id，把這兩張表格關連起來
2. 多對多像是文章與 tag，一個 tag 底下可以有很多文章，一篇文章也可以有多個 tag，這時候我們就需要另一個專門存文章跟 tag 關聯的表格，內容是文章 id 跟 tag id，就可以藉由這張表格知道關聯

舉例來說：
post_id tag_id
1 10
1 12
就代表 id 是 1 的 post 有 id 是 10 12 這兩個 tag
:::

### 11. 請問 XSS 是什麼？該如何防範？
:::spoiler
1. XSS 全名跨站式腳本攻擊，攻擊者可以在你的網站上執行 JS
2. 分成三種：Stored XSS, Reflected XSS 跟 DOM-based XSS
3. 在前端 render 而造成的 XSS 就是 DOM-based XSS
4. 從後端 render，然後資料是從資料庫來的就叫做 Stored XSS
5. 從後端 render，會直接反映使用者的輸入的就叫 Reflected XSS
6. 防範方式：過濾使用者的輸出，進行編碼，不要當成 JS 執行
7. 也可以用 CSP 阻止使用者執行 inline script
8. 如果一定要輸出 HTML，可以用 DOMPurify 之類的 library 來過濾
:::

### 12. 從網址輪入 google.com 按下 enter 到看到頁面，請問這中間發生了什麼事？
:::spoiler
可以講到的很多，講自己會的就好，像是：

1. DNS 查詢
2. request response 來回的過程
3. 瀏覽器的顯示

想回答更多就是針對每個細節再下去講，例如說：

1. DNS 查詢具體上是怎麼做的，是分成一層一層的來查詢
2. tcp 三次握手
3. 瀏覽器渲染畫面的流程細節，解析 html 產生 dom，解析 css 產生 cssom，結合產生 render tree 然後 flow，paint 之類的
:::

### 13. 請問 CSS 怎麼做垂直水平置中？請至少提供一個方法
:::spoiler
1. flexbox 搭配 align-items: center + justify-content: center;
2. position absolute/fixed + top left 50% + transform: translate(-50%, -50%)
3. 其他請自行 google
:::

### 14. 請問 cookie, localStorage 與 sesstionStorage 的差別是什麼？
:::spoiler
1. cookie 是瀏覽器儲存資訊的地方，可以由 server 透過 Set-Cookie header 指定要存什麼，會隨著 request 一起被帶給 server
2. localStorage 也可以存資訊，只能存字串，不會隨著 request 被帶給 server
3. sessionStorage 與 localStorage 類似，差別在於分頁關掉之後儲存的資料就不見了，不會被一直保留住
:::