本文目录一览：
- 1、XSS攻击和DDOS攻击的区别
- 2、如何避免xss，比如svg">
- 3、如何在网页中使用SVG
- 4、如何在HTML5中使用SVG
- 5、如何使用标签显示完整的svg图像
- 6、SVG标签必须设置width和height属性吗
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
如何在网页中使用SVG
通过img /标签
这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过img /标签在网页上使用。
缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。
通过CSS
可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。
通过@font-face作为字体使用
大多数字体都是矢量图形，SVG可以通过CSS来作为文字嵌入到网页中，从而替代.woft、.otf 和 .eof 格式的文字。代码像下面这样：
@font-face {font-family: GabbaGrabba; url('gabbagabba.otf’) format('opentype’),url('gabbagabba.svg#gabba’) format('svg’);}
因为它们缺乏真正的字体控制如字距和有限的浏览器支持，应该在使用SVG文字时给它们一个回退的方法。
如何在HTML5中使用SVG
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。
代码1：使用SVG画线
!DOCTYPE html
head
titleMrbool.com - HTML5 Tutorials/title
/head
body
h2HTML5 SVG Line Example/h2
svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns=""
!--line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/--
line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/
/svg
/body
/html
SVG画圆：
SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。
代码2:使用SVG画圆
!DOCTYPE html
head
titleMrbool.com - HTML5 Tutorials/title
/head
body
h2HTML5 SVG Circle Example/h2
svg id="svgCircleTutorial" height="250" xmlns=""
circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" /
/svg
/body
/html
SVG矩形:
同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。
代码3:SVG画矩形
!DOCTYPE html
head
titleMrbool.com - HTML5 Tutorials/title
meta charset="utf-8" /
/head
body
h2HTML5 SVG Rectangle Example/h2
svg id="svgRectangleTutorial" height="200" xmlns=""
rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/
/svg
/body
/html
SVG椭圆：
同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。
代码4:SVG画椭圆
!DOCTYPE html
head
titleMrbool.com - HTML5 Tutorials/title
meta charset="utf-8" /
/head
body
h2HTML5 SVG Ellipse Example/h2
svg id="svgEllipseTutorial" height="150" xmlns=""
ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/
/svg
/body
/html
SVG多边形：
使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60" ，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
代码5：SVG画多边形
!DOCTYPE html
head
titleMrbool.com - HTML5 Tutorials/title
meta charset="utf-8" /
/head
body
h2HTML5 SVG Polygon Example/h2
svg id="svgPolygonTutorial" height="200" xmlns=""
polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/
/svg
/body
/html
如何使用标签显示完整的svg图像
一、什么是SVG
严格来说SVG应该是一种开放标准的矢量图形语言，作为目前十分流行的图像文件格式，可以直接用代码来描绘图像
二、如何在HTML中完整的显示SVG图像
首先来说，VG 文件可以通过通过以下的标签嵌入到 HTML 文档：embed、object 或者 iframe。
1、使用 embed 标签
embed 标签可以被所有主流的浏览器支持，并允许使用脚本。
语法如下：
embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="
2、使用object 标签
object 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
语法如下：
object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="
3、使用iframe标签
iframe 标签可工作在大部分的浏览器中。
语法如下：
iframe src="rect.svg" width="300" height="100"
/iframe
SVG标签必须设置width和height属性吗
是的，要添加width和height属性，width 和 height 属性可设置此 SVG 文档的宽度和高度。希望对你有帮助，望采纳！