Blog

This page will collect some useful websets.

• ss free account
• v2ray free account
• awesome-github-profile-readme

probot

• probot
  • Auto-comment
  • pull
  • delete-merged-branch
  • stale

面试遇到了问题:<p>中能不能插入<div>? 插入<div>会如何?

先直接实践下：

我们可以看到,

把

分成了两段, 并且div外字段并不在

内。把div变成行内块级元素也不行。

解答: 可以在HTML标准(https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)中看到,

虽然是块级元素, 但是只能包含行内元素, 不能包含块级元素(包括

自己)

over!

web安全一直是开发中不可忽视的一部分。而xss作为web开发中最常见的攻击手段，防范是必然的。基于web浏览器tricks，JavaScript的发展，npm等开源项目漏 洞，web注入等会让开发者越来越防不胜防。

插入执行标签

• script
• img onerror触发
• iframe srcdoc触发

标签等提前闭合(截断)

• 如在富文本, input, textarea, 可编辑div等，0x01，0x02
• style标签

  1 2 3

  <style> </style ><script>alert(1)</script> </style>

• 注释提前闭合

  1	--!><script>alert(1)</script>

eval

1
2

var json = '{"a":"1", "b":2}';
var obj = eval("(" + json + ")");  // obj 就是 json 反序列化之后得到的对象

为什么要加括号呢？ 因为js中{}通常是表示一个语句块，eval只会计算语句块内的值进行返回。加上括号就变成一个整体的表达式。

1
2

console.log( eval('{}') );      // undefind
console.log( eval('({})') );    // Object {}

eval作用域问题

1 2 3 4 5 6 7

var s = 1; function a() { eval('var s=2'); console.log(s); } a(); // 2 console.log(s); // 1

在局部环境使用eval便会创建局部变量。可以显示指定eval调用者来改变上下文环境。

1
2
3
4
5
6
7

var s = 'global';
function a() {
    eval('var s = "local"');
    console.log(s);                 // local
    console.log(eval('s'));         // local
    console.log(window.eval('s'));  // global
}

对参数json进行校验防止xss漏洞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;

if (
    rx_one.test(
        json
            .replace(rx_two, "@")
            .replace(rx_three, "]")
            .replace(rx_four, "")
    )
) {
    var obj = eval("(" +json + ")");
}

递归手动扫描每个字符

new Function 函数声明的传参形式

1
2

var add = new Function('a, b', 'return a+b;');
console.log( add(2, 3) );    // 5

1
2

var jsonStr = '{ "age": 20, "name": "jack" }',
    json = (new Function('return ' + jsonStr))();

插入script

模拟jsonP的方式拼接字符串然后以callBack的方式返回。

什么是响应式网站

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

防止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

执行上下文(EC)就是当前JavaScript代码被解析和执行是所在环境的抽象概念，JavaScript中运行任何的代码都是在执行上下文中运行。

变量/函数提升(函数及变量的声明都将被提升到函数的最顶部，且函数声明在变量声明上边)

1
2
3
4
5

if(!("a" in window)){ // false
    var a=1;
}
console.log(a) // undefined
// if(o.x){} // 不能判断属性存不存在 假值undefine,null,false," ",0或NaN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function foo() {
    console.log('foo1');
}

foo();  // foo2

function foo() {
    console.log('foo2');
}

foo(); // foo2
---
var getName = function () { alert (4);};
function getName() { alert (5);}
getName(); // 4
---
function getName() { alert (5);}
var getName = function () { alert (4);};
function getName() { alert (6);}
getName(); // 4

函数表达式执行的优先级==!主要原因是函数声明都被提前了，所以函数表达式在最后会覆盖。

JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。插槽slot 可执行代码的类型：全局代码、函数代码、eval代码。 JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文

今天要说的是最简单的 for 循环，一个简单的 for 循环看似没有任何优化的意义，但实质上优化前后差距挺大的，那么该如何优化呢？

this 的指向

this 是 js 中定义的关键字， 它的指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。在实际应用中，this的指向大致可以分为以下四种情况。

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁(取决于函数的调用位置)，实际上this的最终指向的是那个调用它的对象(函数的直接调用者);