如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
浅谈 跨站脚本攻击(XSS)
一、概述
1、什么是跨站脚本攻击
跨站脚本攻击(Cross Site Scripting)，简称XSS， 是指：由于网站程序对用户输入过滤不足，致使攻击者利用输入可以显示在页面上对其他用户造成影响的代码来盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。
不同于大多数攻击（一般只涉及攻击者和受害者），XSS涉及到三方，即攻击者、客户端与网站。XSS的攻击目标是为了盗取客户端的cookie或者其他网站用于识别客户端身份的敏感信息。获取到合法用户的信息后，攻击者甚至可以假冒最终用户与网站进行交互。
2、为什么简称XSS，而不是CSS
跨站脚本攻击(Cross Site Scripting)，为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。
3、XSS漏洞成因
4、举个例子
（1）正常情况下：我们在url中输入： http://localhost/test.php?name=Sam
给参数name传一个值Sam，显示如下图
（2）那么，在非正常情况下呢（即：把传递给name的参数值改为一段可执行的Javascript代码）？
我们在url中输入：http://localhost/test.php?name=<script>alert("My name is Sam");</script>
如果我们后台没有进行任何关于传入参数值的过滤，会显示如下图结果
二、XSS生效方式
XSS主要有三种生效方式：（1）构造URL （2）发布内容式 （3）蠕虫式
1、生效方式：构造URL
XSS攻击者通过构造URL的方式构造了一个有问题的页面；当其他人点击了此页面后，会发现页面出错，或者被暗中执行了某些js脚本，这时，攻击行为才真正生效。
一般来说，动态页面中会将url中的部分内容回写在页面中。以百度的搜索为例，输入网址：http://www.baidu.com/s?wd=<script>alert("wrong")<%2Fscript>
搜索后会显示如下页面：
因为参数<script>alert("wrong")<%2Fscript>是<script>alert("wrong")</script>转义后的结果，搜索结果页中，会在标题中中和搜索框中回写用户输入的内容。
如果这里没有经过转义处理，则页面中就嵌入了一段script，并执行该代码，并弹出对话框提示用户。如果是其他恶意代码，则可能造成破坏。然后攻击者将此URL广为传播——比如说，以报错的方式发给百度的管理员，管理员打开这个URL就中招了。
下面我们来通过下图，图解XSS
举例
例1、
若未对XSS进行预防，
我们在URL中正常输入如下，搜索结果会如下图显示：beijing 的相关词条
如果在url中非正常输入如下的话，查看源码后input的value属性值会自动变为 <script>alert("xss test")</script>
若已对XSS进行了预防，
非正常输入后则会显示如下图：
例2、
若未对XSS进行预防，
在URL中输入红框中的值，搜索后则显示如下：
若已对XSS预防，
则搜索结果如下图：
2、生效方式：发布式内容
构造URL攻击方式传播范围有限，被攻击者只要有基本的安全意识就可以避免，因此这种手段的危险性比较小。相比之下，通过发表内容构造的XSS的危害就大了很多。
在可以发表内容的论坛、讨论区、吧、博客、微博等网站上，用户发表的内容会保存起来，允许其他用户浏览。这些保存的内容显示在页面上的时候，如果没有经过正确的处理，也会把攻击者精心构造的内容显示出来，访问该内容的用户就此中招。如果该页面流传广泛，则影响会更加深远。
拿 留言板举例
例、
留言板的任务是把用户留言的内容展示出来。正常情况下，用户的留言都是正常的语言文字，留言板显示的内容也就没毛病。
然而这个时候如果有人不按套路出牌，在留言内容中丢进去一行”<script>alert(“mdzz”)</script>
3、生效方式：蠕虫式
最暴力的方式是使用蠕虫——就是首先发一个有问题的文章，浏览者阅读时会被暗中执行恶意代码，发表一篇新的文章的，该文章也含有同样的恶意代码。这样有可能在最快时间内将攻击铺满整个网站。蠕虫式攻击将暗中偷偷摸摸的攻击行为变成了光明正大的攻城拔寨，极容易被发现和修复。
Eg：早在2011年新浪就曾爆出过严重的xss漏洞，导致大量用户自动关注某个微博号并自动转发某条微博。(蠕虫式)
注：上面我们只是为了方便以弹窗举例，但是XSS攻击方式绝不是弹窗这么简单
三、XSS攻击实例
（1）XSS偷取用户信息
（2）XSS盗取Cookie
（3）XSS钓鱼网站
（4）XSS蠕虫攻击
四、XSS的破坏方式
（1）破坏页面结构：用户输入的内容包含了html的标签，与前面的标签等闭合，导致页面的DIV结构发生变化，页面错乱。
（2）破坏显示内容：用户输入的内容包含了单引号或双引号，与前面的单引号或双引号匹配，导致后面的内容丢失，显示不出来。
（3）破坏JS：用户产生的内容直接输出到js片断中，但仅转义少数字符不能保证排除攻击，所以容易导致JS被破坏
五、XSS攻击 绕过过滤的一些简单方法
1、大小写绕过
这个绕过方式的出现是因为网站仅仅只过滤了<script>标签，而没有考虑标签中的大小写并不影响浏览器的解释所致。
例：
如果我们在URL中输入: localhost/test.php?name=<script>alert(''hey!")</script>
，由于网站对<script>标签进行了过滤，所以搜索后什么都不会发生。
而如果我们输入: localhost/test.php?name=<sCript>alert(''hey!")</scRipt>
，实质就是改变了<script>的大小写，则结果如下图所示，我们又愉快的弹出了弹窗。
即我们输入一串原始值，网站将输入的原始值进行过滤，过滤后的值仍是一段可执行的代码。
例
让过滤完script标签后的语句中还有script标签。
如下图：将参数name值设为<sCri<script>pt>alert("hey!")</scRi</script>pt>
，输入后仍会出现弹窗
当script标签已经被完全过滤后，前面两种方法就都不会成功。
以下列举几个常用的可插入代码的标签。
alert(1)编码过后就是\u0061\u006c\u0065\u0072\u0074(1)，
所以构建出来的攻击语句http://localhost/test.php?name=<script>eval(\u0061\u006c\u0065\u0072\u0074(1))</script>
如下图执行后又会出现弹窗
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
直白点：恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
之后当浏览这条留言的时候，就会弹出如下信息框。
它以吸引人眼球的方式，让当微博用户主动点击攻击链接。之后微博网友会立刻执行一段有害代码，造成三个结果：发布一条微博；成为攻击发起人的粉丝；向其他好友发送含同样链接地址的私信。新浪微博很快发现这个漏洞，删除了含攻击链接的微博内容，并将攻击发起人ID删除。
2、利用过滤后返回语句再次构成攻击语句来绕过
即：<sCri<script>pt>alert("hey!")</scRi</script>pt> 过滤后
仍为可执行的JS代码<script>alert("hey!")</script>
3、并不是只有script标签才可以插入代码！
莫慌，能植入脚本代码的不止script标签。
例如：我们用<img>标签做一个示范。
我们利用如下方式在URL中输入：http://localhost/test.php?name=<img src='w.123' onerror='alert("hey!")'>
之后就可以再次愉快的弹窗。（因为我们指定的图片地址根本不存在也就是一定会发生错误，这时候onerror里面的代码自然就得到了执行。）
<div onmouseover=‘do something here’> 当用户鼠标在这个块上面时即可运行（可以配合weight等参数将div覆盖页面，鼠标不划过都不行）
类似的还有onclick，这个要点击后才能运行代码
4、编码脚本代码绕过关键字过滤。
有的时候，服务器往往会对代码中的关键字（如alert）进行过滤，这个时候我们可以尝试将关键字进行编码后再插入，不过直接显示编码是不能被浏览器执行的，我们可以用另一个语句eval（）来实现。【eval()会将编码过的语句解码后再执行】
例
5、组合各种方式
在实际运用中漏洞的利用可能不会这么直观，需要我们不断的尝试，甚至组合各种绕过方式来达到目的。
即将来到的 AutoPilot 9.0 更新，「开启部分全自动驾驶」的功能可谓是吊足了许多人胃口。虽然马斯克已经在 Twitter 上透露了一些消息，但还是有许多坐不住的粉丝 @elonmusk，想要知道更多的新消息。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
寻找主流验证码提供使用公司与样例及其可能的破解价格
3 ------ 图像字符类型验证码
4 ------ 行为类型验证码
5 ------ 逻辑识别类型验证码
6 ------ 资料总结与价格汇总
简述：
普通字母数字干扰倾斜验证码
出现位置：
登录百度搜索时可能出现
图片样例：
出现前提：
网络异常（非人类访问可能性大）
简述：
普通字母数字颜色块干扰倾斜验证码
出现位置：
发布百度经验可能出现
图片样例：
出现前提：
简述：
扭曲中文拼音干扰验证码
出现位置：
贴吧发布帖子的时候可能出现
图片样例：
简述：
在较大的图片中的小部分随机区域出现倾斜数字字母验证码。
出现位置：
YY登录页面
图片样例：
简述：
扭曲中文数字干扰验证码
出现位置：
异地登录可能出现
图片样例：
简述：
字符紧凑扭曲验证码
出现位置：
异常流量访问可能出现
图片样例：
简述：
字符紧凑扭曲验证码
出现位置：
异常流量访问可能出现
图片样例：
简述：
需要鼠标拖动到最右边完成的验证码。
出现位置：
在淘宝登录页面出现
图片样例：
简述：
极验专职做验证码，需要通过滑轮完成拼图。
出现位置：极验官网
图片样例：
简述：
极验专职做验证码，按键点击再分析浏览记录和特征判别。类似谷歌第三代验证码
出现位置：极验官网
图片样例：
简述：
12306登录界面识别验证码。
出现位置：12306登录界面
图片样例：
简述：偶然见到，还没有具体来源。
出现位置：网络来源（未知）
图片样例：
简述：
来自落伍者网站依次在图片中点击提示的字符。
出现位置：落伍者网站登录时
图片样例：
简述：
来自腾讯安全验证时依次在图片中点击提示的字符。
出现位置：腾讯安全平台
图片样例：
简述：
某网站下订单时出现数字加中文逻辑处理验证码。
出现位置：网络来源（未知）
图片样例：
简述：扭曲的中文文字
出现位置：网络来源（未知）
图片样例：
简述：提示生活场景图片，由用户点击路标之类。
出现位置：谷歌异常访问时出现
图片样例：
搜集了验证码业内3大类型下的17个变种形式。
所有字符型，逻辑型验证码均可以通过打码平台进行破解
1、文档说明
2、内容概述
3. 字符类型验证码
3.1 百度搜索字符验证码
3.2 百度经验字符验证码
3.3 百度贴吧中文验证码
3.4 YY字符验证码
3.5 stream数字中文验证码
3.6 谷歌字符紧凑扭曲验证码
3.7 京东字符重叠验证码
4. 行为验证类型验证码
4.1 淘宝登录行为验证码
4.2 极验第二代行为验证码
4.3 极验第三代行为验证码
5. 逻辑识别验证码
5.1 12306逻辑识别验证码
5.2 外国网站逻辑识别验证码
5.3 落伍者点击提示验证码
5.4 腾讯安全验证点击提示验证码
5.5 逻辑数字汉字加减验证码
5.6 逻辑拼音验证码
5.7 谷歌路标识别验证码
6. 验证码搜集总结
大家都知道 UED（User Experience Design）用户体验设计团队，主张「以用户为中心的设计」，我们团队的前身就是一个典型的 UED 团队。那么什么是 UGD 呢？
UGD（User Growth Design）用户增长设计，主张「以用户为中心，以增长为导向」。
下面这个是我们团队现在的 logo，这个图形很清晰地描述了 UGD 的理念：在 UCD（以用户为中心的设计）的基础上增加一个向上的箭头（增长），变形成了 G（Growth，代表增长）。也就是我们在原先以用户为中心的基础上，还要做到帮助业务增长。
「增长」的概念对很多人来说也许还比较陌生。事实上，这个概念早在2010年就有人在美国提出了，到了2015年才引入国内，最近两年开始火爆。所以说它在国内其实也是一个比较新的概念。感兴趣的朋友可以看看《增长黑客》相关书籍。
为什么我们要从传统的 UED 进化为充满挑战和不确定性的 UGD 呢？这要从天时、地利、人和三个方面说起。
1. 天时
先说说天时，大概2016年左右吧，中国互联网逐渐进入下半场。关于下半场的话题这里不多说了，感兴趣的同学可以上网搜搜相关的文章或者看一下我的新书《破茧成蝶2》（7月出版），里面有很详细的讨论。简单的说，下半场的特点就是：人口红利、流量红利、资金红利都在逐渐萎缩。原先你可以花钱买流量；或者通过好的 idea 拉来大笔投资；再或者通过打造的体验迎来大量用户。但这种「好时代」已经一去不复返了，如果没有实质的增长，创意、体验、流量都不能保证产品可以顺利的活下去。
2017年3月底，美国又发生了一件大事：可口可乐，这家以营销著称的公司，宣布将取消设立了24年的首席营销官（CMO）一职。全球市场营销、客户及商务领导、战略被整合成一个职能，由新创立的职位 CGO（Chief Growth Officer，首席增长管）领导。第一任 CGO 将直接向可口可乐新任 CEO 汇报。
可能很多人不了解，CMO 的工作性质和 UED 其实有很多相似的地方。比如都是成本部门（当然市场部还要额外花钱）；都热衷包装创意而非对业绩的直接影响；都倾向于用定性的方式检验成果；都习惯通过经验而非试验来做决策……
很多企业主对此非常无奈，他们明明知道在营销等方面的花费存在巨大的浪费，却不知道浪费在哪里。随着大数据时代的到来（2015年左右），人们越来越重视数据的作用，越来越能够轻易的获取、存储数据，也越来越知道如何从数据中获取价值。在这种情况下，原先很多岗位的传统工作方式显然太过于低效，所以 CMO 逐渐被 CGO 取代也就不足为奇了。
从 CMO 到 CGO，揭示了四个变化趋势：
谁能肯定 CMO 的今天不会成为 UED 的明天呢？当然，我认为 UGD 只是未来的一个发展趋势之一，我想未来设计师还会有很多其它的发展方向等待我们深入探索。
2. 地利
虽然我换过几次工作，但是有一点我从来没变，就是一直在做和商业相关的产品（电商、To B、互联网金融），所以我对业务、对数据更敏感一些。和同行交流的过程中我也发现一个明显的现象：越是接触商业产品的设计师，越重视数据量化。当然现在不仅是商业产品，所有类型产品的从业人员都需要有这个意识。比如做社交产品，也需要通过活跃度等指标来检验成果。
3. 人和
设计团队的地位其实普遍是比较尴尬的，因为你很难证明对产品、对企业的价值。以前设计师还可以靠特立独行来赢得一些关注，但现在随着时代的变化，设计和业务绑定的趋势越来越明显。与此同时，大部分设计师却还没有做好相应的准备，不知道该如何帮助业务增长。
虽然支持团队很难成为核心团队，但我们依然可以通过改变自己，努力离核心部分近一点，更近一点。
看了前面的分析，可能有人会感觉迷茫：设计师到底应该服务于业务还是用户呢？
传统思维认为，设计师应该为用户、为体验负责。实际上，体验与业务并不冲突。通过一年多的试验，我们发现能带动业务数据提升的设计方案，质量都比原始方案要好。通过无数次的试验结果总结规律，设计师的进步非常快，也非常大。
所以我们团队的价值主张一直都是：以用户为中心，以增长为导向！
很多设计师认为自己不太可能帮助业务有实质性的提升。其实设计的商业潜力是巨大的，只是还尚未被充分发挥出来。通过出众的造型和外观击败竞争对手、销量大幅提升的案例不胜枚举。所以我坚信设计师在这方面的空间非常大。
当然要成为 UGD 并不是通过输出美观的产出物就可以做到。UGD 必须致力于通过设计思维及专业技能，用最小成本为产品/企业创造最大价值。我们团队在这方面已经摸索了一年多的时间，现在还在继续探索中。
和 UED 相比，我认为 UGD 最重要的差别在于：
前三项相信大部分设计师已经开始意识到了，而第四项，也是最重要的一项，很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了，他们很少考虑如何用较小的成本创造更大的价值。实际上，设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来，将产生惊人的效果！
当然说来容易做来难，我们在长期的实践过程中经历了很多失败和挫折，感谢公司的无限包容，使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑，并不断带给业务方惊喜。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1、node.js是由chrome浏览器，V8引擎，C++编写的JavaScript运行环境，node.js可以解析JS代码，而且没有浏览器安全级的限制，还提供很多系统级别的API。
2、简单介绍一下node.js后推荐给大家几个网站，大家可以从这几个网站上学习更多
https://nodejs.org/en/ Node.js的官方网站
https://stackoverflow.com/ 技术问答社区
3、安装node.js（这部分感觉没有什么好说的，因为就是下载安装的过程，不熟悉的同学去下面菜鸟教程这个网站参考一下就行）https://www.runoob.com/nodejs/nodejs-install-setup.html
4、node.js版本的常识：偶数位为稳定版本，奇数为非稳定版本
5.node.js基础-起一个web服务器
（1）首先在某个路径下面写一个server.js文件，文件内容如下：
（2）然后在该路径下面使用node运行server.js文件
（3）服务就运行起来了，那么打开浏览器，进入http://127.0.0.1:1337/里面就可以看到Hello World
（4）现在我们回过头去看看刚才那个server.js文件里写的都是什么东西
（5）现在我们将server.js文件中的res.end("Hello World\n")修改为res.end("Hello Node.js\n"),然后之前我们的服务还没有关掉，在命令行按下Ctrl+C停掉服务，再使用命令重新开启，然后进入到浏览器刷新http://127.0.0.1:1337/页面就出来结果了
（6）刚才在server.js文件中的写法都是链式写法，我们看nodejs官网提供的写法，就很清晰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1、初始node.js
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后，我们可以发现其背后的一些规律，2018年UI界面设计的趋势如下。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~
关于表单的基本知识：
表单中的三个内容：
action：数据提交的地址，默认是当前页面
method：数据提交的方式，默认是get方式
enctype：提交数据格式，默认是application/x-www-form-urlencoded
以下分两种提交方式进行：
（1）get方式：
前端页面：
后端php页面：
输入“aa"提交后：
使用get方式：
把数据名称和值通过”=“连接，如果又多个的话，会通过”&“进行连接，然后把数据放到url?后面传到指定页面；
url长度又限制，所以不要使用get方式传递过多的数据
(2)post方式：
前端页面：
后端php页面：
输入”li“提交后：
post理论上是无传输大小限制的，输入的内容也不会显示在浏览器输入栏中。
就暂时了解这么多了~继续加油！
[html] view plain copy
[php] view plain copy
[html] view plain copy
[php] view plain copy
懒洋洋是一款为多伦多华人提供服务的订餐平台用户群一般为学生、白领等对于视觉上追求简约、舒适产品流程简易而顺畅（英文是用翻译软件翻的，如有错误，那就算了吧）
蓝蓝设计的小编 http://www.lanlanwork.com
