流量劫持 —— 浮层登录框的隐患

传统的登录框 在之前的文章流量劫持危害详细讲解了 HTTP 的高危性,以至于重要的操作都使用 HTTPS 协议,来保障流量在途中的安全。 这是最经典的登录模式。尽管主页面并没有开启 HTTPS,但登录时会跳转到一个安全页面来进行,所以整个过程仍是比较安全的 —— 至少在登录页面是安全的。   对于这种安全页面的登录模式,黑客硬要下手仍是有办法的。在之前的文章里也列举了几种最常用的方法:拦截 HTTPS 向下转型、伪造证书、跳转钓鱼网站。 其中转型 HTTPS 的手段最为先进,甚至一些安全意识较强的用户也时有疏忽。   然而,用户的意识和知识总是在不断提升的。尤其在如今各种网上交易的时代,安全常识广泛普及,用户… Read More

从输入 URL 到页面加载完成的过程中都发生了什么事情?

背景 本文来自于之前我发的一篇微博:     不过写这篇文章并不是为了帮大家准备面试,而是想借这道题来介绍计算机和互联网的基础知识,让读者了解它们之间是如何关联起来的。   为了便于理解,我将整个过程分为了六个问题来展开。 第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互。   触摸屏一种传感器,目前大多是基于电容(Capacitive)来实现的,以前都是直接覆盖在显示屏上的,不过最近出现了 3 种嵌入到显示屏中的技术,第一种是 iPhone 5 的 In-cell… Read More

实现动态验证码的思路

示例 背景 验证码主要是防止机器暴力破解。之前的验证码都是以静态为主,现在一些产品开始使用动态方式,增加破解的难度。动态方式以 gif 最为简单可靠。gif 兼容性好,尺寸小。这里分享的就是一种:用 JS 实现 gif 动态验证码的思路。感谢关注。 任务分解 绘制旋转的文字 计算每个字符出现位置和角度 生成 gif 图片 逐步求精 如何绘制旋转的文字?   了解能用的 API context.rotate(angle) 使当前坐标系旋转 angle,单位弧度 context.translate(x, y) 使当前坐标系偏移 x, y,单位像素 context.font 设置字体 context.strokeText(text, x, y [, maxW… Read More

外链图片也有风险吗?

一直以来,各大论坛和邮箱都允许使用外链图片。一方面解决了上传和保存带来的资源消耗,更重要的是方便用户转载图片。   然而,简单的背后是否暗藏着什么风险呢?大多或许认为,不就是插入了一张外部图片而已,又不是什么脚本或插件,能有多大的安全隐患。   曾经也有过外链图片泄漏cookie那样的重大隐患,不过那都是很久以前的事了。在如今浏览器日新月异的年代里,这样的bug已经很难遇到了。不过利用正常的游戏规则,我们仍能玩出一些安全上的小花招。 No.1 —— HTTP401 (严重程度:低) 大家都见过,打开路由器的时候会弹出个登录框。     如果了解HTTP协议的话,这是服务器返回4… Read More

jQuery : ddSlick 自定义select下拉框 custom drop down with images and description.

ddSlick 是一个轻量级的 jQuery 插件用来实现定制的下拉组件。 主要特点: Adds images and description to otherwise boring drop downs. Uses JSON to populate the drop down options. Uses Minimum css and no external stylesheets to download. Supports callback functions on selection. Works as good even without images or description. 官网:http://designwithpc.com/Plugins/ddSlick 下载:… Read More

我所知道的几种display:table-cell的应用

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价 值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。 与其他一些display属性类似… Read More

大小不固定的图片和多行文字的垂直水平居中

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简 单,上手容易,兼容性强,… Read More

在JavaScript里嵌入大量字符串常量的方法

在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里。数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如: var html = '<div>' + '<p>Hello</p>' + '<p>World'</p>' + '</div>'; 这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱。 其实有个不怎么起眼的小技巧,就能解决这个问题。大家总认为字符串必须在”R… Read More

【漫画详解】用iframe障眼法,骗取用户点击

做过Web开发的朋友曾经都有过这么个念头:在自己的页面里内嵌一个其他网站的网页,然后可以用脚本去获取他们页面里的信息,甚至可以。。。 显然,有这么好的事也肯定轮不到你来尝了:)一个叫沙箱模型的东西被发明出来,就是防止有这种想法的人搞破坏。。。所以现在的我们只能远观,不可亵玩也。   不过,这些规定只是针对脚本而已。假如让用户自己乖乖的去点,那当然是没问题的。但有多少人会去点呢!! 所以,我们需要施一些特殊的障眼法,让用户在不经意间,就点了我们想让他点的东西:) 就拿上面那个来说吧,如果直接把这个大页面赤果果的硬塞进网页,无论你怎么提示他点,或者说多少好话,大家见了就烦,就是不点:)  … Read More

7款最佳jQuery和JavaScript的PDF查看器插件

在这篇文章中,我们将提供最好的PDF浏览器插件。 1. JavaScript的PDF阅读器(JavaScript PDF Reader : pdf.js) pdf.js 基于HTML5实现 在线演示 2. jQuery的媒体插件(jQuery Media Plugin) jQuery的媒体插件支持丰富的媒体内容不显眼的转换标准标记。它支持virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF 等等 在线演示 3. 嵌入PDF文件转换成HTML文件(PDFObject : Embeds PDF file… Read More

jQuery函数 – 左右抖动效果,用于提示

WordPress博客后台登录输入错误的话登录窗口有左右抖动的效果。弄成jQuery函数方便调用(前提已载入jQuery包) function shake(o){ var $panel = $(“#”+o); box_left = ($(window).width() –  $panel.width()) / 2; $panel.css({‘left’: box_left,’position’:’absolute’}); for(var i=1; 4>=i; i++){ $panel.animate({left:box_… Read More