Cyrus Flag

flag{S0_bangbang_7ha7_u_f1nd_h3r3}

没有复习,滚

昨天在学院的迎新晚会作为墙君一边管理审核一边xss某个辣鸡微信墙,真是愉快。微信墙上到处是美丽的style。
然而最气的,是墙君小姐姐自己写的滚动字幕没有成功。看了一个成功了的消息代码,感觉和我写的标签没啥区别啊,为啥我就不行呢。
别说了,“=”写成“:”,都是泪  ╮(╯▽╰)╭
在此po一下两种不同的不用JS的滚动字幕方法。

0x00 marquee实现

marquee,一个W3School中已经找不到的标签,据说在HTML标准中已经废弃。但是marquee是早期IE就有了的,大部分浏览器对此支持较好,所以是玩xss的首选(大雾 常用属性:

1
2
 style="padding-left: 30px;">
behavior, direction, play-count, speed, bgcolor, style

常用值:

1
2
3
 style="padding-left: 30px;">
behavior = { scroll(滚动), slide(滑动), alternate(反射) }
direction = { left, right, up, down }

别的值就是字面意思
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">direction</span><span class="o">=</span><span class="s">&quot;down&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">behavior</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;border:solid&quot;</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;000000&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#39;font-size:5rem;color:yellow&#39;</span><span class="p">&gt;</span>
TEST MESSAGE 1
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#39;font-size:5rem;color:yellow&#39;</span><span class="p">&gt;</span>
TEST MESSAGE 2
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">behavior</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#39;font-size:5rem;color:yellow&#39;</span><span class="p">&gt;</span>
TEST MESSAGE 3
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
效果:

 

0x01 SVG实现

SVG,来自W3C推荐标准,是一种特殊元素。利用animate可以使图形根据时间移动。
大概看代码比较好懂。
微信的原生浏览器支持,公众号里可以做出这样的弹幕效果。
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<span class="p">&lt;</span><span class="nt">svg</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> width:100%;</span>
<span class="s"> height:20em;</span>
<span class="s"> background:rgb(255,255,255);</span>
<span class="s"> box-sizing:border-box&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;40&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;610.909&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(235,166,36)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;3s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;11s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;55&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;352&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(223,34,28)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1.2em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;1s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;9s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;85&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;526.667&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(40,216,8)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;2s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;10s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;115&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;601.905&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(33,25,23)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1.2em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;4s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;12s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;170&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;601.905&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(70,118,217)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;5s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;13s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;220&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;487.619&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(255,92,139)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;2s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;10s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;250&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;547.879&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(7,140,59)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1.2em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;3s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;11s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">text</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;230&quot;</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;568.889&quot;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot;rgb(65,105,225)&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;</span>
<span class="s"> font-size:1.1em&quot;</span><span class="p">&gt;</span>test message 1 test message 1 test message 1 test message 1 test message 1<span class="p">&lt;</span><span class="nt">animate</span> <span class="na">attributename</span><span class="o">=</span><span class="s">&quot;x&quot;</span> <span class="na">from</span><span class="o">=</span><span class="s">&quot;1200&quot;</span> <span class="na">to</span><span class="o">=</span><span class="s">&quot;-800&quot;</span> <span class="na">begin</span><span class="o">=</span><span class="s">&quot;4s&quot;</span> <span class="na">dur</span><span class="o">=</span><span class="s">&quot;12s&quot;</span> <span class="na">repeatcount</span><span class="o">=</span><span class="s">&quot;indefinite&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">animate</span><span class="p">&gt;&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
效果: