目录介绍：

• 1、什么是SVG和SVG常用的形状
• 2、XSS攻击和DDOS攻击的区别
• 3、如何避免xss，比如svg">
• 4、浏览器的Xss过滤器机制是什么，为什么有些反射型Xss不会触发过滤器
• 5、svg 介绍

什么是SVG和SVG常用的形状

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

代码结构

[html] view plain copy print?

html xmlns:svg=""

body

pThis is an HTML paragraph/p

svg:svg width="300" height="100" version="1.1"

svg:circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" /

/svg:svg

/body

/html

SVG提供的预定义形状元素的使用和操作：

rect标签可用来创建矩形，以及矩形的变种

rect

x="20" y="20" rx="20" ry="20" width="250" height="250"

style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/

代码解释：

1)rect 元素的 width 和 height 属性可定义矩形的高度和宽度

2)style 属性用来定义 CSS 属性

3)CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

4)CSS 的 stroke-width 属性定义矩形边框的宽度

5)CSS 的 stroke 属性定义矩形边框的颜色

6)x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）

7)y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）

8)CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

9)CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1)

10)rx 和 ry 属性可使矩形产生圆角。

circle 标签可用来创建一个圆

circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/

代码解释：

1)cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

2)r 属性定义圆的半径。

ellipse 标签可用来创建椭圆

ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/

代码解释：

1)cx 属性定义圆点的 x 坐标

2)cy 属性定义圆点的 y 坐标

3)rx 属性定义水平半径

4)ry 属性定义垂直半径

line 标签用来创建线条。

line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/

代码解释：

1)x1 属性在 x 轴定义线条的开始

2)y1 属性在 y 轴定义线条的开始

3)x2 属性在 x 轴定义线条的结束

4)y2 属性在 y 轴定义线条的结束

polygon 标签用来创建含有不少于三个边的图形

polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/

代码解释：

1)points 属性定义多边形每个角的 x 和 y 坐标

polyline 标签用来创建仅包含直线的形状

polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/

代码解释：

1)points 属性定义每段线的每个角的 x 和 y 坐标

path 标签用来定义路径

path d="M250 150 L150 350 L350 350 Z" /

下面的命令可用于路径数据：

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc

Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

SVG 滤镜 可用的滤镜有：

feBlend

feColorMatrix

feComponentTransfer

feComposite

feConvolveMatrix

feDiffuseLighting

feDisplacementMap

feFlood

feGaussianBlur

feImage

feMerge

feMorphology

feOffset

feSpecularLighting

feTile

feTurbulence

feDistantLight

fePointLight

feSpotLight

Gaussian Blur高斯模糊

filter 标签用来定义 SVG 滤镜。filter 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

filter 标签必须嵌套在 defs 标签内。defs 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

defs

filter id="Gaussian_Blur"

feGaussianBlur in="SourceGraphic" stdDeviation="3" /

/filter

/defs

ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/

代码解释：

1)filter 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）

2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

3)滤镜效果是通过 feGaussianBlur 标签进行定义的。fe 后缀可用于所有的滤镜

4)feGaussianBlur 标签的 stdDeviation 属性可定义模糊的程度

5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

linearGradient 可用来定义 SVG 的线性渐变

linearGradient 标签必须嵌套在 defs 的内部。defs 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变

2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变

3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

defs

linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"

stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/

stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/

/linearGradient

/defs

ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/

代码解释：

1)linearGradient 标签的 id 属性可为渐变定义一个唯一的名称

2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变

3)linearGradient 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置

4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 stop 标签来规定。offset 属性用来定义渐变的开始和结束位置。

radialGradient 用来定义放射性渐变

radialGradient 标签必须嵌套在 defs 中。defs 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

defs

radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"

stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/

stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/

/radialGradient

/defs

ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/

代码解释：

1)radialGradient

标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和

r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 stop

标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换

[html] view plain copy print?

svg width="100%" height="100%" version="1.1"

xmlns=""

g fill="dodgerblue"

rect x="10" y="10" width="40" height="40" ry="10" /

rect x="80" y="80" width="40" height="40" ry="10" /

rect x="150" y="150" width="40" height="40" ry="10" /

/g

/svg

XSS攻击和DDOS攻击的区别

XSS攻击：跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。

分布式拒绝服务(DDoS:Distributed Denial of Service)攻击指借助于客户/服务器技术，将多个计算机联合起来作为攻击平台，对一个或多个目标发动DDoS攻击，从而成倍地提高拒绝服务攻击的威力。通常，攻击者使用一个偷窃帐号将DDoS主控程序安装在一个计算机上，在一个设定的时间主控程序将与大量代理程序通讯，代理程序已经被安装在网络上的许多计算机上。代理程序收到指令时就发动攻击。利用客户/服务器技术，主控程序能在几秒钟内激活成百上千次代理程序的运行。

如何避免xss，比如svg">

0x01 常规插入及其绕过

1 Script 标签

绕过进行一次移除操作：

scrscriptiptalert("XSS")/scrscriptipt

Script 标签可以用于定义一个行内的脚本或者从其他地方加载脚本：

scriptalert("XSS")/script

浏览器的Xss过滤器机制是什么，为什么有些反射型Xss不会触发过滤器

首先要说明的是 它是webkit的一个模块,而非chrome ,所以Safari和360安全浏览器极速模式等webkit内核的浏览器都有XSS过滤功能.

过滤方式：

通过模糊匹配 输入参数(GET query| POST form data| Location fragment ) 与 dom树,如果匹配中的数据中包含跨站脚本则不在输出到上下文DOM树中.另外,匹配的规则跟CSP没有什么关系,最多是有参考,CSP这种规范类的东西更新速度太慢跟不上现实问题的步伐.

关闭模式：

因为它有可能影响到业务,所以浏览器提供了关闭它的HTTP响应头.

X-XSS-Protection: 0

绕过方式：

因为专门做这方面的原因所以对绕过也有所了解,目前我发布过的一个bypass 0day还可以继续使用.

svgscript xlink:href=data:,alert(1)/script/svg

svg 介绍

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着图片放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』

svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。

svg 提供一些标签来表达常用的基本图形，如 circle/ rect/ ellipse/ line/ polygon/ polyline/ path/ ，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。

表达图形的具体属性不作介绍，请自行查阅资料。

有些属性可以放在CSS中：

有些则只能写在标签里，如下：

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。

上文中的示例： 链接

SVG教程 | MDN

SVG 教程 | 菜鸟教程