前言

这篇文章是多年前在 SegmentFault 上的一个回答，原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器，点击后会出现对应的日期。虽然已经有 Canvas 的答案了，不过当时正好在学习 SVG 就顺手自己实现了一下。我感觉对大家去理解 SVG 的贝塞尔曲线会有一定的帮助，所以重新整理了下发出来。另外感兴趣的同学还可以去原问题上看一下，除了标准答案 Canvas 的实现以及我写的 SVG 实现之外，还有使用 DIV+CSS 的实现方案。

阅读全文→

说到视频字幕格式，一般大家都会想到 .srt, .ass 之类大家比较常用的格式。而现在说到 Web 字幕格式，大家第一反应肯定都是 WebVTT。我们知道在<video>或者<audio> 标签中要加载字幕的话，需要使用 <track> 标签将字幕文件嵌入进来。而在 track 的文档中我们会发现其实还有一种 Web 字幕格式，那就是本文的主角 TTML。

The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).
via: <track>: The Embed Text Track element

阅读全文→

什么是目录遍历

第一次接触到目录遍历漏洞还是在 ThinkJS 2 的时候。代码如下图，目的是当用户访问的 URL 是静态资源的时候返回静态资源的地址。其中 pathname 就是用户访问的 URL 中的路径，我们发现代码中只是简单的解码之后就在22行将其与资源目录做了拼接，这就是非常明显的目录遍历漏洞了。

阅读全文→

开篇之前先介绍一下场景。信息流是一个基于用户兴趣使用算法将用户感兴趣的新闻内容推荐给用户的一种业务。这种业务带有非常特色的场景就是用户有一个“永远”都刷不完的推荐流列表，点击列表中的新闻之后可以跳转到其详情页中查看新闻的正文内容。列表一般都是由客户端原生去实现的，而详情页这块由于新闻内容结构的复杂性，一般还是会使用 h5 来实现。这样就对我们 h5 的性能提出了要求，我们必须在用户切换的时候将切换的白屏时间尽量减少，这样才能提高用户的阅读体验。

本文就将为大家讲述一下我们是如何实现性能优化达到“闪开”的效果的。我们可以先看看效果，下图左边是正常版本，而右边的是优化后的版本。对比之下可以发现即使我已经悄咪咪的先点击左边的手机，同一篇新闻右边的打开速度明显比左边的要快很多。接下来就让我们看看这个是如何做到的吧！

阅读全文→

文件上传漏洞及危害

文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器上，当开发者没有对该文件进行合理的校验及处理的时候，很有可能让程序执行这个上传文件导致安全漏洞。大部分网站都会有文件上传的功能，例如头像、图片、视频等，这块的逻辑如果处理不当，很容易触发服务器漏洞。这种漏洞在以文件名为 URL 特征的程序中比较多见。嗯，是的说的就是世界上最好的语言 PHP。例如用户上传了一个 PHP 文件，拿到对应文件的地址之后就可以执行它了，其中的危害自然不言而喻。那在 Node.js 中就没有文件上传漏洞了么？答案肯定是否的。除了可执行文件外，还有以下几个潜在的问题。

阅读全文→

前几天 Google IO 上 V8 团队为我们分享了《What's New in JavaScript》主题，分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容，嘉宾主要是分享了以下几点：

1. JS 解析快了 2 倍
2. async 执行快了 11 倍
3. 平均减少了 20% 的内存使用
4. class fileds 可以直接在 class 中初始化变量不用写在 constructor 里
5. 私有变量前缀
6. string.matchAll 用来做正则多次匹配
7. numeric seperator 允许我们在写数字的时候使用 _ 作为分隔符提高可读性
8. bigint 新的大数字类型支持
9. Intl.NumberFormat 本地化格式化数字显示
10. Array.prototype.flat(), Array.prototype.flatMap() 多层数组打平方法
11. Object.entries() 和 Object.fromEntries() 快速对对象进行数组操作
12. globalThis 无环境依赖的全局 this 支持
13. Array.prototype.sort() 的排序结果稳定输出
14. Intl.RelativeTimeFormat(), Intl.DateTimeFormat() 本地化显示时间
15. Intl.ListFormat() 本地化显示多个名词列表
16. Intl.locale() 提供某一本地化语言的各种常量查询
17. 顶级 await 无需写 async 的支持
18. Promise.allSettled() 和 Promise.any() 的增加丰富 Promise 场景
19. WeakRef 类型用来做部分变量弱引用减少内存泄露

阅读全文→

什么是 OS 命令注入

上周我们分享了一篇 《Web 安全漏洞之 SQL 注入》，其原理简单来说就是因为 SQL 是一种结构化字符串语言，攻击者利用可以随意构造语句的漏洞构造了开发者意料之外的语句。而今天要讲的 OS 命令注入其实原理和 SQL 注入是类似的，只是场景不一样而已。OS 注入攻击是指程序提供了直接执行 Shell 命令的函数的场景，当攻击者不合理使用，且开发者对用户参数未考虑安全因素的话，就会执行恶意的命令调用，被攻击者利用。

阅读全文→

什么是 SQL 注入

“有人的地方就有江湖，有数据库存在的地方就可能存在 SQL 注入漏洞。”

阅读全文→

前言

在现代新建一个 JS 相关的项目往往都是从 package.json 文件开始的，不过这个文件里需要的字段实在是太多了，正常人都记不住，所以 npm 官方提供了 npm init 命令帮助我们快速初始化 package.json 文件。执行之后会有一个交互式的命令行让你输入需要的字段值，当然如果你想直接使用默认值，也可以使用 npm init -y 来超速初始化。

阅读全文→

什么是 CSRF

在了解 CSRF 之前我们需要科普两个前提。首先是登录权限验证的方式有很多种，目前绝大多数网站采用的还是 session 会话任务的方式。session 机制简单的来说就是服务端使用一个键值对记录登录信息，同时在 cookie 中将 session id（即刚才说的键）存储到 cookie 中。另外我们又知道浏览器中 HTTP(s) 请求是会自动帮我们把 cookie 带上传给服务端的。这样在每次请求的时候通过 cookie 获取 session id，然后通过它在服务端获取登录信息即可完成用户权限的校验。

阅读全文→