标签： url

发布于

Blob URL / Data URL 注入如何导致 Arbitrary Code Execution (任意代码执行)？请分析其在浏览器渲染流程中的风险点。

各位靓仔靓女，晚上好！我是今晚的讲师，很高兴能和大家一起聊聊“Blob URL / Data URL 注入导致任意代码执行”这个听起来有点吓人的话题。别怕，我会尽量用大白话把它讲清楚，保证你们听完能对着镜子自信地说：“这玩意儿，我懂！” 一、什么是 Blob URL 和 Data URL？ 先来认识一下我们今天的主角：Blob URL 和 Data URL。 Blob URL： 你可以把它想象成一个指向“一大坨二进制数据”的快捷方式。这“一大坨”数据可能是一张图片、一段音频、一个视频，甚至是JavaScript代码。Blob URL实际上是一个URL，它指向浏览器内部创建的一个Blob对象。 代码示例 (JavaScript): // 创建一个包含 JavaScript 代码的 Blob 对象 const code = “alert(‘Hello from Blob URL!’);”; const blob = new Blob([code], { type: ‘text/javascript’ }); // 创建 Blob URL const blobURL = URL.create …

继续阅读“Blob URL / Data URL 注入如何导致 Arbitrary Code Execution (任意代码执行)？请分析其在浏览器渲染流程中的风险点。”

发布于

JS `Blob URL` / `Data URL` 注入与 `Arbitrary Code Execution`

各位观众，欢迎来到今天的“Blob URL/Data URL 注入与 Arbitrary Code Execution”脱口秀…啊不，技术讲座！我是你们的老朋友，今天就让我们一起揭开这些看似神秘的 URL 背后隐藏的风险。 先来个热身，我们都见过 URL，每天都在用，但 Blob URL 和 Data URL 又是啥？它们跟安全又有啥关系？别急，咱们慢慢聊。 第一幕：URL 的那些事儿 URL，也就是 Uniform Resource Locator，统一资源定位符，简单说就是网址。我们熟悉的 https://www.example.com/index.html 就是一个 URL。但是，URL 家族可不止这么一个成员，还有两位“特立独行”的兄弟：Blob URL 和 Data URL。 Blob URL (Binary Large Object URL)：这玩意儿就像一个“临时身份证”，指向浏览器内存中存储的二进制数据（比如图片、视频、音频）。它不是指向服务器上的文件，而是指向浏览器自己“创造”出来的数据。 举个例子，你用 JavaScript 从摄像头获取了一段视频数据， …

继续阅读“JS `Blob URL` / `Data URL` 注入与 `Arbitrary Code Execution`”

发布于

JS `URL` 与 `URLSearchParams` API：URL 解析与参数操作

各位观众，大家好！今天咱们来聊聊前端开发中两个非常实用，但又容易被忽略的小伙伴：URL 和 URLSearchParams。它们就像一对黄金搭档，专门负责处理 URL 这种让人又爱又恨的字符串。别担心，咱们今天就用最轻松的方式，把它们摸透！ 开场白：URL，前端的门面担当 在Web世界里，URL (Uniform Resource Locator) 就像是房子的地址，浏览器通过它找到对应的资源。前端工程师每天都要和URL打交道，无论是页面跳转、API请求，还是数据传递，都离不开它。一个URL包含了协议、域名、端口、路径、查询参数等等信息，看似简单，实则蕴含着丰富的内涵。 URL API：URL 的解剖大师 JavaScript的 URL API 就像一个解剖大师，可以将URL字符串拆解成各个部分，方便我们进行操作。 1. 创建 URL 对象 首先，我们需要创建一个 URL 对象。有两种方式： 基于绝对 URL: const url = new URL(‘https://www.example.com:8080/path/to/resource?param1=value1&par …

继续阅读“JS `URL` 与 `URLSearchParams` API：URL 解析与参数操作”

发布于

**CSS** `filter: url()`：将 SVG 滤镜应用于 HTML 元素，创意无限

CSS滤镜的奇幻漂流：filter: url() 带你玩转SVG的魔法世界 各位看官，今天咱们不聊那些正襟危坐的CSS布局，也不谈那些让人头大的响应式设计。今天我们要聊点好玩的，聊点能让你的网页瞬间变得高大上的魔法——CSS滤镜！ 别一听“滤镜”就想到美颜相机，虽然它们本质上都是对图像进行处理，但CSS滤镜可比美颜相机高级多了，它能赋予你的网页元素各种奇特的视觉效果。而在这众多滤镜效果中，filter: url() 绝对是最神秘、最强大，也最让人着迷的一个。 想象一下，你可以用CSS让一张普通的图片变得像油画一样充满艺术气息，或者让一个按钮像水晶一样晶莹剔透，甚至还能让整个网页都笼罩在一层梦幻般的色彩之中。这些，filter: url() 都能做到！ filter: url()：通往SVG魔法世界的传送门 简单来说，filter: url() 的作用就是把你写的SVG滤镜应用到HTML元素上。它就像一个传送门，连接了CSS和SVG这两个看似独立的领域，让你能够利用SVG强大的图像处理能力来增强CSS的表现力。 等等，SVG是什么？别慌，咱们先来简单认识一下这位“魔法师”。 SVG：矢量 …

继续阅读“**CSS** `filter: url()`：将 SVG 滤镜应用于 HTML 元素，创意无限”

发布于

HTML5 新增表单类型：`email`, `url`, `tel`, `date` 等的验证与应用

HTML5 新表单类型：让你的表单不再“傻乎乎” 各位看官，咱们今天聊聊HTML5里那些让表单变得更聪明的家伙们：email, url, tel, date 等等。 别看它们只是几个小小的属性，却能让你的表单不再像个“傻乎乎”的木头人，而是变得更智能、更友好。 话说从前，表单长啥样？ 在HTML5横空出世之前，咱们的表单长啥样呢？ 基本上，所有的输入框都是<input type=”text”>，然后，开发者就得自己用JavaScript写一大堆代码来验证用户输入的内容是不是邮箱、电话号码、网址等等。 你想想，这得多麻烦！ 每次写表单，都得重复造轮子，而且还容易出错。 验证规则写得不严谨，用户随便输点啥都能提交成功，后端收到一堆乱七八糟的数据，服务器都要哭了。 更惨的是用户！ 辛辛苦苦填了一大堆信息，结果因为输错了一个字母，表单就报错，还得重新填一遍。这用户体验，简直可以用“惨不忍睹”来形容。 HTML5：英雄救美，表单焕发新生 HTML5就像一位英雄，带着一堆新武器来拯救咱们可怜的表单了。 它引入了email, url, tel, date 等等新的表单类型，让浏览器可以直 …

继续阅读“HTML5 新增表单类型：`email`, `url`, `tel`, `date` 等的验证与应用”

发布于

自定义 `filter` 函数：`url()` 引用 SVG 滤镜

自定义你的视觉魔法：filter: url() 与 SVG 滤镜的奇妙旅程 想象一下，你是一位数字世界的炼金术士，拥有点石成金的能力，可以将平淡无奇的网页元素变成充满艺术气息的视觉焦点。而 filter: url() 就是你的魔法咒语，它连接着你与 SVG 滤镜的强大力量，让你可以随心所欲地改变网页元素的样貌。 别害怕，这听起来可能有点玄乎，但其实非常简单有趣。让我们一起踏上这段探索 filter: url() 和 SVG 滤镜的奇妙旅程，你会发现，原来网页设计还可以这么玩！ filter: url()：通往魔法世界的大门 首先，我们来认识一下 filter: url()。它是一个 CSS 属性，用于将 SVG 滤镜应用到 HTML 元素上。你可以把它想象成一个传送门，将网页元素送入 SVG 滤镜的魔法世界，经过一番改造，再以全新的面貌回归。 它的语法非常简单： element { filter: url(#filter-id); } 这里的 element 指的是你想应用滤镜的 HTML 元素，比如 <div>、<p>、<img> 等等。#filt …

继续阅读“自定义 `filter` 函数：`url()` 引用 SVG 滤镜”

发布于

自定义 `filter` 函数：`url()` 引用 SVG 滤镜

看不见的画笔：关于CSS filter: url() 的一点胡思乱想 第一次听到“CSS 滤镜”，脑子里浮现的是Instagram里那些花里胡哨的滤镜：复古胶片、清新甜美、暗黑哥特……一键磨皮美白，仿佛掌握了魔法，瞬间让平平无奇的照片变得高级起来。 后来才知道，CSS 滤镜远不止于此，特别是那个神秘兮兮的 filter: url() ，简直就像一个隐藏的宝藏，等待着你去挖掘。 filter: url()，简单来说，就是让CSS调用SVG定义的滤镜效果。 SVG，可缩放矢量图形，本身就是个充满想象力的世界，而滤镜，则是这个世界的调色盘和画笔。通过 filter: url() ，我们就能把SVG滤镜的强大能力引入到CSS中，给网页元素添加各种各样令人惊艳的视觉效果。 我一开始对 filter: url() 抱着敬畏之心。毕竟，SVG嘛，听起来就高大上，代码更是像天书一样，各种 <feGaussianBlur>, <feColorMatrix>, <feDisplacementMap>，看得我头昏脑胀，感觉自己仿佛回到了大学课堂，正在努力理解那些晦涩难懂的 …

继续阅读“自定义 `filter` 函数：`url()` 引用 SVG 滤镜”