寫給網頁開發者的 CSRF 理解與防範
無論如何都不輕易相信用戶請求即能最大程度防範 CSRF。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。
無論如何都不輕易相信用戶請求即能最大程度防範 CSRF。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。
The summary is to never easily trust user input to prevent XSS to the greatest extent. Recently, I found my knowledge in this area lacking.
总结是无论如何都不轻易相信用户输入即能最大程度防范 XSS。最近在碰一些资安的东东，发现自己对这一块知识都比较薄弱，身为前端工程师资安通常并不是首要关注的职责，但一旦有漏洞保证后果不堪设想，于是近期来补足一下这方面的知识。现代齐全的工具与文件帮助下意外执行用户提供的恶意脚本的概率已经大幅降低。
總結是無論如何都不輕易相信用戶輸入即能最大程度防範 XSS。最近在碰一些資安的東東，發現自己對於這一塊知識都比較薄弱，身為前端工程師資安通常並不是首要關注的職責，但一但有漏洞保證後果不堪設想，於是近期來補足一下這方面的知識。現代齊全的工具與文件幫助下意外執行用戶提供的惡意腳本的機率已經大幅降低。
I found many common functions scattered throughout the project. So, I took the opportunity to organize a unified structural rule for the team to use.
Vite does not perform Tree Shake during development, leading to a lot of unused code being bundled, severely affecting the development experience.
我之所以调查这个主题，是因为目前所在的团队大量使用这种模式，但 Vite 在开发中不进行 Tree Shake，导致每次开发环境都有大量无用代码被打包，严重影响开发体验。因此研究一下这种方法的理念与优缺点以架构更好的项目。
會想調查這個主題是因為目前所在的團隊大量地使用到這樣的模式，但 Vite 並不會在開發中進行 Tree Shake 就導致每一次開發環境都有大量的無用代碼被打包進去，嚴重影響到開發體驗。因此研究一下這種方法的理念與優缺點以架構更好的專案。
I previously wrote an article about the built-in data structure in ES6 JavaScript: Map. This time, let's discuss WeakMap and how it differs from Map.
前面写了一篇文章关于 ES6 JavaScript 当中的内建数据结构： Map，这次来谈谈 WeakMap，它又与 Map 有什么不同呢？会发现 WeakMap 相较 `Map` 少了非常多可用的方法，这是因为它们的根本处理数据的方式不同，Map 是强引用，而 WeakMap 是弱引用。
前面寫了一篇文章關於 ES6 JavaScript 當中的內建資料結構： Map，這次來談談 WeakMap，它又與 Map 有什麼不同呢？會發現 WeakMap 相較 `Map` 少了非常多可用的方法，這是因為它們的根本處理資料的方式不同，Map 是強引用，而 WeakMap 是弱引用。
Browsers began to introduce Web Components related APIs and standards, but I never had the chance to use this technology in practice.
从很早以前就大致知道浏览器开始推出 Web Components 相关 API 与标准，但一直没有机会在实战中使用这项技术。想撰写这篇文章记录是因为随着时间推移发现 Web Components 的应用范围越来越广，因此趁着有空也来了解一下相关知识，并且分析它与现有的解决方案有什么不同。