Web I

whoami

  •   fallnight

  •   資工三甲

  •   113屆  會長

  •   女婕思

outline

  • 網頁的各種基礎知識

  • 前端 - 網頁三兄弟

    • ​有實作時間!

  • ​網頁的安全問題

  • 後端 - PHP

網頁是什麼?

圖片來源: https://miro.medium.com/v2/resize:fit:828/format:webp/1*Xkj79-84Rvv3Qgw-PcGGcg.png

網頁是什麼?

  • 網址 → 頁面 = 網頁

  • 平時會瀏覽的YouTube、校網就是一個個的網頁

URL

  • "統一資源定位器"  =  網址

  • 像地址可以在地圖找到正確的地點，透過網址可以找到對應的網頁

  • 格式:
    [協定類型]://[伺服器位址]:[埠號]/[檔案路徑][檔名]?[參數]#[片段ID]

  • 範例:
    http://nisra.net:443/tmp/test.php?p=0&q=1#1

網頁架構

圖片來源: https://miro.medium.com/v2/resize:fit:1400/format:webp/1*DMLL29PVpc2xBW3Aeq-RIg.jpeg

網頁架構

圖片來源: https://miro.medium.com/v2/resize:fit:1400/format:webp/1*DMLL29PVpc2xBW3Aeq-RIg.jpeg

HTTP & HTTPS

  • 是前端後端在發送請求(request)、回覆(response)時，
    所遵循的通訊規則

    • 超文字傳輸通訊協定 (HTTP)

      • 以明文傳送資料

    • 超文字安全傳輸通訊協定 (HTTPS)

      • HTTPS以SSL/TLS加密協定，讓資料傳輸多一層保護，
        比HTTP安全

         

HTTP請求方法

GET 取得資料
POST 提交資料
HEAD 要求與 GET 請求完全相同的回應
PUT 取代現有資料
DELETE 刪除資料
CONNECT 與目標資源識別的伺服器建立隧道
OPTIONS 描述目標資源的通信選項
TRACE 在目標資源的路徑上執行消息回送測試
PATCH 修改資料

GET & POST

  • GET 通常用於請求簡單的資訊，例如連結或圖片，
    以及查詢資源的信息

  • 請求時資料會附在URL上，就像明信片上的地址

  • 缺點:

    • 大家都看得到訊息內容

    • 會受 URL 的最大長度限制

       

GET & POST

  • POST 通常用於傳送登入的帳密、送出HTML表單

  • 資料會寫在封包內部，就像裝進信封袋的信件

  • 可傳遞的資訊較多，安全性也較高

  • 不是絕對安全，可透過封包攔截找到相關資訊

     

HTTP 回應

  • 以HTTP狀態碼(status code)表示伺服器端回應的情況

1XX 資訊回應
2XX 成功回應
3XX 重新導向
4XX client端錯誤
5XX server端錯誤

HTTP 回應

網頁三兄弟

圖片來源: https://media.slid.es/uploads/1169060/images/10563407/pasted-from-clipboard.png

HTML

  • 網頁的骨架

  • HyperText Markup Language

  • 超文本標記語言

  • 用來描述並定義網頁內容

  • 元素(element)

    • ​起始標籤(opening tag)

    • 結束標籤(closing tag)

    • 內容(content)

<p>My cat is very grumpy</p>

Opening tag

Closing tag

Content

Element

HTML

  • 空元素：

    • ​單個標籤就兼具開始與結束的性質，沒有內容

    • ex. <br>、<img>、<meta>等

  • 塊級元素(區塊元素)：

    • 顯示時會以新的一行開始

    • ex.  <p>、<li>、<div>等

  • 內聯元素(行內元素)：

    • 顯示時不會換行

    • ex. <label>等

HTML

HTML架構

<!DOCTYPE html>

<html lang="zh-Hant-TW">
  
	<head>
		<meta charset="utf-8">
		<title>我是網頁標題</title>
	</head>
  
	<body>
		<h1>我是網頁內容，自帶粗體大字特效</h1>
	</body>
  
</html>

HTML架構

  • <!DOCTYPE html>

    • 告訴瀏覽器這個網頁是用HTML5編成的

  • <html> 

    • 置於整個HTML架構的開頭與結尾

    • lang屬性表示網頁使用的語言

      • lang = “zh-Hant-TW” 代表使用的是繁體中文

HTML架構

  • <head>

    • ​設定網頁的基礎資訊

    • ex. 網頁標題<title>、編碼<meta charset="utf-8">等

    • 放置 CSS 的 <style> 

  • <body>

    • ​包含所有網頁實際要呈現的內容

    • 標題<h1>、圖片<img>等以及  JavaScript 的 <script>

  • 註解方式:  <!-- 要被註解的內容 -->

<body> 常用標籤語法

標題 <h1>標題名稱</h1>
段落 <p>文字內容</p>
換行 <br>
輸入框 <input type="text">
按鈕 <button>按鈕上的文字</button>
圖片 <img  src=“(圖片網址)”>
連結 <a   href = “連結網址”   target = “_blank”
  title = “提示文字”> 要顯示的文字或圖片 </a>

標籤-屬性

  • 寫在標籤< >裡面，標籤名稱的後方

  • 例如: <img  src=”...”>、<a  href=”...”>這是連結</a>

  • CSS的id、class選擇器也會需要在標籤內設定屬性

    • 例如: <h1 class=title>、<h2 class=title>、
      <input type=”text” id=inputname>

有序清單 <ol>
         <li> 1.有序清單 </li>
         <li> 2.有序清單 </li>
         <li> 3.有序清單 </li>
</ol>
無序清單 <ul>
         <li> • 無序清單 </li>
         <li> • 無序清單 </li>
         <li> • 無序清單 </li>
</ul>

<body> 常用標籤語法

<body> 文本標籤

一般文字 <p>一般文字</p>
文字加粗 <b>文字加粗</b>
斜體 <i>斜體</i>
小號文字 <small>小號文字</small>
下標字 <sub>下標字</sub>
上標字 <sup>上標字</sup>
加上底線 <ins>加上底線</ins>
加上刪除線 <del>加上刪除線</del>

Lab 0x1

梗圖來源:  https://i.imgur.com/bp1EmIa.jpg

  • 來做個名片網頁吧(oﾟvﾟ)ノ

  • 其中包含:

    • 名字

    • 頭像

    • 學校+系級

    • 愛好清單

    • 一個問你是誰的輸入框+按鈕

HTML表單

<form action="資料傳送到哪裡" method="傳送方式">
  表單內容
</form>

  • 用於輸入訊息傳送給後端，常見的行為就是登錄帳密

  • <form></form> : 表示表單的開始與結束

  • action 屬性 : 表示要將輸入資料送去哪一份程式檔案做處理

  • method 屬性 : 資料的傳輸方式

  • get 方法：送出的資料會顯示在網址的  ?  後面

  • post 方法：資料會夾在送出請求的封包中，比較保密

舉個栗子

HTML表單

<form action="login.php" method="get">
  帳號:<input type="text"><br>
  密碼:<input type="password"><br>
  <input type="submit" value="送出">
</form>

  • <input> : 輸入欄

    • type屬性可選text明文、password密文、date日期等

  • type屬性為submit時，就是送出的按鈕

    • value屬性可以設定按鈕上的文字

  • 一個簡易的帳密登入畫面的HTML架構:

  •  

HTML表單

<iframe src="https://www.youtube.com/embed/C5n5YsiFnyM?si=QOs3FUmc_a5ydW0M" width="560" height="315" allowfullscreen></iframe>

  • <iframe> 用於在網頁內嵌入另一個網頁、影片等

HTML 嵌入標籤

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8598.006742347894!2d121.43292075437536!3d25.03351329401398!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a7dd8be91eaf%3A0xe342a67d6574f896!2z5aSp5Li75pWZ6LyU5LuB5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1756046959614!5m2!1szh-TW!2stw" width="600" height="450"></iframe>

CSS

  • 網頁的外觀

  • Cascading StyleSheets

  • 階層樣式表

  • 用來在HTML為各個標籤套上不同樣式

CSS

<input style="background-color: red;" value="111"> <!-- 背景變為紅色 -->
<input value="222"> <!-- 背景色不變 -->

  • 行內樣式 :
    直接在 HTML 標籤內加入 style 屬性，只對該標籤有效

CSS

<head>
  <style> /* style 通常會寫在 head 中 */
    /* 這編寫 CSS */
    input{
      background-color: red;
    }
  </style>
</head>

  • 內部嵌入 :
    在 HTML 的 <head> 標籤內加入 <style> 標籤，撰寫CSS

CSS

<link rel="stylesheet" type="text/css" href="./test.css">

  • 外部引入 :
    在 HTML 的 <head> 標籤內加入 <link> 標籤，
    引入外部的 .css 檔

CSS

高

低

  • 行內樣式:
    直接對單個標籤附加屬性
     

  • 內部嵌入:
    利用 <style> 標籤撰寫CSS
     

  • 外部引入 :
    利用 <link> 標籤引入外部的 .css 檔

CSS選擇器

p {
	color: red;
}

  • 選擇特定的HTML標籤，統一附加樣式

  • 以大括號包裹屬性，每寫完一行屬性要以  ;  做結尾

    • ↓↓↓ 把HTML裡全部的p標籤字體顏色都改成紅色

CSS選擇器

<input id=inputname type="text">



<h1 class=title>我是h1</h1>
<h2 class=title>我是h2</h2>
<h3 class=title>我是h3</h3>
#inputname{
	background-color: red;
}

.title{
	color: blue;
}

HTML

CSS

  • 先給標籤加上 id 或 class 屬性

  • id 和 class 名稱寫在HTML的標籤名後方

  • id 是只能選一個標籤做修改，寫法:   # id名稱

  • class可選擇多個標籤，寫法:  . class名稱

CSS

設置字符間距 letter-spacing: 2px;
設置行高 line-height: 32px;
設置字間距 word-spacing: 4px;
對齊方式 text-align : right;  /* 或是left, center */
字體陰影效果 text-shadow: 1px 1px black;
對字體添加修飾 text-decoration: none;  /*無修飾*/
text-decoration: overline;  /*上線*/
text-decoration: underline;  /*底線*/
text-decoration: line-through;  /*刪除線*/

CSS

背景顏色 background-color : black;
背景圖片 background-image : url("圖片網址");
背景圖像是否固定 background-attachment: scroll; /*滾動*/
background-attachment: fixed;  /*固定*/
字體樣式 font-family : sans-serif;
字體顏色 color : white;
字體大小 font-size : 20px;

CSS動畫

CSS動畫

<head>
  <style>
    div /*這裡打要被附加樣式的標籤名稱*/{
      width: 100px; /*物件寬度，px為單位*/
      height: 100px; /*物件高度，px為單位*/
      background-color:  red; /*物件初始顏色*/
      animation-name: animation; /*要套用的動畫設定(@ketframes)名稱*/
      animation-duration: 4s; /*動畫播放的時間，單位可以是秒(s)或毫秒(ms)*/
    }
    @keyframes animation /*這裡打動畫名稱*/{ 
      0% /*動畫開始，0%也可以改成from*/{
        background-color: red;
      }
      25%{
        background-color: yellow;
      }
      50%{
        background-color: blue;
      }
      100%{
        background-color: green;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>

CSS動畫

圖片來源:  https://i.imgur.com/F7GbiTX.gif

CSS動畫

<head>
  <style>
    #pic{
      width: 25%;
      height: 50%;
      border-radius: 50%; 
      /*讓圖片邊框產生圓弧，可以用 % 或 px 為單位*/
      position: absolute; /*絕對定位*/
      top: 25%;
      left: 50%; 
      /*圖片左側距離畫面左側邊緣的距離，也有right、bottom可選*/
      animation-name: MovePic; /*動畫名稱*/
      animation-duration: 3s; /*動畫時間*/
      animation-delay: 0s; /*動畫延遲時間*/
      animation-iteration-count: infinite; 
      /*動畫重複次數，infinite 無限重複*/
    }
    @keyframes MovePic{ 
      from{
        transform:rotate(0deg);
        /*transfom讓元素可以被平移、旋轉和縮放*/
        /*rotate(10deg) 旋轉 、 translateX(20px) X軸平移、scale(5) 縮放*/
      }
      to{
        transform:rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img src="https://i.imgur.com/bp1EmIa.jpg" id=pic>
</body>

Lab 0x2

梗圖來源:  https://i.imgur.com/bp1EmIa.jpg

  • 來為網頁加上億點點顏色吧(oﾟvﾟ)ノ

  • 其中包含:

    • 修改背景或字體顏色

    • 增加一種動畫

JavaScript

  • 讓網頁能動起來的肌肉

  • JavaScript 跟 Java 不一樣

  • 用來讓網頁有可以跟使用者互動的功能

JavaScript

  • 在 HTML 中使用<script>標籤引入外部的 .js 檔

<script src="./js/XXX.js"></script>

  • 用<script>標籤包裹撰寫

<script>
  // 你的JScode
</script>

JavaScript

  • 輸出:

alert("Hello JS!")
console.log("hello js!")

  • 宣告變數:

var x=0,y=1;

  • 運算子:

    • 四則運算：+, -, *, /

    • 取餘數：%

    • 次方：**

    • 比較：>, <, >=, <=, ==, !=

    • 邏輯：&&, ||

  • 註解:  

    •  //  單行註解

    •  /* 多行註解 */

DOM

  • Document Object Model  (文件物件模型)

  • JavaScript 可藉由 DOM 來控制 HTML

  • 可以隨時用 JavaScript 去改變 HTML 的標籤、屬性等，與使用者做互動

DOM

  • 常用語法:

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

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

JavaScript

  • onclick事件: 被點擊時會觸發function的動作

<p>點選按鈕觸發函數。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
  function myFunction(){
      document.getElementById("demo").innerHTML="Hello World";
  }
</script>

參考資料 & 圖片來源:  https://www.runoob.com/try/try.php?filename=tryjsref_onclick

  • onerror事件: 若程式執行時出現錯誤就執行function動作

<img src="image.gif" onerror="myFunction()">
<script>
  function myFunction() {
      alert("無法加載圖片。");
  }
</script>

參考資料 & 圖片來源:  https://www.runoob.com/try/try.php?filename=tryjsref_onerror

JavaScript

<body onload="myFunction()">
  <h1>Hello World!</h1>
</body>
<script>
  function myFunction(){
      alert("頁面加載完成");
  }
</script>

參考資料 & 圖片來源:  https://www.runoob.com/try/try.php?filename=tryjsref_body_onload

  • onload事件:

    • 在頁面或圖片加載完成後立即執行function動作

    • 通常用於 <body> 標籤

JavaScript

Lab 0x3

梗圖來源:  https://i.imgur.com/bp1EmIa.jpg

  • 來加上酷酷的東西吧(oﾟvﾟ)ノ

  • 其中包含:

    • 一個可以輸入名字的輸入框

    • 一個發送名字的按鈕

    • 按下按鈕後會顯示剛剛輸入的名字

Web的資安

Cookie & Session

Cookie & Session

  • Cookie不是餅乾

  • 是由伺服器傳給瀏覽器的一塊資料

  • 方便使用者省去驗證身分的步驟，或是回到上次瀏覽的紀錄

  • 可以設定期限，到期後就會失效

  • 在A網站拿到的cookie不能用在B網站

  • Cookie會存在瀏覽器，可以被修改
     

  • Session會在伺服器上記錄使用者訊息，包括瀏覽紀錄等

    • ​產出對應的ID給Cookie

    • 像是存放在伺服器的識別證

Cookie & Session

參考資料 & 圖片來源: https://medium.com/@ralph-tech/cookie-與-session-簡介-比較與實作-35f1a937bbb0

robots.txt

  • 告訴搜尋引擎該網站的哪些網址能存取、哪些不能

  • 會放在網站的根目錄下

  • 是約定俗成的，非強制要求

  • 可能會暴露哪些地方藏有機密資料

  • User-agent  :  要對哪些搜尋引擎生效(   *   表示所有)

  • Disallow  :  指定哪些目錄或檔案類型不想被存取

robots.txt

https://www.netflix.com/browse

 

https://www.netflix.com/robots.txt

ClickJacking

  • 點擊劫持

  • 網頁的攻擊手法

  • 嵌入常用的網頁，在按鈕的上層覆蓋透明的惡意連結的按鈕，讓使用者以為是在正常操作，但實際上已經點到了惡意連結

  • 原理:

    • ​iframe 標籤嵌入正常的網頁

    • opacity: 1;   修改成完全透明

    • z-index: 100;   將圖層順序移到最上層

  • ✅網上有大神提供範例!

ClickJacking

同場加映 — PHP

如果有多的時間的話w

現在在哪?

圖片來源: https://miro.medium.com/v2/resize:fit:1400/format:webp/1*DMLL29PVpc2xBW3Aeq-RIg.jpeg

<form action="login.php" method="post">
  帳號: <input type="text" name="username"><br>
  密碼: <input type="password" name="pswd"><br>
  <input type="submit" value="送出">
</form>

  • 用 <form> 將前端輸入的帳密傳送給後端

HTML表單

看看 PHP 會怎麼寫? 

<?php
  $msg = "";    // 宣告變數，初始值為空字串
  
  // isset() 檢查表單是否有送出 "username" 和 "pswd" 這兩個欄位
  if (isset($_POST['username']) && isset($_POST['pswd'])) {
    
    // 如果有，將表單的資料存到變數 $user 和 $password
    $user = $_POST['username'];
    $password = $_POST['pswd'];
    // $_POST['username'] 代表取得表單裡 <input name="username"> 的值。

    // 比對輸入的帳密是否正確
    if($user == "admin" && $password == "nisra"){
      
      // 如果帳號是 admin，密碼是 nisra，輸出成功訊息
      echo "Correct!  Welcome back!";
    }
    else{
      // 否則，帳號或密碼錯誤，就把錯誤訊息放進 $msg
      $msg = "Incorrect!  Who are u?";
    }
  }
  else{
    // 如果沒有從接收到 username 或 pswd
    $msg = "isset() is false!";
  }

  echo $msg;  // 輸出 $msg 的內容
?>

如何執行 PHP ?

下載 XAMPP

  • 過程教學

  • 下載完畢後按 Apache 的 Start 按鈕

  • 去瀏覽器打 http://localhost/
    會自動導到 http://localhost/dashboard/
    這個頁面，就代表安裝成功!

試著打開自己寫的PHP

  • 去C槽找到剛剛下載的XAMPP的資料夾

  • 在裡面找到 htdocs 這個資料夾

  • 所有要執行的檔案都必須放在 htdocs

  • 新增一個 php 檔案，
    之後的課程就用它來測試 php 程式

<?php
	echo 'Hello World!';
?>

試著打開自己寫的PHP

  • 去瀏覽器打 http://localhost/(剛剛創建的檔名)
    ex. http://localhost/login.php

  • 看到 Hello World，就代表執行成功!

檔案路徑與網址的對應關係

  • 以剛剛的檔案為例，它的檔案路徑是
    C:\xampp\htdocs\login.php

  • 網址是
    http://localhost/login.php

替換成

照抄

來點題目試試?

如果又還有多的時間的話w

  • 一個可以刷資安的題目的練習網站

  • 網址: https://play.picoctf.org/login​

  • 要先登錄註冊才能看到題目

    • 註冊時，只有備註(optional)才可以不用填

    • 註冊完成需要去信箱驗證

  • 去網站上方的 Practice 就能看到題目，左側有搜尋欄

  • 第一次看題目很迷茫也沒關係，網路上都有解答

    • 搜尋 題目名稱 + writeup

    • 可能看影片教學會比較好懂，但影片都是全英文的🥲

PicoCTF

Lab 0x4

Insp3ct0r

Lab 0x5

where are the robots

Lab 0x6

Cookies

Lab 0x7

Scavenger Hunt

Lab 0x8

login

Lab 0x9

logon

避免暴雷

Lab的解答我另外弄成共筆了

https://hackmd.io/@L-asgOzjQGmzgBaVHgGktw/BJ-Hwuh-kg

2025Enlightened_Web I

By fallnight

Made with Slides.com

2025Enlightened_Web I

  • 71

More from fallnight