Nov 10 2025
simonbaker -
隱藏性很高的npm惡意依賴包
KOI的一篇文章，揭露了npm依賴包又一次被攻擊的問題。詳情可查看底部的原文地址。
之前的npm可看這裏《你的項目是否正在使用“帶毒”的chalk npm包？》。
這裏簡單説下幾個點：
1、為什麼惡意的依賴包能上傳到npm？
2、這些依賴包是怎麼執行的？
3、這些依賴包想竊取什麼？
4、竊取到信息後黑客怎麼拿到？
5、怎麼防禦？
1、為什麼惡意的依賴包能上傳到npm？
npm會對上傳的包都
前端
Nov 06 2025
simonbaker -
CSRF攻擊的示例講解
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。
CSRF簡介
Cross-site request forgery，跨站請求偽造，通常縮寫為CSRF或者XSRF。
CSRF之get請求攻擊
發起get請求攻擊比較簡單，只需要通過img標籤就可實現。
因為受瀏覽器同源策略限制，因此不能通過ajax來發起get請求。
Demo驗證
代碼：
// 這段代碼是網站B的頁面，只是發起了網站A的請
csrf
,
xss
Nov 06 2025
simonbaker -
window.name和postMessage跨域詳解
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。
概念
window.name
1、在一個窗口還沒關閉之前，同一個窗口的所有頁面都共享同一個window.name。
這個窗口可理解為chrome瀏覽器的一個tab標籤頁面。另外，從一個頁面中跳轉到另一個頁面後，這些頁面都共享同一個window.name。
2、每個頁面都能讀和寫window.name。
這個可能就是安全問題的來源。
3、w
postmessage
Nov 06 2025
simonbaker -
不同tab頁的數據如何保持一致？
背景
後端同事提了個問題：
當打開實例詳情頁面後，再打開一個tab頁面，然後再訪問實例詳情頁面。如果這時候在某一個tab頁面切換到不同實例了，然後去到另一個tab頁面進行實例的操作，比如升級或者停止。會誤以為當前操作的是同一個實例。但很明顯兩個tab頁的實例是不一樣的，這樣很容易出現誤操作。
所以就想要保持不同tab頁的數據統一。也就是在tab頁面切換實例後，其他tab頁也要跟着切換到該實例。
解
postmessage
,
storage
Nov 05 2025
simonbaker -
XSS和CSRF防禦的經典策略
XSS防禦
1、頁面端防禦
頁面端的XSS防禦的方法，主要是針對輸入和輸出。
一般是在輸入的時候進行校驗，輸出的時候進行轉義。
輸入端的校驗：
所有能輸入的數據，都要列為不可信的數據。在邏輯處理或者存儲之前，都要進行校驗。
校驗的規則儘可能採用白名單而不是黑名單，比如只允許哪些字符，其他字符則一律不通過。
輸出端的轉義：
主要是對準備輸出到html的字符進行轉義。特別是用了v-html的地方。
這
csrf
,
xss
Nov 05 2025
simonbaker -
再談XSS攻擊的例子
舉個例子
Demo1 - 你好
在瀏覽器輸入：http://testxss.com/xss/demo1.html?search=你好
頁面效果如下所示：
demo1.html的代碼如下所示：
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1.0" /
xss
Nov 05 2025
simonbaker -
防禦XSS攻擊：DOMPurify不可或缺
DOMPurify是什麼？
DOMPurify是一個針對DOM的XSS清理器。
DOMPurify有什麼作用？
DOMPurify可以清理HTML並防止XSS攻擊。
你可以用有惡意代碼的HTML字符串來測試DOMPurify，它將返回一個帶有乾淨的HTML字符串。
DOMPurify將去除所有包含危險HTML的內容，從而防止XSS攻擊。
怎麼使用DOMPurify？
// 通過script引入sc
xss
Nov 05 2025
simonbaker -
你知道async await的缺陷嗎？
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。
缺陷
使用async和await後，我們的代碼看起來是同步的。這個就是它的優點。
await會阻塞後面的代碼，直到promise完成。但這會可能出現因為大量的await，導致promise變慢。
因為每個await都會等待前一個完成才執行，但使用promise雖然代碼看起來不是同步的，但請求卻是異步的，不會被阻塞。
Demo
比如下面截圖
async
,
await-async
Oct 27 2025
simonbaker -
svg圖標引發的思考：想晉升高級？這些得了解。
問題背景：
我在優化整理項目代碼的時候，發現項目中有通過svg-icon name="xxx"/svg-icon方式引用的svg圖標，也有通過iconfonti class="iconfont xxx"/i引用的圖標。
然後當好幾個項目改造為對接微前端的時候，發現有些樣式衝突了（千萬不要小看樣式問題（看似簡單的問題），往往背後藏着不少值得深挖的學問）
復現步驟：
先在微前端中打開A項目，圖標顏色是
前端
,
svg
Aug 22 2022
simonbaker -
前端二次非對稱RSA加密密文太長的問題
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。
有任何問題都可以留言諮詢。
問題
兩個平台項目中，各自的前後端的密碼傳輸，都用了非對稱RSA加密。
流程是這樣的：
平台A的前端，需要把加密後的密文傳給平台B的前端，然後平台B的前端都會對密碼進行加密，然後再傳輸給平台B的後端。
平台B的後端解密後，再傳輸給平台A的後端。
導致的問題：
因為平台B的前端，拿到的密碼是已經
rsa
Jun 24 2022
simonbaker -
koa異常處理詳解
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝
問題
koa是怎麼處理異常的？
分析
首先了解下node.js是怎麼處理異常的
一般來説，node.js頂層有個uncaughtException事件，當異常沒被捕獲的時候，就會一層層上升，直到觸發定義好的uncaughtException事件。
但有個問題，node.js最大的特點是異步機制。比如讀取文件信息的stat的異步寫法：
req
koa
,
前端
May 31 2022
simonbaker -
koa原理詳解
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝
先看個Demo
app.use(async (ctx, next) = {
console.log(1)
await next()
console.log(2)
ctx.body = 'Hello Koa';
});
app.use(async (ctx, next) = {
console.log(3)
await
koa
