对峙蠕虫 —— 怎么着让开关不被 JS 自动点击

2017/07/25 · JavaScript
· XSS

原稿出处:
EtherDream   

JavaScript 内存泄漏教程

2017/04/17 · JavaScript
·
内部存款和储蓄器泄漏

初藳出处:
阮一峰   

当transition遇上display

2016/01/13 · CSS · 5
评论 ·
display,
transition

原版的书文出处:
乐途设计划委员会员会   

深信不疑我们在试用css3卡通时候一定用过transition属性,相对于js动画来讲用起来更敏捷轻巧。
代码如下:
HTML结构:

XHTML

<div id=”box”></div> <button>动画按键</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; /*display: block;*/ } .hidden {
/*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () {
if(box.hasClass(‘hidden’)){ box.removeClass(‘hidden’); }else{
box.addClass(‘hidden’); } });

1
2
3
4
5
6
7
8
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if(box.hasClass(‘hidden’)){
        box.removeClass(‘hidden’);
    }else{
        box.addClass(‘hidden’);
    }
});

在点击开关后能够见见淡入淡出的动画效果,不过在css代码中排除对于display属性的两段注释以往,再展开浏览器一看,淡入淡出的成效全没了。
这简直是破坏性的职能,然后小编度娘了刹那间计算了多少个办法。

第一种格局:将display用visibility来代表,我们都驾驭visibility的效果与利益其实跟display在断定水平上平常,那干什么说只是必然水准上相似呢,因为它依旧是占空间的,那您早晚上的集会说,这么用跟opacity没啥差异呀。但却得避防止遮挡上边的层比如开关的点击事件。

其次种办法是相对于第一种艺术的晋级,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; visibility: visible; } .hidden {
display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
setTimeout(function () { box.removeClass(‘visuallyhidden’); }, 20); }
else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        setTimeout(function () {
            box.removeClass(‘visuallyhidden’);
        }, 20);
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

其两种方法与第三种办法类似,用requestAnimationFrame来取代setTimeout,相应的修改了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval大概,通过递归调用同一方法来不断更新画面以高达动起来的职能,但它优于setTimeout/setInterval的地方在于它是由浏览器特地为卡通提供的API,在运行时浏览器会自行优化措施的调用,而且只要页面不是激活状态下的话,动画会自动制动踏板,有效节约了CPU花费。

js代码如下

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
requestAnimationFrame(function(){ box.removeClass(‘visuallyhidden’); });
} else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        requestAnimationFrame(function(){
            box.removeClass(‘visuallyhidden’);
        });
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

以上便是当transition遇上display时碰着的坑。

1 赞 5 收藏 5
评论

图片 1

前言

XSS 自动点开关有何样危机?

在张罗网络里,非常多操作都以因而点击开关发起的,举个例子公布留言。假诺留言系统有
XSS,客户中招后除此之外主题攻击外,还是可以开展传播 —— XSS
自动填入留言内容,并模拟点击公布按键,于是就能够揭露蕴涵恶意代码的留言。基友看了中招后,又突然消失给他们的知心人。。。进而产生蠕虫扩散。

那么有未有一种机制,让「公布留言」必得经过客户的「真实点击」按钮本事成就,而不可企及透过脚本自动完成?那样就会减缓蠕虫传播速度了。

一、什么是内部存款和储蓄器泄漏?

次第的运行必要内部存款和储蓄器。只要程序提议供给,操作系统只怕运行时(runtime)就不可能不供给内部存储器。

对于不断运转的劳动进度(daemon),必得及时放出不再利用的内部存款和储蓄器。不然,内部存款和储蓄器占用更加高,轻则影响系统质量,重则导致进度崩溃。

图片 2

不再使用的内部存款和储蓄器,未有应声放出,就称为内部存储器泄漏(memory leak)。

有一点点语言(例如 C 语言)必需手动释放内部存款和储蓄器,程序猿担任内部存款和储蓄器管理。

JavaScript

char * buffer; buffer = (char*) malloc(42); // Do something with
buffer free(buffer);

1
2
3
4
5
6
char * buffer;
buffer = (char*) malloc(42);
 
// Do something with buffer
 
free(buffer);

地点是 C
语言代码,malloc方法用来申请内部存款和储蓄器,使用达成之后,必需自己用free方法释放内存。

这很勤奋,所以大部分言语提供自动内存管理,缓慢消除程序猿的担当,那被称为”垃圾回收机制”(garbage
collector)。

实现

其一主张听上去好像不可行:假诺发布留言须要带上顾客作为音信,那么 XSS
完全能够伪造一份行为数据,后端根本不能够识别。

除非,客商在点击开关时会爆发三个「特殊数据」,让后端校验它。

但是,XSS 也足以直接调用按键成分的 click
方法,那样效果和客户点击依旧一样。后端仍无计可施辨认是「脚本点的」依然「客商点的」。

如此看来,大家只能爱戴好这几个「开关成分」,让它没有办法被 XSS
访谈到。比如,把按钮放到贰个 分裂源的 iframe 里,那样就和 XSS
所在的条件隔断了!

唯独,那样还相当不够。假设 XSS
破解了这么些「特殊数据」的改动法则,那么就可以自个儿伪造叁个,然后径直调用
HTTP 接口公布留言。所以,大家得找贰个不得伪造的硬标志。

实则,有个很轻松的办法:大家大致让 HTTP 央浼也由此 iframe
发送。这样,后端通过 referer 就可以检查评定哀告是还是不是为 iframe 发起的。毕竟,XSS
是爱莫能助伪造 referer 的!

二、垃圾回收机制

污染源回收机制怎么知道,哪些内部存款和储蓄器不再供给呢?

最常使用的办法叫做“援用计数”(reference
counting):语言引擎有一张”引用表”,保存了内部存款和储蓄器里面有着的财富(日常是各样值)的引用次数。如若二个值的援引次数是0,就代表那么些值不再使用了,因而得以将那块内部存款和储蓄器释放。

图片 3

上海体育场地中,左下角的多少个值,未有此外援用,所以能够释放。

万一四个值不再须要了,援引数却不为0,垃圾回收机制不可能自由那块内存,进而形成内部存款和储蓄器泄漏。

const arr = [1, 2, 3, 4]; console.log(‘hello world’);

1
2
const arr = [1, 2, 3, 4];
console.log(‘hello world’);

上面代码中,数组[1, 2, 3,
4]是二个值,会据有内部存款和储蓄器。变量arr是仅部分对那个值的援引,由此援用次数为1。固然后边的代码未有利用arr,它依旧会软磨硬泡攻下内部存款和储蓄器。

借使扩充一行代码,解除arr对[1, 2, 3,
4]援用,那块内部存款和储蓄器就足以被垃圾回收机制释放了。

const arr = [1, 2, 3, 4]; console.log(‘hello world’); arr = null;

1
2
3
const arr = [1, 2, 3, 4];
console.log(‘hello world’);
arr = null;

上面代码中,arr复位为null,就撤消了对[1, 2, 3,
4]的引用,引用次数变成了0,内部存储器就能够释放出来了。

从而,实际不是说有了废品回收机制,技士就自在了。你要么须要关怀内部存储器占用:那一个很占空间的值,一旦不再采纳,你必需检查是否还存在对它们的援用。假使是的话,就亟须手动解除引用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注