标签： js

发布于

JS `CSP` `report-uri` `Endpoint Security` 与 `Report-To Header`

各位靓仔靓女，晚上好！我是你们今晚的 CSP、报告、安全端点、Report-To 的串讲人，咱们今天来好好聊聊这些听起来高大上，但其实接地气的 Web 安全话题。准备好你的咖啡，咱们要开始了！ 第一章：CSP，你的网站卫士 CSP (Content Security Policy)，内容安全策略，顾名思义，就是告诉浏览器，你的网页内容哪些是允许加载的，哪些是不允许的。想象一下，你的网站是个夜店，CSP 就是保安，负责检查进出的人是不是带了不该带的东西（比如恶意脚本）。 1.1 为什么需要 CSP？ 没有 CSP，你的网站就如同不设防的城市，XSS 攻击（跨站脚本攻击）可以轻易得逞。攻击者可以注入恶意脚本，盗取用户信息、篡改页面内容，甚至控制用户的浏览器。 1.2 CSP 的基本原理 CSP 通过 HTTP 响应头或者 <meta> 标签来声明策略。策略内容是一系列指令，每个指令定义了某种资源的来源白名单。 1.3 CSP 的使用方法 HTTP 响应头： Content-Security-Policy: default-src ‘self’; script-src ‘self …

继续阅读“JS `CSP` `report-uri` `Endpoint Security` 与 `Report-To Header`”

发布于

JS `Trusted Types` `Policy` `Factory` 与 `Hooking DOM Sinks`

各位观众老爷，大家好！今天咱们来聊聊一个听起来高大上，但实际上是为了保护咱们前端安全的小可爱——Trusted Types。 开场白：前端江湖，暗流涌动 各位在前端江湖摸爬滚打多年，一定听过 XSS 攻击的大名。想象一下，辛辛苦苦写的代码，突然被别有用心的人塞进一段恶意脚本，用户一不小心就中招，那感觉，简直比吃了苍蝇还难受！ Trusted Types 就是来解决这个问题的。它就像一个守门员，严格把控着进入 DOM 的数据，确保咱们的代码安全可靠。 第一幕：什么是 Trusted Types？ 简单来说，Trusted Types 是一种浏览器安全机制，它通过限制 DOM 接收的数据类型，来防止 XSS 攻击。 默认情况下，浏览器会阻止将字符串直接赋值给某些“危险”的 DOM 属性，比如 innerHTML，src，href 等。 划重点：DOM Sink 这些“危险”的 DOM 属性，我们称之为 DOM Sink。 它们是数据流入 DOM 的入口，也是 XSS 攻击最喜欢光顾的地方。 举个例子： <div id=”myDiv”></div> <scrip …

继续阅读“JS `Trusted Types` `Policy` `Factory` 与 `Hooking DOM Sinks`”

发布于

JS `WebAssembly` `Shared Memory` `Multi-Threading` `Performance Benchmark`

嘿，各位代码界的弄潮儿们，今天咱们来聊点刺激的——JavaScript、WebAssembly、共享内存和多线程，再顺便搞个性能大比武！准备好了吗？系好安全带，发车咯！ 开场白：单线程的悲歌与多线程的曙光 话说JavaScript这孩子，天生就是个单线程的主儿。这意味着啥？意味着它一次只能干一件事，就像你一边吃火锅一边写代码，只能先涮肉再敲键盘，没法同时进行，效率嘛，可想而知。 但是！时代在进步，技术在发展。随着WebAssembly的出现，以及共享内存和多线程的加入，JavaScript终于有机会摆脱单线程的束缚，化身多面手，效率蹭蹭往上涨！ 第一部分：WebAssembly——JavaScript的“超能力”药丸 WebAssembly（简称Wasm），可不是什么新的编程语言，而是一种新的二进制格式。你可以把它理解为JavaScript的“超能力”药丸。它允许你用C/C++/Rust等语言编写高性能的代码，然后编译成Wasm模块，在浏览器中运行。 1.1 为什么需要WebAssembly？ 性能怪兽： Wasm代码的执行速度接近原生代码，远超JavaScript。 语言自由： 你可 …

继续阅读“JS `WebAssembly` `Shared Memory` `Multi-Threading` `Performance Benchmark`”

发布于

JS `Temporal Scheduling` (`requestIdleCallback`, `scheduler.yield`) `Priority Queue` 实现

各位观众，晚上好！欢迎来到“时间管理大师的JS修炼手册”讲座现场。今天，咱们不聊诗和远方，就聊聊如何让JavaScript代码更优雅地“摸鱼”——也就是，更高效地利用时间，优先处理重要的事情。我们要聊的是Temporal Scheduling（时间调度）和Priority Queue（优先级队列），这两个家伙可是提升前端性能、优化用户体验的利器。 第一章：摸鱼的艺术——requestIdleCallback 登场 想象一下，你是一个餐厅服务员，客人点了很多菜，但厨房只有你一个人。你肯定不能一股脑儿全做，不然客人早就饿死了。你需要先做那些容易做的、客人催得急的菜，剩下的不着急的，等空闲了再慢慢来。 requestIdleCallback就相当于这个“空闲了”的时间。它允许你在浏览器空闲时执行一些不那么紧急的任务，比如数据分析、DOM更新、预加载资源等等。 function myBackgroundTask(deadline) { // deadline.timeRemaining() 返回当前帧剩余的时间（毫秒） while (deadline.timeRemaining() > …

继续阅读“JS `Temporal Scheduling` (`requestIdleCallback`, `scheduler.yield`) `Priority Queue` 实现”

发布于

JS `WebTransport` `Reliable Streams` 与 `Unreliable Datagrams` 的混合应用

好吧，大家好！今天咱们来聊聊 WebTransport 里的“双面间谍”—— Reliable Streams 和 Unreliable Datagrams 的混合应用。这俩家伙就像一对性格迥异的兄弟，一个稳重可靠，一个风风火火，凑到一块儿能玩出不少花样。 一、WebTransport 简介：咱们先来热热身 WebTransport，简单来说，就是个在浏览器和服务器之间建立双向通信通道的技术。它基于 HTTP/3，所以天生自带 QUIC 的各种优点，比如多路复用、低延迟等等。你可以把它想象成一根水管，能同时传输好几种不同的“水”（数据）。 和 WebSocket 相比，WebTransport 更强大，更灵活。WebSocket 就像一条单行道，只能传输文本或二进制数据；而 WebTransport 则像一个高速公路，可以同时跑好几条车道，而且车道类型还不一样，有可靠的，有不可靠的。 二、主角登场：Reliable Streams vs. Unreliable Datagrams 接下来，咱们隆重介绍今天的主角： Reliable Streams (可靠流)： 这家伙就像个老实巴交的快 …

继续阅读“JS `WebTransport` `Reliable Streams` 与 `Unreliable Datagrams` 的混合应用”

发布于

JS `IPFS` / `Libp2p` `DHT` (Distributed Hash Table) 路由与内容寻址

各位观众，晚上好！今天咱们来聊聊 IPFS 和 Libp2p 里头那个神秘又重要的家伙：DHT（分布式哈希表）。这玩意儿听起来高大上，其实就是个“寻宝图”，能帮我们在茫茫数据海洋里找到我们想要的宝贝。 开场白：寻宝之旅的向导 想象一下，你手里有一张藏宝图，上面写着“在北纬34度，东经118度的地方埋着金子”。如果没有这张藏宝图，你可能得把整个地球都挖一遍才能找到金子。DHT 在 IPFS 和 Libp2p 里扮演的就是这个“藏宝图”的角色，它能告诉你某个文件（或者其他数据）存在哪里，大大提升了我们寻找内容的速度。 第一章：DHT 的基本概念：大杂烩的哈希表 DHT，全称 Distributed Hash Table，分布式哈希表。关键就在于“分布式”和“哈希表”。 哈希表 (Hash Table)：这玩意儿大家应该不陌生。简单来说，它就是一个 key-value 存储结构。你给它一个 key，它就能快速找到对应的 value。比如 map[‘apple’] = ‘红色的水果’。 分布式 (Distributed)：重点来了！DHT 不是把所有 key-value 都存在一台机器上，而是 …

继续阅读“JS `IPFS` / `Libp2p` `DHT` (Distributed Hash Table) 路由与内容寻址”

发布于

JS `Distributed Identifiers (DIDs)` `Verifiable Credentials (VCs)` `Presentation Exchange`

各位观众老爷，大家好！今天咱们来聊聊DIDs、VCs 和 Presentation Exchange 这三个家伙，它们可是构建下一代互联网信任体系的关键角色。这三个玩意儿听起来唬人，其实没那么复杂，咱们用大白话 + 代码的方式，保证你听完能上手。 一、DID：数字身份的身份证 想象一下，在网上冲浪，你得注册各种账号，密码记都记不过来，还得担心被盗号。DID 就是来解决这个问题的，它给你一个去中心化的数字身份，你自己说了算，不用依赖任何中心机构。 啥是 DID？ DID (Distributed Identifier) 是一种新型的标识符，它具有以下特点： 去中心化 (Decentralized)： 不依赖于中心化的身份提供商。 可控性 (Controllable)： 你自己控制你的 DID。 可验证性 (Verifiable)： 可以通过密码学方法验证 DID 的所有权。 持久性 (Persistent)： 即使你离开某个平台，DID 仍然存在。 DID 的结构 一个 DID 通常长这样：did:method:identifier did: 固定前缀，表示这是一个 DID。 metho …

继续阅读“JS `Distributed Identifiers (DIDs)` `Verifiable Credentials (VCs)` `Presentation Exchange`”

发布于

JS `Operational Transforms` `String OT` / `JSON OT` 算法与协同编辑库

各位靓仔靓女，大家好！我是今天的主讲人，江湖人称“代码搬运工”。今天咱们来聊聊协同编辑的幕后英雄——Operational Transforms (OT)，也就是操作转换。这玩意儿听起来高大上，其实就是一套巧妙的算法，让多人同时编辑同一份文档而不打架。 我们今天要讲的内容包括： 啥是协同编辑？ 为什么要用OT？ OT核心概念： 操作、转换、一致性 String OT： 字符串操作的OT，代码撸起来！ JSON OT： JSON数据结构的OT，让数据飞起来！ 协同编辑库： 现有的一些JS库，咱们瞅瞅它们的实现思路。 实战演练： 手撸一个简易String OT协同编辑器。 一些问题和挑战： OT也不是万能的，说说它的局限性。 好，废话不多说，咱们开始！ 1. 啥是协同编辑？为什么要用OT？ 协同编辑，顾名思义，就是很多人同时编辑同一份文档。这玩意儿在Google Docs、石墨文档、腾讯文档里天天见。没了它，多人在线协作就成了“你改完了我再改”的串行操作，效率低到爆炸。 那为啥要用OT呢？ 想象一下，小明和小红同时编辑一篇文档： 初始状态： "Hello" 小明： 在& …

继续阅读“JS `Operational Transforms` `String OT` / `JSON OT` 算法与协同编辑库”

发布于

JS `CRDT` `Conflict Resolution` `Algorithms` (`LWW-Element-Set`, `G-Set`) 细节

各位观众，晚上好！我是你们今晚的CRDT导游，今天咱们一起扒一扒CRDT里那些“相爱相杀”的冲突解决算法，特别是LWW-Element-Set和G-Set这两位老朋友。别担心，我会尽量把这些硬核概念讲得像听段子一样有趣。 CRDT：分布式世界的“和平大使” 首先，简单回顾一下CRDT（Conflict-free Replicated Data Type，无冲突复制数据类型）。想象一下，你和你的朋友们同时编辑一个文档，每个人都在本地修改，然后同步到云端。如果你们修改了同一段文字，就可能产生冲突。CRDT的作用就像一个“和平大使”，它保证了无论你们以何种顺序同步修改，最终所有人的文档都会达成一致。 CRDT的核心思想是让数据操作本身具有交换律、结合律和幂等性，这样即使操作顺序不同，结果也一样。这听起来有点抽象，没关系，我们马上就要深入到具体的算法中了。 G-Set：简单粗暴的“只增不减” G-Set (Grow-Only Set) 是最简单的CRDT之一。它的原则非常简单：只能添加元素，不能删除。就像一个单向的垃圾桶，东西扔进去就再也拿不出来了。 原理： G-Set维护一个集合，只能添加元 …

继续阅读“JS `CRDT` `Conflict Resolution` `Algorithms` (`LWW-Element-Set`, `G-Set`) 细节”

发布于

JS `gRPC-Web` `Metadata` `Interceptors` 与 `Load Balancing`

各位观众老爷，大家好！今天咱们来聊聊 gRPC-Web 的那些事儿，重点是 Metadata、Interceptors 和 Load Balancing。这三位啊，在 gRPC-Web 的江湖里，那可是鼎鼎大名，掌握了他们，你的 gRPC-Web 应用就能更上一层楼。 一、Metadata：消息里的“暗号” 首先，咱们说说 Metadata。你可以把它想象成消息里的“暗号”，客户端和服务端可以通过它传递一些额外的信息，这些信息不属于业务数据，但是对于请求的处理却至关重要。 1. 什么是 Metadata？ Metadata 是一种键值对的集合，键和值都是字符串。它允许你在 RPC 调用中传递一些元数据，比如认证信息、请求 ID、跟踪信息等等。 2. 为什么要用 Metadata？ 认证授权： 在 Metadata 中携带 Token，验证用户的身份。 请求跟踪： 传递 Trace ID，方便链路追踪。 A/B 测试： 根据 Metadata 中的参数，将用户导向不同的实验组。 国际化： 通过 Metadata 传递语言信息，服务端返回对应的语言版本。 3. 如何使用 Metadata？ …

继续阅读“JS `gRPC-Web` `Metadata` `Interceptors` 与 `Load Balancing`”