【DAY4】就是這樣被騙的！X S S和C S R F攻擊實戰演練（付壓縮檔）

2025 iThome 鐵人賽

DAY 4

Security

我的30天資安攻之路防身修練：實戰×工具×AI全紀錄系列第 4 篇

#17th鐵人賽 #xss# #csrf #security

Corrina

2025-09-04 21:47:51

166 瀏覽

分享至

前言

最近設定環境真的太心煩了，所以乾脆直接來寫個網頁實作！在現代網頁應用中，安全性是不可忽視的重要課題。這篇將討論從兩大常見的跨站攻擊 —— 跨站腳本攻擊（XSS）與跨站請求偽造（CSRF）開始，了解其原理、漏洞機制，並動手實作一個簡易的留言系統，來模擬攻擊與防禦流程！

跨站腳本攻擊（XSS）原理

XSS 攻擊是透過注入惡意的 JavaScript 代碼，使之在合法使用者的瀏覽器中執行。攻擊者藉此可竊取 Cookie、冒用身份、竄改網頁內容等，造成資料安全問題。

常見的攻擊語法範例：

<script>alert('XSS攻擊');</script>

或利用事件屬性注入：

<img src="#" onerror="alert('XSS')">

如上述範例能成功執行，代表該網站無正確過濾用戶輸入，存在漏洞。

這次我們寫簡單的HTML然後帶入看看留言用JavaScript的語法被發現跳出彈出式視窗！

https://drive.google.com/file/d/1tJ2eCYAW0-_ccv7A0ZmWiTMWFAuYuzDe/view?usp=drivesdk

跨站請求偽造（CSRF）原理

CSRF 攻擊則是利用受害者已登入的身份，以偽造的請求替使用者執行未授權操作。攻擊流程為：

受害者登入網站並取得有效身份認證（Cookie）。
瀏覽攻擊者惡意網站，該網站自動送出表單偽造請求。
目標伺服器因信任用戶Cookie而執行請求，造成資料被修改。

https://drive.google.com/file/d/1W_FT0lQnUgcIGc096ES_4pn_bPe_VeHm/view?usp=drivesdk

實作介紹：留言系統示範

我使用 Node.js 串接 Express 快速完成一個簡易留言板，讓使用者能輸入留言並更新。

後端程式碼主要架構

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

let currentComment = "尚未留言";

app.get('/', (req, res) => {
    res.send(`html with form and currentComment, styled`);
});

app.post('/update_comment', (req, res) => {
    const newComment = req.body.comment;
    if (newComment) {
        currentComment = newComment;
        res.send(`same styled html with updated comment`);
    } else {
        res.send(`styled html with error message`);
    }
});

app.listen(3000, () => {
    console.log('伺服器啟動 http://localhost:3000');
});

其中有美化的 CSS，讓頁面風格一致且易閱讀🦄🤍

XSS 演示頁面

前端透過 document.write() 直接輸出用戶輸入的留言，不做任何過濾，模擬反射型XSS漏洞。用戶輸入以下惡意JavaScript，就會在頁面上執行：

<script>alert('XSS成功');</script>

此時網頁會彈跳出提示，證明XSS攻擊成功。

CSRF 攻擊模擬頁面

惡意網頁透過隱藏自動提交的表單來送 POST 請求修改留言：

<form action="http://localhost:3000/update_comment" method="POST" style="display:none;">
    <input type="hidden" name="comment" value="哈哈現在被騙了!現在你的留言被改了喔!" />
</form>
<script>
    window.onload = () => {
        document.forms[0].submit();
        setTimeout(() => window.location.href = 'http://localhost:3000', 5000);
    };
</script>

這段程式會自動送出帶有偽造留言的 POST 請求並在5秒後跳轉回目標首頁✍️
（其實這篇也有X S S的實作，但是忘記錄到了）

https://drive.google.com/file/d/1TdjreaJ0Bv7ujc3rERWtHBIvoTQ7nW5s/view?usp=drivesdk

我的留言表很陽春～但重在實作嘛～只要node.js有架設好的話，基本上這個壓縮檔只要下載下來就可以直接玩玩看這些網頁囉！

https://drive.google.com/file/d/1TdjreaJ0Bv7ujc3rERWtHBIvoTQ7nW5s/view?usp=drivesdk

攻防心得

這個實作主要就是把留言板按入輸入後直接會跳換成另外一個網頁跟你說你的留言被篡改，而且也是真的有執行但你再修改一次時反而又跳到其他的網頁，且你的留言也不會再出現其他錯誤會讓使用者以為ㄟ剛剛可能只是當機或者是網頁出錯，但實際上自己送出的私密訊息已經被盜竊且在網頁上沒有辦法發現～
有寫一些提示詞，讓整個專案看起來比較好閱讀且理解～但實際上真正的道歉的話是不會跟你說欸你被騙了反而會直接讀取你的資訊！

這是我發現以下的攻擊手法：

XSS 常因輸入過濾不當，導致惡意腳本執行。防禦手段以嚴格編碼與內容安全政策(Content Security Policy, CSP)為主。
CSRF 利用「瀏覽器對網站Cookie的信任」，防護重點為驗證 CSRF Token、檢查請求來源或設置Cookie SameSite屬性。
簡單來說，我們看到網頁的時候都會很輕易地去點接受cookie或是怎麼樣但是透過網頁的get Post其實很容易遭受到攻擊！很輕易的點擊按鈕或連結的話也會像最近很氾濫的詐騙一樣跳去一個很容易被盜竊的網站或是系統等～
透過實作留言系統及攻擊模擬，幫助理解攻擊機制，且學會如何在實際開發中加強安全防護。（其實如果有看實作影片很明顯看得出來本機端網址是不一樣的，所以其實很明顯他只是跳轉的時候誤導了使用者，但今天如果沒有這麼簡單明瞭的H T T P為加密網址的話會更難看出來～）

來源
[1] Node.js Express MongoDB RESTful Api 留言板實作教學 - Ian Chu https://ianccy.com/nodejsapi/
[2] [week 17] 後端中階- Express 實戰：簡易會員註冊系統& 留言板 https://hackmd.io/@Heidi-Liu/note-be201-express-practice
[3] Express 實作留言板：新增會員、登入、留言、編輯及刪除 https://coding-ontheway.coderbridge.io/2022/01/13/express-forum/
[4] 如何在Node.js 和Express 中實作微服務？ : r/webdev - Reddit https://www.reddit.com/r/webdev/comments/n13jfn/how_to_implement_microservices_with_nodejs_and/?tl=zh-hant
[5] 用Node.js寫一個Repository Restful API 的留言板(express - PIN-YI https://pin-yi.me/blog/nodejs/nodejs-restful-api-repository-messageboard/
[6] Node.js 與Socket.io - 即時聊天室實作 - Single.9 https://single9.net/2017/12/node-js-%E8%88%87-socket-io-%E5%8D%B3%E6%99%82%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%AF%A6%E4%BD%9C/
[7] 用Node.js 製作簡易的留言版 - Dylan's Blog https://dylan237.github.io/nodejs-message-book.html
[8] 【Nodejs】探索Node.js、NPM和Express - 方格子 https://vocus.cc/article/64ec780ffd89780001dbceec
[9] Node.js - Ian Chu https://ianccy.com/tags/node_js/