Web intro

什麼是web

  • 全球資訊網（World Wide Web ）
  • Web Security

什麼是web

  • 全球資訊網（World Wide Web ）
  • Web Security

課程內容

  • 怎麼看到一個網站
    • URL、HTTP協定、Server
  • cookies
  • robots.txt
  • 網頁三兄弟 (HTML、CSS、Javascript)

怎麼看到一個網頁

  • 網路的世界並沒有跳脫世界的規則
    • 一樣需要知道他的位置(URL、統一資料定位符)
    •  一樣需要知道他長怎樣(HTML、超文本標記語言)
    •  一樣需要知道怎麼拿回來(HTTP、超文本傳輸協議)

依據HTTP協定

利用 URL 知道伺服器位置

解析 HTML 資料顯示給使用者

URL是什麼？

  • 統一資料定位符（Uniform Resource Locator）

  • 格式：

    • [協定類型]://[伺服器位址]:[埠號]/[檔案路徑]?[查詢]#[片段id]

  • 範例:

    •  https://nisra.net:443/tmp/test.php?q=1#1

HTTP是什麼？

  • 超文本傳輸協定（HyperText Transfer Protocol）

  • 一種用來傳輸超媒體文件 (像是HTML文件) 的應用層協定

HTTP是什麼？

  • 無狀態協定

所以怎麼請求(Request)

方式 說明
GET 取得目標資源
HEAD 取得標頭
POST 提交指定資源的實體
PUT 替換目標資源
​DELETE ​​刪除目標資源
CONNECT 和指定資源標明的伺服器之間,建立隧道
OPPTIONS 取得資源通訊方式
TRACE 用於測試或診斷

GET

  • 可以想像成是要向網頁查詢資料
  • 方法是透過告訴伺服器你需要的資料的相關參數
  • 格式：

      網址?參數名稱1=參數內容1&參數名稱2=參數內容2

 

GET

  • 如果今天傳送的東西是密碼呢?
  • https://nisra.net/login?username=admin&password=root

POST

  • 將資料放在 message-body 進行傳送

  • 傳遞上比較安全且傳遞的資訊可以比較多

  • 封包攔截仍然能查詢到相關資訊

HTTP 狀態碼

狀態碼 說明
1xx 訊息提示 
2xx 請求成功
3xx 重新導向
4xx 用戶端錯誤
5xx 伺服器錯誤

HTTP vs. HTTPS

  • HTTP

    • 明文傳輸

    • 就是裸奔

  • HTTPS

    • https = http + SSL/TLS

    • 內容加密、身分認證、數據完整…
  • ​HTTP vs. HTTPS

server

  • Server 運作的作業系統
  • 負責接收處理 HTTP 協定的 HTTP Server
  • 負責邏輯判斷的後端程式語言
  • 負責儲存結構化資料的資料庫

cookies

  • 紀錄使用者狀態資料

    • e.g.網購時的購物車

  • 儲存在用戶端

  • Cookie 安全嗎？

Session

  • 把資訊存在 Server 

  •  透過session ID 跟 Server 要資料

robots.txt

  • 網站根目錄下的文字檔
  • 控管搜索引擎可存取的檔案

robots.txt的問題

  • 可以看到disallow

       User-agent: *
       Disallow: /you_will_never_never_see_me

  • 避免方法

       User-agent: *
       Disallow: /you_will_never

前端與後端

網頁三兄弟

Sublime Text

另存新檔 (Ctrl + Shift + s )

  • 取名為XXXX.html（html檔）
  • 取名為XXXX.css（css檔）
  • 取名為XXXX.js（javascript檔）

HTML

  • HyperText Markup Language 

  • 超文本標記語言

  • 讓瀏覽器讀取,並將其視覺化

HTML

  • 標記語言

  • 不是程式語言

HTML

<!DOCTYPE html>
<html>
<head>

  <title>This is a title</title>

</head>
<body>

<p>Hello World!</p>
<!-- This is a comment -->

</body>
</html>

  • <!DOCTYPE html>

    • 讓瀏覽器以HTML5渲染

  • <head></head>
    • 給瀏覽器看得或是導入外掛和文件
  • <title></title>​
    • 網頁的標題
  • <body></body>
    • 主要部分
  • <!--This is comment-->
    • 註解

常用標籤

  • <div></div>
    • 獨立區塊
  • <h1></h1> ... <h6></h6>
    • 標題大小
  • <br></br>
    • 換行

文字效果標籤

  • <b></b>
    • 粗體
  • <i></i>、<em></em>
    • 斜體
  • <u></u>
    • 底線

Attribute（屬性）

  • 用來敘述元素的相關性質

  • class 和 id 

常用標籤

  • <img src="圖片網址" alt="替代文字" width=""  height="">
    • 插入圖片
  • <a href="網址" target="_blank">文字</a>
    • 超連結

列表

  • 無序列表
< ul > 
	< li > Coffee < /li > 
	< li > Milk < /li > 
< /ul >
  • 有序列表
< ol > 
	< li > Coffee < /li > 
	< li > Milk < /li > 
< /ol >

表單

  • <form action="" method=""></form>
    • 建立表單

表單

  • <input type="" value="顯示的文字" name="" >
  • type: text, password, button...
    name: 用來指定送出去的該筆資料要用什麼名稱
<form>
	<input type="text" name="account">
	<input type="password" name="password">
    <input type="button" value="Submit" name="btn">
</form>

表單

  • <input type="button"  value="顯示的文字"  onclick="動作"  >
  • input 更多玩法

Lab Time 

  • 寫一個 form
    • 兩個輸入框
      • 一個會幫你隱藏字
      • 一個為明文
      • 一個按鈕
  • 幫這個 form 加一些描述,如帳號、密碼…
  • 插入一個具有超聯結功能的圖片

CSS

  • Cascading Style Sheets

  • 衣服

inline style

<h2 style="color:red;">Red Text</h2>

selector

<style type="text/css">
    body {
        background-color: black;
        /* body tag 中的背景會變黑 */
    }

    .class-name {
        color: red;
        /* class-name 中的文字會變紅 */
    }

    #id-name {
        color: blue;
        /* id-name 中的文字會變藍 */
    }
</style>

external style

//.html 檔
<head>
    <link rel="stylesheet" type="text/css" href="./css/XXX.css">
</head>
//.css 檔
body {
    background: black;
}

常見css

  • color: 文字顏色
  • text-align: 文字對齊(center,left,right…)
  • font-size: 文字大小
  • background-color: 背景顏色
  • background-img: url(“圖片網址”)

Lab Time

  • 剛剛上一個 lab 寫出來的 html 加上點 css
  • google  'css properties'

Javascript

  • 高階直譯式語言

  • 不是Java

寫在哪？

  • 寫在html檔案裡

<head>
<script>
  <!-- Write your code here -->
</script>
</head>
<body>
<script>
  <!-- Or write your code here -->
</script>
</body>

寫在哪？

  • external style
<head>
<script src="./js/XXX.js"></script>
</head>
function helloworld(){
    console.log("Hello world!");
}

宣告變數

  • var num = 666
    • 數字
  • var str = “666” // or ‘666’
    • 字串
  • var arr = [123, “apple”]
    • 陣列
  • var bool = true // or false
    • 布林

運算子

  • + - * /
  • == != > >= < <=
  • && ||
  • % 取餘數 ex. 5%3=2
  • ** 次方
  • === !=== 嚴格比較
    • 除了比較值還比較型態

自訂函數

<script>
	function add(x,y){
    	return x+y ;
    }
</script>

註解(comment)

  • 單行註解以 // 開頭

  • 多行註解以 /* 開頭，以 */ 結尾

輸出

  • console.log()

  • alert()

DOM 文件物件模型

  • Document Object Model
  • 抓取元素

DOM 文件物件模型

  • 操作
document.getElementById("id-name");
document.getElementByClassName("class-name");
document.getElementByTagName("tag-name");

var test = document.getElementById("id-name");
// 用 test 去接物件

test.innerText = "I've been changed"
// 最常使用，獲取或設置元素內的文字
test.innerHTML
// 獲取或設置元素包含的 HTML 標籤

Lab Time

  • 寫一個 form
    • 兩個輸入框
    • 一個按鈕
  • 幫這個 form 加一些描述,如身高、體重
  • 以 alert 的方式呈現計算後 BMI

      （BMI = 體重 / 身高 (m)^2）

Lab Time   你以為沒有了嗎

CSRF

  • 跨站請求偽造（Cross Site Request Forgery）
  • 讓使用者發出惡意請求

舉例-作業繳交頁面

<a href="https://example.com/delete?id=3">刪除</a>

刪除

舉例-惡意網頁

<a href="https://example.com/delete?id=3">開始測驗</a>

開始測驗

舉例-用post安全了吧

<form action="https://example.com/delete" method="POST">
  <input type="text" name="id" value="3">
  <input type="submit" value="開始測驗">
</form>

舉例-看到了還會去按???

<form id="csrf" action="https://example.com/delete" method="POST">
  <input type="text" name="id" value="3">
  <input type="submit" value="開始測驗">
</form>
<script>
csrf.submit();
</script>

預防方法

web intro

By zonghao

Made with Slides.com

web intro

  • 93

More from zonghao