十五周刊 - 110
2024 第 15 周周报
欢迎来到十五周刊,我们每周都会分享有价值的前端技术文章,让你随时掌握前端的最新动态。此外,我们还会介绍一些实用的软件工具,帮助你提升工作效率。同时,我们也会分享一些个人生活感悟,希望通过分享,能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。
.git 文件夹里有哪些内容
#工程师学习 一张图的方式看明白 .git 文件夹里面都有哪些内容,挺清晰。
React With TypeScript 教程s
https://www.totaltypescript.com/tutorials/react-with-typescript
一个 React With TypeScript 的教程网站,主要是讲解 React 和 TypeScript 的结合使用。
React Toast 组件
一个 React 的 Toast 组件,支持多种类型的提示,可以非常方便地自定义样式。
AI 贴纸生成器 Sticker.Show
向大家介绍哥飞团队上线的一个新产品,AI贴纸生成器 Sticker.Show 。 要说有什么特色,可能也没啥特色,跟上次给大家介绍过的,@charliebholyz 的 StickerBaker.com 一样都是调用 Replicate 上面的一个AI贴纸模型生成的。…
Homebrew bundle
https://github.com/Homebrew/homebrew-bundle/
Homebrew bundle 是 Homebrew 的一个插件,可以通过一个 Brewfile 文件来管理你的 Homebrew 安装的软件。便于重装系统或者同步多台电脑的软件。
Lang UI
一个为 AI GPT 项目定制的 Tailwind CSS 组件库,在类似 ChatGPT 这样的项目中使用非常方便。
OAuth 2.0 使用 session 存储随机 code 防止 CSRF 攻击
如何防止 CSRF 攻击
微信网页授权登录时,有一个 state 参数,文档没有详细说明。但是这个与 OAuth 2.0 的 code 比较相似,可以用来防止 CSRF 攻击。
在跳转到微信授权页面前,生成一个随机的 state,存储在 session storage 中。在回调时,比较 session 中的 state 和回调参数中的 state 是否一致,来判断是否是合法的回调。
js
1// 生成随机 state 2const state = Math.random().toString(36).substring(2); 3// 存储在 session storage 中 4sessionStorage.setItem('state', state); 5// 跳转到微信授权页面 6window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
js
1// 回调时比较 state 2const state = sessionStorage.getItem('state'); 3if (state !== callbackState) { 4 // 不合法 5}
CSRF 攻击的流程
https://stackoverflow.com/questions/35985551/how-does-csrf-work-without-state-parameter-in-oauth2-0
假设我们有一个笔记软件,用户登录后可以绑定微信账号,以后可以使用微信登录。
攻击流程:
- 攻击者访问笔记的微信授权页面,得到授权链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
- 将授权链接发送给受害者,引导受害者点击(比如伪造成图片)
- 受害者点击链接后,会跳转到微信授权页面,授权后即可将受害者的笔记软件账号绑定到攻击者的微信账号上
- 攻击者可以通过自己的微信登录受害者的账号
正是由于第一步 state 不是随机的,所以攻击者可以自己构造授权链接,引导受害者点击。而如果 state 是随机的,并且使用 session storage 存储,那么攻击者即使构造了授权链接,由于 session storage 是浏览器隔离的,受害者在访问授权链接时,其 session storage 中的 state 与攻击者构造的 state 不一致,从而防止了 CSRF 攻击。
我做了什么
博客迭代
重构博客周刊页面,将大卡片布局改为列表布局,去除了封面,方便查看。同时补充了项目页面以及分享页面。
回收积攒多年的电子设备
周六用转转上门卖了 5 台设备,包括一台 Mac,两部手机以及一台 iPad。整个过程比较轻松,在手机上操作得到评估价后,11 点下单,下午三点就有人上门检测设备,全程有录音,最后的的价格跟评估价也没有差很多,大部分差价是因为设备屏幕老化。当场验完直接支付宝就到账。
虽然价格肯定比自己找买家便宜,但是比较省心,毕竟如果和买家发生纠纷处理起来费时费力。
最后感慨一句淘汰下来的设备尽早出掉比较好,保养得再好时间长了屏幕就会老化,越往后越不值钱。