演習課 WEEK11


Posted by s103071049 on 2021-07-20

P1 你知道什麼是雜湊(Hash function)
P1 你知道什麼是加密(Encryption)
P1 你知道雜湊與加密的差別
P1 你知道什麼是 SQL Injection 以及如何防範
P1 你知道什麼是 XSS 以及如何防範
P1 你知道為什麼儘管前端做了驗證,後端還是要再做一次驗證
P2 你知道什麼是 CSRF 以及如何防範

第十一週、QA

Q1 : CKEditor 預設有黑名單會過濾 script tag,為了讓文章顯示還是渲染 html 的效果,是否就不能使用 htmlspecialchars ?

A1 : CKEditor (所見即所得的編輯器),真的要顯示 HTML 不能用 htmlspecialchars。可以透過 library 內建進行過濾、自行找相對應的 library 過濾,關鍵字 : php sanitize htmlhtml filter


Q2 : 既然 POST 比 GET 安全(資訊不會暴露在網址上),為什麼不要全部使用 POST?

A2 : 首先,沒辦法全部都使用 POST。舉例來說,要進去 FB,輸入 FB.com 按 enter,你就是發一個 GET 的 request 到 FB。至少一定會有一個 request 是 GET 不然進不去。接著,對一些公開資訊來說,沒必要用到 POST。最後 GET 、POST 語意不同,GET 是拿甚麼東西回來,POST 是要送甚麼東西出去。今天只是看一個基本的網頁(如: blog),換頁用 POST 除了沒必要,另外當你 POST 進去後你的網址要是甚麼,GET 可以把狀態 ?id=1 放到 url 上面,POST 也不是不行,但考慮語意的話 GET 略勝。(補充、有的時候沒有帶資料過去,用 GET 也沒什麼不好。)


Q3 : 我把做留言板的 api 的 php 檔都丟掉叫 api 的資料夾,然後想到上一層拿 conn 還有 utils 等等,但 ../的路徑不管用,不知道是什麼原因 ?

A3 : php require 機制跟你想的不同。檔案相對路徑是當前工作目錄。今天訪問 index.php 你 require 進來檔案,require 的根目錄就是 index.php 的根目錄。

和哪一個檔案 require 他,有關係 ! 解決方式、絕對路徑
dirname取得絕對路徑
PHP require路径问题之研究

MyProject
 -index.php
 -core
 --- config.php
 -Model
 --- DBHelper.php

index.php
require 'core/config.php' (O)

config.php
require '../Model/DBHelper.php' (X)

因為現在是 index.php 去 require 這個檔案,所以他找的是 index.php 的上一層

Q4 : 想了解 htmlspecialchars 放在 form 的 action 跟放在每個取出的 $row 有什麼差異?

A4 : PHP 收資料可以有兩種做法。為甚麼我們選擇的是第一種而非第二種 ?

1. DB 存原始資料,輸出做 escape
2. DB 存 escape 過的資料,輸出的時候不做事

正解:假如不是放在 html 會變得很奇怪!

缺點一:假設我要去 DB 查資料,我用 <script> 是查不到,必須要手動 escape 成&lt;script&gt;,才能在 DB 查到我有哪些這樣的資料。

缺點二:資料庫不只給瀏覽器用,還會給手機。假設用手機串同樣一支 API,輸出的資料就會是 &lt;script&gt;,除非輸出的時候再根據要給的對象再做還原。感覺有點怪,還不如存原始碼,輸出的時候依據不同的 client 輸出不同的格式。


Q5 : 通常在一個 domain 底下如果有不同的網站,會怎麼去把他們的 session 機制給分開呢?假如駭客想盜取abc 的部落格,他現在留言板註冊 abc 的帳號,登入後就可以進到 abc 的部落格了。

angela.tw/blog 
=> a

angela.tw/board 因為兩個的 cookie 一樣,所以我也可以在這底下做事情
=> a

A5 :

解法一、變成兩個不同的 subdomain

blog.angela.tw
board.angela.tw

解法二、用不同的 path
cookie 其實有不同的參數可以設,一個是 domain,另一個是 path
session_set_cookie_params

blog.angela.tw
=> /blog

board.angela.tw
=> /board

Q6 : 補問一個有點久之前的自我檢測 關於 localhost 與 127.0.0.1 的區別所在?
A6 : 想考大家的:localhost 為甚麼查的到。127.0.0.1 保留給指射到自己機器的 ip、

/etc/hosts
打開會發現裡面有一個紀錄叫做 localhost,裡面 localhost 預設指向 127.0.0.1
當然,可以將它改成其他的,他就會指向其他


CSRF

先不談 samesite,因為她很新且對 CSRF 有重大影響。這邊先假設沒有 samesite。

甚麼是 CSRF ?

正常狀態、

登入 angela.tw/board
=> cookie angela.tw 裡面會存 PHPSESSID = 123 (cookie 存在 angela.tw 底下)

今天點進 angla.tw/delete?id=1 => 瀏覽器發 GET request 到 angla.tw/delete?id=1
=> 將 angela.tw 相關的 cookie 帶上去 => cookie PHPSESSID = 123

後端用 $SESSION 拿資料且確定是我本人 => 資料刪除

惡意連結、

attack.com (純前端網站)

<html>
  <img src="https://anglea.tw/delete?id=1">
</html>
  1. 受害人點了 attack.com
  2. 受害人造訪 huli.tw,
  3. 瀏覽器發 request 到 https://anglea.tw/delete?id=1 ,會將相對應的 cookie 給帶上去 cookie PHPSESSID = 123
    (因為瀏覽器看到有圖片會載入這個圖片)
  4. 後端用 $_SESSION 也會拿到東西 (因為有帶 cookie)

我去 attack.com 但卻刪了 anglea.tw 的東西 => CSRF (Cross Site Request Forgery)

甚麼是請求偽造 ?

因為瀏覽器會自動把 cookie 帶上去,所以我的後端區別不出這兩個 request 的差異,所以就將我的文章給刪掉了 !

Cookie 有很多屬性:httpOnly / SameSite / security / path / domain

samesite 可以決定在不同的 site,他會不會將 cookie 帶上來。但不是所有瀏覽器都支援。
官方建議,防 csrf 除了 SameSite 外仍要使用傳統方式

SameSite:
1. None(都帶)
2. Strict(同一個 site 才會帶 cookie)
===
3. Lax () (chrome 的預設為 lax)
對於網頁跳轉會帶上 site
top-level navigation 可以理解為整個視窗的換頁

Q7 : 作業裡面的刪除功能是用 GET 的方式將資料刪掉,然後在後端做驗證,是不是就會有 CSRF 安全性的問題?
A7 : 是

Q8 : 想請問如果依照老師 week11 的範例做,目前有辨法防禦 CSRF 嗎?
A8 : 這整個課程的作業相關都會有 CSRF 的問題。


Q9 : 實作網站時,我們都是從前台開始寫,想請問從前台或是後台開始會有什麼差異嗎?
A9 : 個人喜好
後台開始寫,就可以先將基本的 CRUD 實做出來。要驗證結果只要看資料庫裡面有無資料就可以,後台開始只要看資料庫就知道功能有無做對,透過做好的資料讓前台顯示出來。


Q10 : 網頁的呈現可以從後端拿資料來顯示,或是串 api 動態顯示,兩者在實際應用上的使用時機?差異?
A10 : 本質上差異:從後端 render 資料與從前端 render 資料

差別一、SEO 不同
差別二、是否要換頁,要換頁瀏覽器就會有一瞬間白色喔!!

後端拿資料 : 
1. GET angela.tw/posts/1
2. response <h1>文章內容一</h1><p></p>
3. 要換頁就要再發一個 request 到後端去 GET angela.tw/posts/2
4. response <h1>文章內容二</h1><p></p>

搜尋引擎 看到會是 <h1>文章內容一</h1><p></p> <h1>文章內容二</h1><p></p>
==========
串 api 動態顯示 :
1. GET angela.tw/posts/1
2. response <html><script src='index.js'></script></html>
3. 在 js 裡面再去拿後端資料 fetch('https://angela.tw/api/posts/1')
4. add DOM

要換頁就是發一個 api 到後端,然後動態調整網頁,東西都還在根本沒有換頁也不會看到白色畫面。

搜尋引擎 看到會是 <html><script src='index.js'></script></html>,所以會不知道網頁有甚麼東西

Q11 : 實作部落格的 read-more 和文章列表點出來的頁面如果是一樣的,那請問老師,要開兩個頁面,還是直接用兩個按鈕,一個回首頁一個回列表呢? 謝謝

index.php

read more => article.php?id=1

list.php
read more => article.php?id=1
====

article.php
back (會根據在哪邊回到不同的地方)

A11 : $_SERVER['HTTP_REFERER'] will give you the referrer page's URL if there exists any

referer (一個 http request header 會告訴你你從哪邊來,所以可以透過這個 referer 知道從哪裡過來的)

back <a href="<?php echo $_SERVER['HTTP_REFERER']?>"></a>
可以利用 PHP 的這套工具回到上一頁

問題、這樣有點怪,應該要做判斷,從自己的 domain 來就讓它回到原本的地方,不是的話就回到文章列表。

google.com => article.php?id=1
$_SERVER['HTTP_REFERER']: google.com

所以要定義我的 back 究竟是瀏覽器的 back 還是部落格的 back

參考資料:
referer
php referer


Q12:發現如果要用 js 新增 html,然後裡面有 php 的程式碼會報錯,想請問老師有什麼比較好的寫法嗎?如果沒有把 php 的資料變成 Json 是不是就不行使用了呢?

A12:因為她不是處理 php 的環境

php 的程式碼是怎麼執行的 ?

browser => request => server => php 處理 => response (純html) => browser

browser => js => append('<?php?>') 這邊沒有人來處理 php 的語法,因為你在前端,所以就是一個純文字

想解決的事情就是可以前端做一些事情跟後端拿資料嗎 ?

A : 一定要走這個流程進行前後端溝通 browser => request => server => php 處理 => response (純html) => browser

方法一、透過表格
<form> <a>發 request 到後端,後端 render 的東西就是接下來看到的畫面

方法二、打一個 api (xhr, $,ajax, fetch)
XMLHTTPRequest => 發 request 到後端,後端拿到的東西就會是 .onload 後的結果,結果的格式可以是任意的,只是 json 會比較方便。


資安 CIA

Confidential 機密性 : 東西有無被偷 (ex: sql injection, xss)
Availability 可用性 : 服務有無被掛掉
Integrity 完整性 : 東西有無被竄改 (ex: xss)

Q13 : 老師很好奇什麼是 DDoS ?請問像我們一般自己架設網站的話有辦法抵擋這種攻擊嗎?
A13 :

DOS (Denial-of-Service 阻斷式服務攻擊)

攻擊目的:不會把東西偷走,只是讓服務掛掉,攻擊可用性
通常針對網路層打,因為只有一台
可以將攻擊分成兩層

  1. 網路層: TCP/IP 發一些網路封包讓你癱瘓
  2. 應用層: query_order.php?from=1900-06-01&to=2021-07-01 => 一億筆
    今天發 request 一直打這個網址,後面的資料庫就要一直跑 => cpu 上升、主機掛掉

DDOS (Distributed-Denial-of-Service 分散式)

超多台一起打,通常針對應用層打


Q14 : 問要怎麼去 debug error handling 的部分呢。自己的理解是這邊是有錯才會印出,沒錯就不會了,在沒辦法製造每個錯誤的狀況下,要怎麼知道error handling 這樣寫是否能確實印出

A14 : 首先要盡可能知道每種錯誤狀況,接著要看一些場合

try {

} catch(err) {
  // 保證發生錯誤一定會被抓到
}

$error = $conn->error // 保證發生錯誤一定會被抓到

要測 err handling 之後有沒有對,就改一些 if else 條件
在前面加 true || 他就一定會跑到這邊,測完後再刪掉

if (true || $error === 'Duplicate entry') {
  echo 'duplicate';
}

Q15 : 在寫作業或看課程時,會累積一些問題(可能不影響當下做岀功能,或是當下有更快的方法可以做功能)、或是覺得要稍後再看的東西老師覺得這些東西要怎麼知道需不需要看、需要投入多少心力看

A15 : 時間不夠就跳過,稍微研究一下,一覺得不對勁會花太久時間就先跳過。筆記下來,過一段時間回頭看有沒有興趣解決。不看會卡關就要看。


Q16 : 老師在影片中說用 npm run build 是因為比較好打字,可是用 npx webpack 這樣字不是更少嗎?

A16 : 這是一個好習慣,因為每一個檔案都要打不一樣的指令會想死,一直在查 package.json

npx webpack && 指令 

要 build,就都放在 build 這個指令裡面,不用記實際要做哪些事情
npm run build
{
  "build": "npx webpack && 加東西"
}

Q17 : 會建議 php 代碼最後加上 $stmt->close() 跟 $conn->close() 嗎 ?

A17 : 有的程式語言不會幫你做 close 這件事情,所以一定要加。但 php 會幫你做,可加可不加。



#演習課WEEK11







Related Posts

CSS保健室|用圖片來取代文字標題

CSS保健室|用圖片來取代文字標題

[Release Notes] 20210813_v1 - Support add Post canonical url

[Release Notes] 20210813_v1 - Support add Post canonical url

React 中 controlled 以及 uncontrolled 表單元素的使用方法

React 中 controlled 以及 uncontrolled 表單元素的使用方法


Comments