店铺装修:淘宝/天猫店铺两侧雪花飘动代码

<div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-self-defined">
    <div class="skin-box-bd clear-fix">
        <div class="J_TWidget" style="position: relative;" data-widget-type="Tabs" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u2003tm-isv-flower-mask','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'lsm-shiyan','contentCls':'lsm-shiyan01','autoplay':true}">
            <div class="lsm-shiyan01" style="left: 0px; width: 999999px; display: none; position: absolute;">
                <span class="-_-switchable-panel-internal1229 ks-switchable-panel-internal526" role="tabpanel" aria-hidden="true" aria-labelledby="ks-switchable529" style="float: left; display: block;">&nbsp;</span>
            </div>
            <div>
                <div class="lsm-shiyan" role="tablist">
                    <div tabindex="-1" class="-_-isv-flower-mask ks-switchable-trigger-internal525 tm-isv-flower-mask" id="ks-switchable529" role="tab" style="left: 50%; top: 0px; width: 0px; height: 0px; right: auto;">
                        <div style="left: -950px; position: relative;">
                            <embed width="475" height="1000" src="http://img1.tbcdn.cn/tfscom/T1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" wmode="transparent" flashvars="scene=taobao_shop" allowscriptaccess="never">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="J_TWidget" style="position: relative;" data-widget-type="Tabs" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u2003tm-isv-flower-mask','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'lsm-shiyan','contentCls':'lsm-shiyan01','autoplay':true}">
            <div class="lsm-shiyan01" style="left: 0px; width: 999999px; display: none; position: absolute;">
                <span class="-_-switchable-panel-internal1229 ks-switchable-panel-internal639" role="tabpanel" aria-hidden="true" aria-labelledby="ks-switchable642" style="float: left; display: block;">&nbsp;</span>
            </div>
            <div>
                <div class="lsm-shiyan" role="tablist">
                    <div tabindex="-1" class="-_-isv-flower-mask ks-switchable-trigger-internal638 tm-isv-flower-mask" id="ks-switchable642" role="tab" style="left: 50%; top: 0px; width: 0px; height: 0px; right: auto;">
                        <div style="left: 475px; position: relative;">
                            <embed width="475" height="1000" src="http://img1.tbcdn.cn/tfscom/T1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" wmode="transparent" flashvars="scene=taobao_shop" allowscriptaccess="never">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Html5视频拼图源码

Html5视频拼图源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style>
		body{margin:0;padding:0;}
		.allCanvas{
			position: relative;
			margin:50px auto;
            border:1px solid;
			width:600px;
			height:400px;
		}
		.vcanvas{
			position: absolute;
			display: block;
            box-shadow:#333 0 0 3px;
		}
		.highZindex{
			z-index:50;
		}
	</style>
	<title>视频拼图</title>
</head>
<body>
	<div class="allCanvas">
		<canvas id="lishewen" width="600" height="400" style="display:none"></canvas>
	</div>
	<video id="video" src="tj.mp4" width="600px" height="400px" controls="control" loop="loop" style="display:block;position:absolute;top:-6000px;"></video>
	<script>
		var video = document.getElementById("video");
		var cs = document.getElementById("lishewen");
		var ctx = cs.getContext('2d')
		var rows = 3,
			cols = 3,
			cb = document.querySelector(".allCanvas"),
			vw = 600,
			vh = 400,
			ww = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth,
			wh = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
			maxindex = 10,
			canvases = [];

		function createCanvas(){
			var num = rows*cols;
			for(var i=0;i<cols;i++){
				for(var j=0;j<rows;j++){
					var canvas = new vCanvas(Math.random()*getRandom(-100 , 700), Math.random()*getRandom(0 , wh-vh/cols)-cb.offsetTop , vw/rows , vh/cols , j , i);
					canvases.push(canvas);
				}
			}
		}

		function getRandom(a , b){
			return Math.random()*(b-a) + a;
		}

		var vCanvas = function(x,y,w,h,cols,rows){
			this.x = x;
			this.y = y;
			this.w = w;
			this.h = h;
			this.cols = cols;
			this.rows = rows;
			this.creat();
			this.behavior();
		}
		vCanvas.prototype = {
			creat:function(){
				this.cas = document.createElement("canvas");
				cb.appendChild(this.cas);
				this.cas.className = "vcanvas";
				this.cas.style.left = this.x+"px";
				this.cas.style.top = this.y+"px";
				this.cas.width = this.w;
				this.cas.height = this.h;
				this.cas.style.zIndex = maxindex-1;
			},
			behavior:function(){
				this.cas.onmousedown = function(e){
					e = e || window.event;
					var that = this;
					var om = {
						x:e.clientX,
						y:e.clientY
					}
					if(parseInt(this.style.zIndex) < maxindex){
						this.style.zIndex = maxindex+1;
						maxindex = parseInt(this.style.zIndex);
					}
					window.onmousemove = function(e){
						e = e || window.event;
						var nm = {
							x:e.clientX,
							y:e.clientY
						}
						that.style.left = parseInt(that.style.left.replace("px","")) + (nm.x-om.x) + "px";
						that.style.top = parseInt(that.style.top.replace("px","")) + (nm.y-om.y) + "px";
						om = nm;
					}
					window.onmouseup = function(){
						this.onmousemove = null;
					}
				}
			}
		}

		Array.prototype.forEach = function(callback){
			for(var i=0;i<this.length;i++){
				callback.call(this[i]);
			}
		}

		var lastTime = 0;
		function initAnimate(){
			lastTime = new Date();
			createCanvas();
			animate();
		}

		function animate(){
			var newTime = new Date();
			if(newTime - lastTime > 30){
				lastTime = newTime;
				ctx.drawImage(video , 0 , 0 , vw , vh);

				canvases.forEach(function(){
					var ctx2 = this.cas.getContext('2d');
					ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);
				});
			}
			if("requestAnimationFrame" in window){
				requestAnimationFrame(animate);
			}
			else if("webkitRequestAnimationFrame" in window){
				webkitRequestAnimationFrame(animate);
			}
			else if("msRequestAnimationFrame" in window){
				msRequestAnimationFrame(animate);
			}
			else if("mozRequestAnimationFrame" in window){
				mozRequestAnimationFrame(animate);
			}
		}

		video.play();
		initAnimate();
	</script>
</body>
</html>

店铺装修:淘宝/天猫店通用左侧悬浮代码

最近有不少朋友问我这个代码,我就在这里发出来吧

<div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','effect':'scrollx','activeIndex':1,'navCls':'user-bd11','contentCls':'user-hd11','interval':0.1,'autoplay':true}">
 <ul class="user-hd11" style="display:none;"><li></li></ul>
 <ul class="user-bd11">
  <li style="visibility: visible;left:0px;top:300px;">
   <div style="width:200px;height:30px; background:#000;color:#fff">
   	<!--这里放悬浮内容的代码-->
   </div>
  </li>
 </ul>
</div>

具体效果可以移步到此处查看

http://tjgemstone.tmall.com/

网站是如何跟踪监视你的

某些监视方法是比较容易想到的,比如,当你登录网站的时候,它就可以知道你是谁了。但是这些网络监视系统是如何通过你的上网行为记录你的个人信息呢

广告系统经常通过追踪用户行为的方法来建立用户信息库,以定位谁是目标客户。如果你曾经访问过某个商业网站,之后不久你又在其他网站看到了这个商业网站的广告,那么,这个广告系统可能已经在工作了。

IP 地址

IP地址是确认用户身份的最基本的方法。现今,在家或者办公室,你电脑很可能与你的其他网络设备共享同一个IP地址。从你的IP地址,网站可以大致确定你的地理位置 —— 还不能精确到街道,但是一般能确认你所在城市或者区域。你可能见过那些弹窗小广告通过显示你的地理位置来伪装自己,广告系统就是这么干的。IP地址可以变,并且可以被其他用户所共享,所以它并不是一个追踪单个用户的好方法。但是,IP可与本文介绍的其他技术相结合来确定你的地理位置。

image

HTTP Referrer

当你点击一个链接的时候,你的浏览器会加载这个页面,并且告诉这个网站你是从哪来的。打个比方,你单击了一个How-to Geek网站的一个指向外部网站的链接,那么这个网站会知道你是从How-to Geek的哪一篇文章点击进来的。这个信息是被存储在Http referrer信息头中。当你下载当前页面的内容的时候,http referrer也会被发送。例如,一个网站有广告或者跟踪脚本,那么你的浏览器会告诉这个广告商或者这个网络监视系统,你正在浏览哪一个网页!所谓的”web bug”是很小的,由单个像素组成的不可见的图片,它利用HTTP referrer去偷偷的监视你。它们也被用来监视你所打开的邮件,前提是你的邮件客户端会下载图片。

Cookies 和 跟踪脚本

Cookies是一些信息片段,网站可以将它们存储在你的浏览器上。它有许多正当的用途——比如,当你登陆你的网络银行,cookie可以记录你的登录信息。当你改变对一个网站的设置,那么cookie也会将它记录下来,这样你的设置就可以一直在你浏览的过程中有效。
image1
Cookie也可以用来识别和记录你在某个网站上的行为。这并没有什么大的问题——这个网站可能想知道你在浏览什么网页,这样它就可以知道你体验如何。而真正有危险的是那些第三方的Cookie。

image2

尽管第三方cookie也有一些正当的用途,但是它们常常被广告系统用来监视你在不同网站的行为。许多网站——并不是大部分网站都会有第三方的广告和监视脚本。如果两个不同的网站有相同的广告或者监视系统,那么你浏览器上关于这两个网站的浏览历史就可以结合在一起被追踪和分析了。那些来自社交网站的脚本同样有追踪的功能。比如说你登录了Facebook,然后你浏览另一个网站,而这个网站上有Facebook的那个“Like”(点赞)按钮,那么Facebook就可以知道你浏览了这个网站。Facebook保存了一个cookie去记录你的登录状态,这样这个Like按钮(它本身就是脚本的一部分)就可以知道你是谁了。

Super Cookies

你可以清空你的cookies——事实上,我们这里有一篇专门的教程教你如何清空浏览器的cookies。然而,清空cookies这招已经不怎么起作用了——“super cookies”正在兴起。super cookie的一个例子就是evercookie。super cookies如evercookie会把cookie数据存在不同的地方–比如,flash的cookie,Silverlight storage,浏览器历史记录,或者说html5的本地存储中。一个非常高明的记录用户的方法是,每次用户登录一个网站,网站都记录在一个很小的图片中记录一个特有的颜色。这些图片会被存放在用户的浏览器缓存中,这样一来,这个颜色就可以用来识别这个用户了。

当网站发觉你在某些地方删除了super cookie,那么它会利用其他的地方的存储的数据将这些信息恢复过来。例如,你可能清除了浏览器的cookies,但是你没有清除flash中的cookie,那么,这个网站会将flash中的cookie信息重新复制到你浏览器cookies中。这样来说super cookie的生命力是很强的。
image3

User Agent

每次你的浏览器链接一个网页的时候,它都会向网站发送User Agent信息。这些信息包括了你浏览器的信息和操作系统信息,它们会存储起来,并被广告系统利用来分析如何投放广告。如果想知道更多关于User Agent的信息,请参阅维基百科上的User Agent
image4

浏览器指纹

每一个浏览器实际上都具有自己的特征。网站可以检测你的操作系统类型、浏览器版本、安装的浏览器插件及其版本、操作系统的屏幕分辨率、下载的字体、所在时区和其他的信息。看吧,就算你禁用了浏览器cookie,那么也有其他信息来识别你的浏览器。

有个叫Panopticlick的网站可以告诉你这些信息是如何使用的。事实上,在110万人中,才会有一个人的浏览器跟你有相同的设置。

image5
当然了,肯定有其他的追踪技术。每年花在这技术的钱可不少,而且有许多人每天都在绞尽脑汁想出新招来追中你——evercookie的出现就是一项证据。

要想尽可能的在网上隐藏自己的身份,那么最好使用Tor网络来上网。


原文链接: Chris Hoffman 翻译: 极客范 - 起一个很长的没人用过的名字
译文链接: http://www.geekfan.net/4410/

防止表单重复提交的几种策略

  表单重复提交是在多用户 Web 应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如:

  • 点击提交按钮两次。
  • 点击刷新按钮。
  • 使用浏览器后退按钮重复之前的操作,导致重复提交表单。
  • 使用浏览器历史记录重复提交表单。
  • 浏览器重复的 HTTP 请求。

 

几种防止表单重复提交的方法

禁掉提交按钮。表单提交后使用 Javascript 使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把 Javascript 给禁止掉,这种方法就无效了。

  我之前的文章曾说过用一些 Jquery 插件效果不错。

Post/Redirect/Get 模式。在提交后执行页面重定向,这就是所谓的 Post-Redirect-Get (PRG)模式。简言之,当用户提交了表单后,你去执行一个客户端的重定向,转到提交成功信息页面。

  这能避免用户按 F5 导致的重复提交,而其也不会出现浏览器表单重复提交的警告,也能消除按��览器前进和后退按导致的同样问题。

在 session 中存放一个特殊标志。当表单页面被请求时,生成一个特殊的字符标志串,存在 session 中,同时放在表单的隐藏域里。接受处理表单数据时,检查标识字串是否存在,并立即从 session 中删除它,然后正常处理数据。

  如果发现表单提交里没有有效的标志串,这说明表单已经被提交过了,忽略这次提交。

  这使你的 web 应用有了更高级的 XSRF 保护。

在数据库里添加约束。在数据库里添加唯一约束或创建唯一索引,防止出现重复数据。这是最有效的防止重复提交数据的方法。

暴雪国服战网彻底抛弃IE6

暴雪国服战网大升级:彻底放弃 IE6.0

  暴雪蓝帖公告战网升级后将不再支持 IE6.0 内核浏览器

  微软眼下正千方百计诱导用户升级最新的操作系统,而游戏厂商便成了最好的帮手。目前已经有很多最新的 PC 游戏大作将 Windows XP 排除在了支持列表之外,而现在就连官方网站也开始排挤老版本 IE 浏览器了。

  暴雪中国团队发布蓝帖表示近期将对国服战网进行一次整体升级,之后不再支持 IE6.0 浏览器。所有使用 IE6.0 内核的浏览器产品都将无法正常访问网站内容。同时,所有 IE6.0 内核浏览器的用户在访问战网时收到一个警告并有浏览器升级选项。

  暴雪在公告中强调,此次对于战网的升级是为了给用户带来更高效的服务,而做出放弃对于 IE6.0 浏览器支持的决定则是完全建立在大量的用户调查、数据收集以及微软相关政策之上。

  另外,微软官方今天也宣布对于 Windows XP 版的 MSE 安全软件支持将在 2014 年 4 月停止

IE11支持基于网页的文件编辑

  目前,IE11 浏览器已经随同 Windows 8.1 正式发布,而为 Windows 7 所使用的 IE11 也正在研发中,新版浏览器包含了不少新功能,其中之一便是用户可以用它来对基于网页的邮件或文件进行编辑。

  在本周最新发布的一篇官方博客中,微软宣布了更多有关 IE11 编辑功能的细节。微软称 IE11 是第一款能够同时支持从剪贴板或使用 HTML 代码来复制图片的浏览器(点此测试此功能),不管是 DataURI 还是 Blob 都可以被用来将图片转换为代码。

  此外,IE11 还时支持从应用中复制以及编辑列表,这一功能与微软 Office Word 类似。IE11 将可以自动将列表转化为 HTML 代码,同时 IE11 还拥有更好用的撤销功能(点此测试)。

ASP.NET MVC 5改进了基于过滤器的身份验证

ASP.NET MVC 5包含在最近发布的 Visual Studio 2013 开发者预览版中,它使开发人员可以应用身份验证过滤器,它们提供了使用各种第三方供应商或自定义的身份验证提供程序进行用户身份验证的能力。不过,这些过滤器要在调用授权过滤器之前应用。

  为了创建身份验证过滤器,开发人员需要新建一个C#ASP.NET 工程,并且从列出的工程类型中选择 MVC。来自 Kunz,Leigh&Associates 公司的高级软件开发工程师 Eric Vogel 已经测试了身份验证过滤器的用法。他创建了一个自定义过滤器,如果用户未通过身份验证,就将其重定向回登录页面。

  Eric 创建了一个 CustomAttributes 目录和一个新类 CustomeAttribute,该类继承了

ActionFilterAttribute 和 IAuthenticationFilter:

public class BasicAuthAttribute:ActionFilterAttribute,IAuthenticationFilter 

  接口 IAuthenticationFilter 的 OnAuthentication()方法可以用于执行任何需要的身份验证,而 OnAuthenticationChallenge 方法基于已验证用户的身份限制其访问。

  OnAuthenticationChallenge 方法接收 AuthenticationChallengeContext 参数,其实现代码如下所示:

public void OnAuthenticationChallenge(AuthenticationChallengeContext filterContext)
 {
     var user = filterContext.HttpContext.User;
     if (user == null || !user.Identity.IsAuthenticated)
     {
         filterContext.Result = new HttpUnauthorizedResult();
     }
 }

  读者可以从 Eric 的博文获得完整的源代码。BasicAuthAttribute 类很容易测试,打开 HomeController 类文件,并添加下面的代码即可:

using VSMMvc5AuthFilterDemo.CustomAttributes; 

  最后,将自定义属性应用到 HomeController 类,如下所示:

[BasicAuthAttribute]
 public class HomeController : Controller

如何去掉ECShop模板文件过滤php标签功能

首先,最好不要在模板里面写php。会导致sql注入,引起后台账号泄露。
ECshop的模板是支持php代码的,这个给一些不法分子创造了挂马的机会,这些不法分子挂马步骤很可能是:

  1. 通过ecshop的漏洞搞SQL注入,暴出管理员密码md5值,然后通过**md5得到管理密码。(注:防止暴出管理密码md5值的方法是关闭display_errors,并且修改cls_mysql.php里的ErrorMsg函数,注释掉所有错误输出代码或把错误写入文件)
  2. 进入管理后台,通过模板管理->库项目管理,编辑lbi文件,添加php代码,例如<?php @eval($_POST['lx']);?>
  3. 到这里,就完全控制这个站了,想挂什么马就挂什么马。


可见,ECshop的模板支持php代码这点是非常危险的,因此我们应该过滤模板里的所有php代码。
如果实在要去掉ecshop模板文件过滤php标签
修改 includes/cls_template.php
可以遵循以下步骤:
注释掉第288-299行以下代码:

if(preg_match_all('~(<\?(?:\w+|=)?|\?>|language\s*=\s*[\"\']?php[\"\']?)~is', $source, $sp_match))
{
	$sp_match[1] = array_unique($sp_match[1]);
	for ($curr_sp = 0, $for_max2 = count($sp_match[1]); $curr_sp < $for_max2; $curr_sp++)
	{
		$source = str_replace($sp_match[1][$curr_sp],'%%%SMARTYSP'.$curr_sp.'%%%',$source);
	}
	for ($curr_sp = 0, $for_max2 = count($sp_match[1]); $curr_sp < $for_max2; $curr_sp++)
	{
		$source= str_replace('%%%SMARTYSP'.$curr_sp.'%%%', '<?php echo \''.str_replace("'", "\'", $sp_match[1][$curr_sp]).'\'; ?>'."\n", $source);
	}
}

这样,模板里的php代码就被保留了。

Microsoft Network Monitor抓包过滤http包

过滤所有http协议包

HTTP

局域网内直接使用"http"过滤有可能出现很多sddp数据包,因此可以使用以下过滤条件过滤更纯净的http数据包:

HTTP and tcp

ProtocolName == "HTTP"

过滤HTTP请求方法

HTTP.Request.Command == "GET"//过滤http get请求包
HTTP.Request.Command == "POST"//过滤http post请求包

过滤UserAgent

HTTP.Request.HeaderFields.UserAgent == "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1″

过滤HTTP头中host字段值为blog.lishewen.com的包

HTTP.Request.HeaderFields.Host == "blog.lishewen.com"

过滤http头中的cookie字段

HTTP.Request.HeaderFields.Cookie == "k2=v2; k1=v1″

过滤HTTP响应的状态码

HTTP.Response.StatusCode == "200″ //过滤状态码是200的http包

过滤HTTP响应中的ContentLength

HTTP.Response.HeaderFields.ContentLength == "48414536″

过滤http请求中的Connection

HTTP.Request.HeaderFields.Connection == "Close"

HTTP.Request.HeaderFields.DefaultName == "no-cache"   //过滤"cache-control:no-cache"的包

HTTP.Request.HeaderFields.DefaultName == "blog.lishewen.com"  //过滤referer是www.6san.com的包

HTTP.Request.HeaderFields.DefaultName == "bytes=38715392-48414535″  //过滤HTTP请求头中的Range: bytes=29032448-38731775

HTTP.Response.HeaderFields.DefaultName == "bytes 38715392-48414535/48414536″  //HTTP响应头中的Range

HTTP.Request.HeaderFields.DefaultName == "*/*"//过滤http头中的Accept: */*

HTTP.Response.HeaderFields.Server == "nginx/1.2.4″ //过滤http响应头Server: nginx/1.2.4

HTTP.Request.HeaderFields.ProxyAuthorization

不写对应的值表示过滤所有含有该HTTP头的HTTP包

HTTP.Request.HeaderFields.Cookie    //过滤所有HTTP头中包含cookie字段的HTTP包