在網站前端開發中，我們常常會引入各種第三方 JavaScript Library，像是 jQuery、Bootstrap、Lodash 等。但這些套件如果長時間沒有更新，就可能存在漏洞，例如：
手動檢查版本號很麻煩，因此我們可以交給 AI Agent：
server.js 模擬一個前端頁面，引用舊版 jQuery。agent.js 爬取 HTML，抓取 <script> 標籤的 library 版本。建立一個簡單的 Express 伺服器，回傳含有過時 jQuery 的 HTML。
import express from "express";
const app = express();
const PORT = 3000;
app.get("/", (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<title>測試頁面</title>
<!-- 故意引用過時的 jQuery 版本 -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1>前端弱點測試</h1>
<p>這個頁面引用了過時的 jQuery 版本。</p>
</body>
</html>
`);
});
app.listen(PORT, () => {
console.log(`測試伺服器啟動：http://localhost:${PORT}`);
});
用 fetch 取得伺服器回應
async function fetchHtml() {
const res = await fetch(targetUrl);
return await res.text();
}
下 Prompt，請 AI 判斷是否引用了過時的 JS Library，並給出修正建議
async function analyzeHtml(html) {
const prompt = `
你是一位資安顧問 AI。
以下是網站的 HTML 內容，請檢查是否引用了過時或有漏洞的 JavaScript Library。
- 請列出「弱點 → 原因 → 建議修正」。
- 如果發現版本過時，請建議更新到最新穩定版本。
HTML:
${html}
`;
const result = await model.generateContent(prompt);
console.log("AI Agent 分析結果：\n");
console.log(result.response.text());
}
(async () => {
const html = await fetchHtml();
await analyzeHtml(html);
})();
iThome鐵人賽
看影片追技術