标签： frame

发布于

Clickjacking (点击劫持) 攻击的原理和防御措施 (X-Frame-Options, Content-Security-Policy: frame-ancestors)。

同学们，早上好！我是老码农，今天咱们来聊聊一个听起来有点像好莱坞大片的网络安全问题——Clickjacking，中文名叫“点击劫持”。 啥是点击劫持？简单来说，就是坏人把你带到一个看起来无害的网站上，然后在你不知不觉中，让你点击了另一个网站上的按钮，做了你原本不想做的事情。是不是有点像电影里的催眠术？ 一、点击劫持的“障眼法” 想象一下，你在网上开开心心地浏览猫片，突然出现一个弹窗，说“恭喜你获得免费iPhone！点击领取！” 你心想，天上掉馅饼了？赶紧点一下。 但实际上，这个“免费iPhone”的弹窗背后，可能隐藏着一个你正在登录的银行网站的“转账”按钮。坏人通过一些技术手段，把银行网站的转账按钮透明地覆盖在了“领取iPhone”的按钮上。你以为点击了“领取iPhone”，实际上却点击了“转账”，把钱转到了坏人的账户里。 这就是点击劫持的精髓：欺骗用户点击隐藏的元素，执行恶意操作。 它主要利用了 HTML 中的 <iframe> 标签。 <iframe> 允许在一个网页中嵌入另一个网页。坏人就可以把目标网站嵌入到自己的网站里，然后通过 CSS 样式，把目标网站 …

继续阅读“Clickjacking (点击劫持) 攻击的原理和防御措施 (X-Frame-Options, Content-Security-Policy: frame-ancestors)。”

发布于

HTTP/2 Frame 解析：如何从原始二进制流中提取 HEADERS, DATA, SETTINGS 等帧，并对其进行篡改？

HTTP/2 帧解析与篡改：一场二进制世界的探险 大家好，我是你们今天的导游，带大家深入HTTP/2的二进制丛林，一起探险帧（Frame）的秘密，并学习如何成为一位“帧”的艺术家，创造性地修改它们。 首先，我们得明确一点：HTTP/2 帧是HTTP/2通信的基石。所有的数据，包括请求头、响应体，甚至连接控制信息，都被封装在帧中进行传输。理解帧的结构，就等于掌握了HTTP/2的命脉。 HTTP/2 帧结构：拆开“乐高玩具” HTTP/2 帧由以下几个关键部分组成，可以想象成一个精心设计的“乐高玩具”： 字段名称 长度 (bytes) 描述 Length 3 帧负载的长度，不包括帧头（Length 和 Type，Flags，R）。最大值为 2^24 – 1 (16,777,215)。 Type 1 帧的类型，决定了帧的含义。例如，HEADERS、DATA、SETTINGS 等。 Flags 1 帧的标志位，用于指示帧的特定属性。不同的帧类型有不同的标志位定义。 R 1 保留位，必须设置为 0。 （虽然这个字段没什么实际用处，但也不能忽略它，毕竟它也是帧结构的一部分。） Stre …

继续阅读“HTTP/2 Frame 解析：如何从原始二进制流中提取 HEADERS, DATA, SETTINGS 等帧，并对其进行篡改？”

发布于

CSS `Frame Budget` `Long Frames` `Jank Detection` 与性能瓶颈定位

各位观众老爷，大家好！ 今天咱们来聊聊网页性能优化里的几个磨人的小妖精：CSS Frame Budget、Long Frames、Jank Detection，以及如何利用它们来揪出性能瓶颈。 做好心理准备，前方高能，段子与代码齐飞！ 开场白：什么是Frame Budget，它为何如此重要？ 想象一下，你正在看一部电影。电影流畅的关键是什么？就是每秒播放的帧数 (Frames Per Second, FPS)。 FPS 越高，画面越流畅。 网页也一样。 理想情况下，网页应该以 60 FPS 运行，这样用户才能获得流畅的体验。 Frame Budget，顾名思义，就是浏览器渲染每一帧所允许的时间预算。 按照 60 FPS 的标准，浏览器渲染每一帧的时间预算大约是 16.67 毫秒 (1000 ms / 60 FPS)。 超过这个预算，就会导致掉帧，也就是俗称的 Jank， 用户体验瞬间下降。 所以，Frame Budget 是一个衡量网页性能的重要指标。 它告诉我们，我们的代码是否能够快速高效地渲染页面，保证用户体验的流畅性。 第一章：Long Frames，罪魁祸首的自我暴露 Long …

继续阅读“CSS `Frame Budget` `Long Frames` `Jank Detection` 与性能瓶颈定位”

发布于

JS `HTTP/2` `Frame` 解析与二进制协议分析

各位观众老爷，大家好！今天咱们来聊聊HTTP/2的Frame解析和二进制协议分析，这玩意儿听起来高大上，其实扒开皮儿，也就是一堆0和1，外加一些精心设计的格式而已。别怕，我会尽量用大白话，加上一些代码示例，让大家都能听明白。 开场白：HTTP/2 是个啥？ HTTP/1.1用了这么多年，有些老态龙钟了。队头阻塞、头部冗余等等问题，让网页加载速度慢吞吞的。HTTP/2就是为了解决这些问题而生的。它最大的特点就是使用了二进制协议，并且引入了多路复用、头部压缩等机制。 啥是二进制协议？ 简单来说，就是把原本的文本协议，变成了0和1组成的二进制流。 这样做的好处是： 更高效： 计算机处理二进制数据效率更高。 更紧凑： 二进制数据可以更节省空间。 更易解析： 结构化的二进制数据更容易解析。 Frame：HTTP/2 的基本单位 在HTTP/2中，所有的数据都被封装在Frame中传输。 Frame就像一个个小包裹，每个包裹都有自己的类型和数据。理解Frame的结构，是理解HTTP/2的关键。 Frame 的结构 每个Frame都由一个9字节的Header和一个Payload组成。 字段 长度（字节 …

继续阅读“JS `HTTP/2` `Frame` 解析与二进制协议分析”

发布于

Request Animation Frame：流畅动画渲染与性能最佳实践

Request Animation Frame：让你的动画丝般顺滑，性能飞起！🚀 大家好！我是你们的老朋友，一位在代码海洋里摸爬滚打多年的老船长。今天，我们要扬帆起航，探索一个神奇的宝藏——requestAnimationFrame！ 别害怕，这不是什么深奥的魔法咒语，而是一个让你的网页动画丝般顺滑，性能飞起的秘密武器！ 想象一下，你辛辛苦苦写了一个超酷的动画，满心期待地想让用户惊艳一把。结果呢？卡顿！掉帧！就像老牛拉破车，一步一喘气。 🤯 这感觉是不是糟透了？别担心，requestAnimationFrame就是来拯救你的！ 什么是 requestAnimationFrame？（听起来很高大上，其实很简单） 简单来说，requestAnimationFrame（简称 rAF）是一个浏览器提供的 API，它会告诉浏览器： “嘿，浏览器老弟，我想在下一次重新渲染画面之前做点事情（通常是更新动画）。” 然后浏览器会聪明地安排好时间，确保你的动画更新和浏览器的刷新同步进行。 你可以把它想象成电影院的放映员。 🎞️ 没有 rAF: 你让放映员随便放，他心情好就快点放，心情不好就慢点放，结果观众 …

继续阅读“Request Animation Frame：流畅动画渲染与性能最佳实践”