【網路安全】來嘛！一起建立http服務！web必學！！！

基礎知識

物理層：定義物理裝置如何傳輸資料
資料鏈路層：在通訊的實體間建立資料鏈路連線
網路層：資料在結點之間傳輸建立邏輯鏈路
傳輸層：使用者提供可靠的端到端服務
應用層：為應用軟體提供的服務
TCP協議之上
遮蔽網路傳輸相關細節

http應用例項：

1，輸入URL開啟網頁
2，AJAX獲取資料
3, img標籤載入圖片

三次握手

user（傳送請求） —— 伺服器
伺服器（開一個介面） —— 使用者
使用者（進行連線）——伺服器

URI

定義：統一資源標誌符 包括URL 和URN

URL:統一資源定位器
http://user:pass@host.com:80/path?query=string#hash
http://使用的協議或者ftp協議
user:pass@該服務可以通過使用者名稱以及密碼證明自己的身份（一般不用）
host.com用於定位ip在網際網路中的位置獲取域名
：80為80埠
/path路由
query=string搜素的引數
#hash 用於錨點定位的工具

URN:永久統一資源定位符

HTTP報文格式

get獲取資料 put更新資料 delete:刪除資料

請求報文

GET/test/hi-there.txt HTTP/1.0
Accept:text/
Accept-language:en,fr
其中有methes的方法如GET,
test/hi-there.txt路由
HTTP/1.0協議版本

響應報文

HTTP/1.0 200 OK
Content-type:text/plain
Content-length:19
空行（head與body的區分）
HI! I am a message!
即HTTP/1.0版本 200 code的狀態 OK用明文告訴我狀態的含義

實現http服務

const http = require('http')//建立http請求服務
http.createServer(function(request,response){//request發出資訊進行封裝到request  reponse則接受資訊並且封裝到~
console.log('request come',request.url)
response.end('123')
}).listen(8080)//8080埠進行監聽
console.log('server listening on 8080')//控制檯進行列印

Content-Security-Policy

作用: 限制資源獲取 報告資源獲取越權
方式: default-src限制全域性的所有和連結相關請求的範圍
制定資源型別：
connect-src:請求發向的目標
img-src:圖片從那幾個網址下面進行載入
style-src script-src:樣式指令碼從網址進行載入
font-src frame-src:網頁上與連結有關的 需要從外鏈進行載入的

CORS跨域請求限制以及解決

好處：XSS攻擊對此的防範：(內容安全策略)

1，在返回的response中加入Content-Security-Policy屬性
2，'Content-Security-Policy':'default-src http:https:'限制src必須通過http或者https進行載入
3，只能在域名下面進行載入：
'Content-Security-Policy':'default-src \'self \'
4，對錶單裡面的限制：
'Content-Security-Policy':'default-src \'self \'；form-action \'self\''

若內容安全策略不理想，可以由伺服器發出一個請求進行報告

'Content-Security-Policy':'default-src \'self \'；form-action \'self\'；report-uri/report'
或者
<meta http-equiv='Content-Security-Policy' content ="script-src 'self '；form-action 'self'">

CORS跨域限制以及預請求驗證

預請求允許的方法：
1，post head get
2，允許Content-Type:
1,text/plain 2,multipart/form-data 3,application/x-www-form-urlencoded
3，其他限制：
請求頭的限制
XMLHttpRequestUpload物件沒有註冊任何事件監聽器
請求沒有使用ReadableStream物件

瀏覽器請求返回的一些資料會忽略掉，請求返回的標準：headers

 'Access-Control-Allow-Origin':'*',
  'Access-Control-Allow-Headers':'X-Test-Cors'
在network進行檢視：
發生了一個預請求：Request Method:OPTIONS告訴接下來的請求的認可的
突破跨域請求的方法：
'Access-Control-Allow-Methods':'POST,PUT, Delete';
允許跨域的最大時間：
'Access-Control-MAX-age':'1000';

快取

可快取性：

public：返回的路徑 以及發出的瀏覽器，都可進行快取的操作 任何地方都可快取
private：只有發起遊覽器才能快取
no-cache：任何節點都不能快取 可在本地進行快取但經過伺服器端的驗證

到期（配置）

max-age=多少秒後快取到期
s-maxage=只在代理伺服器設定
max-stale=發起請求主動帶了一個頭，即使過期還可以用

重新驗證

must-revalidate: 過期了必須去原服務端發起請求 重新發出資料進行驗證
proxy-revalidate:快取伺服器中，必須去原服務端請求一邊

no-store:永遠都要去伺服器端拿去內容才能使用它
no-transform:不能改動返回的內容，比如壓縮啊等

瀏覽器在本地獲取快取的操作（實現本地靜態快取）

困擾：

我們希望瀏覽器去靜態快取javascript檔案css檔案，（下次開啟的時候，速度非常的快），但是又不希望後端更新了一個應用，但是客戶還是執行靜態資源

解決方案：

在js構建的時候，把打包完成的js檔名上 根據內容的雜湊結果加上一串雜湊碼，如果內容不變，則其雜湊碼不變即url不變，如果內容有變化則嵌入裡面的頁面的url有變化，則發起的請求是一個新的靜態請求而不是快取在瀏覽器裡面的靜態資源請求，可以達到快取的目的。

驗證的方法
1，last-Modified

last-Modified:
1,上次修改時間
2，配合if-modified-since 或者if-unmodified-since使用
if-modified-since（常用 瀏覽器）返回到伺服器並且代值
如果修改時間=資料中的時間 來判斷是否更新

2,Etag

資料簽名（資源對內容存在唯一的簽名，如果內容發生改變則資源發生過改變）
1，對內容進行雜湊計算，用於標記資源
2，配合if-Match或者if-Non-match使用
3，對比資源的簽名判斷是否快取
即資料簽名PK瀏覽器簽名

伺服器不需要經過快取的實際內容，只需要讀取快取

const http = require('http')

http.createServer(function(request,response){
console.log('request come',request.url)
if(request.url==='/')
const html = fs.readFileSync('sever.html','utf8')
response.writeHead(200,{
    'Content-Type':'text/html'
})
response.end(html)

if(request.url ==='/script.js'){
    const html = fs.readFileSync('sever.html','utf8')
    response.writeHead(200,{
        'Content-Type':'text/javascript',
         'Cache-Control':'max-age=20000000,no-cache',
         'Last-Modified':'123',
         'Etag':'777'
    })
    const etag = requset.Headers['if-none-match']//進行讀取Etage的值
    if(etag=="777"){
        response.writeHead(304,{
            'Content-Type':'text/javascript',
             'Cache-Control':'max-age=20000000,no-cache',
             'Last-Modified':'123',
             'Etag':'777'
        })
        response.end('')
    }
    else{
        response.writeHead(200,{
            'Content-Type':'text/javascript',
             'Cache-Control':'max-age=20000000,no-cache',
             'Last-Modified':'123',
             'Etag':'777'
        })
        response.end('console.log("script loaded twice")')
    }
    
}

}).listen(8080)

console.log('server listening on 8080')

cookie

定義：定義：通過服務端返回資料後，通過cookie的head設定在瀏覽器裡面，儲存在瀏覽器裡面的內容
在同域請求當中，帶上cookie實現使用者對話傳輸的內容

1，通過Set-Cookie設定
2，下次請求會自動帶上
3，鍵值對 可以設定多個

屬性：
1, max-age和expires設定過期時間
2, Secure只在https的時候傳送
3, HTTPOnly無法通過document.cookie訪問

一首歌

有何不可