JS基础与Chrome介绍

导言

在Web开发中后端负责程序架构和数据管理，前端负责页面展示和用户交互；在这种前后端分离的开发方式中，以接口为标准来进行联调整合，为了保证接口在调用时数据的安全性，也为了防止请求参数被篡改，大多数接口都进行了请求签名、身份认证、动态Cookie等机制。另外部分网站会对返回的数据进行加密，通常利用AES、RSA等加密方式，也有在传输时对数据进行序列化，比如Protobuf等。

参数的生成方法都是由Js来控制的，如果要想直接从接口上获取数据，就要去调试分析JavaScript的调用逻辑、堆栈调用关系来弄清楚网站加密的实现方法，根据网站的参数生成规则还原加密参数，可以称这个过程为Js逆向。

目前加密参数常用的逆向方式：

• 根据源码的生成逻辑还原加密代码
• copy源码补环境模拟加密参数生成
• 通过RPC的方式远程调用

一，JavaScript基础

标识符与运算符：

语句标识符：
Throw  抛出异常
const  声明固定值的变量
let    声明块作用域的变量
var    声明变量
this   当前所属对象

逻辑运算符：
&&     and
||     or
！      not

位运算符：
&       如果两位都为1，则设置每位为1
|       如果两位之一为1，则设置每位为1
~        反转所有位
^         异或运算
<<<       零填充左位移
>>>       零填充右位移
>>        有符号右位移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三元运算：

v1 = 条件 ? 值A : 值B;

res = 1 === 1 ? 99 : 88;
console.log(res);  // 99  先执行1 === 1
1
2
3
4

赋值和比较：

v1 = 11 === (n=123)

console.log(n);  // 123
console.log(v1); // false
1
2
3
4

逻辑运算：

v1 = true || true
1

v2 = 9 || 14             # v2=9
v3 = 0 || 15             # v3=15
v4 = 0 || 15 || "武沛齐"  # v4=15

最终结果取决那个值，结果就是那个值
1
2
3
4
5

举例：

var res = (null === (n = window.byted_acrawler) || void 0 === n || null === (a = n.sign) || void 0 === a ? void 0 : a.call(n, o)) || ""

o = {"url":"...."}
n = window.byted_acrawler             -> 确定不为空
a = window.byted_acrawler.sign        -> 确定不为空
window.byted_acrawler.sign.call(n, i) -> 确定不为空

var res = window.byted_acrawler.sign.call(n, o)
1
2
3
4
5
6
7
8

函数中的this：

function sign(v1){
    // this 默认内部会有个this值
    console.log(v1);
}
// 执行，如果没有为this赋值，函数内部默认 this=window
sign(456)


// call的方式执行，函数内部 this=123
sign.call(123,456)

// 若函数内部没有使用this，那sign(456)和sign.call(123,456)这两种写法没有差别
1
2
3
4
5
6
7
8
9
10
11
12

// 举例
var o = window.byted_acrawler.sign.call(n,i)
var o = window.byted_acrawler.sign(i)

// n就会传递给sign函数中this
// i当做参数传递
1
2
3
4
5
6

arguments接收函数的参数：

function sign(){
    console.log(arguments)
}

sign()
sign(11,22,33)
sign(11,22,44,55)

// [Arguments] {}
// [Arguments] { '0': 11, '1': 22, '2': 33 }
// [Arguments] { '0': 11, '1': 22, '2': 44, '3': 55 }
1
2
3
4
5
6
7
8
9
10
11

添加键值对：

v1 = { k1:123 }
v2 = { k2:99, k3:888}

Object.assign(v1, v2) // 将v2的键值对添加到v1中

console.log(v1) // {k1: 123, k2:99, k3:888 }
console.log(v2) // { k2: 99, k3: 888 }
1
2
3
4
5
6
7

属性从一个或多个源对象复制到目标对象，返回修改后的对象

可以运用到补充环境：

extra = { k2:99, k3:888}
Object.assign(global, extra) 

如果global指全局变量，那么可以直接使用如下写法：
console.log(k2)
console.log(k3)
1
2
3
4
5
6

作用域：

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

Js的作用域分为三种：全局作用域、函数作用域、块级作用域。

全局作用域可以让用户在任何位置进行调用，最外层函数和在最外层函数外面定义的变量拥有全局作用域，所有未定义直接赋值的变量会自动声明为拥有全局作用域（如 kfk = “kte”)，所有window对象的属性也拥有全局作用域。

函数作用域只有在函数内部可以被访问。

块级作用域则是在if和switch的条件语句或for和while的循环语句中。

return 返回多个值：

此时实际返回的是最后一个的值，前面的都是在做运算。

在JS中有多种取值方法：

JSONP：

JSONP的由来：

1、Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态页面、web服务，只要是跨域请求，一律不准。

2、不过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>。

3、于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

4、恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

5、这样，解决方案就呼之欲出了，web服务端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件，显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装进去。

6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来很像ajax，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，简称JSONP。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名包裹在JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。示例：https://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403。

总结：jsonp，为了解决浏览器同源策略引发的跨域问题。格式：名字 ( {“code”:0,“message”:“0”,“ttl”:1} )

如果向某个站发送请求，获取到JSONP格式的数据，怎么处理？

- 切片+序列化
- replace
- eval内置函数对数据进行编译（当成代码来编译）
def funcname(info): # 定义对JSONP的处理函数
    print(type(info), info)

v1 = 'funcname( {"code":0,"message":"0","ttl":1} )'
eval(v1)
1
2
3
4
5
6
7
8

二，Window对象属性

Window对象表示浏览器当前打开的窗口，有以下常用属性：

document   history  location   navigator   screen
1

Document，载入浏览器的HTML文档。

cookie   当前cookie
domain    文档域名
referrer   访问来源
title     文档标题
URL     当前URL
1
2
3
4
5

Navigator对象包含的属性描述了当前使用的浏览器，可以使用这些属性进行平台专用的配置。

userAgent   用户代理
webdriver   是否启用驱动
AppName    浏览器名称
1
2
3

Location对象包含有关当前URL的信息。

host    当前主机名和端口号
href     当前URL
protocol   当前URL的协议
1
2
3

Screen对象中存放着有关显示浏览器屏幕的信息。

height    显示屏高度
width     显示屏宽度
1
2

History对象包含用户在浏览器窗口中访问过的URL。

length    浏览器历史列表中的URL数量
back()    加载前一个URL
go()      加载某个具体页面
1
2
3

三，chrome开发者工具介绍

如何调出浏览器开发者工具：

• F12（Fn+F12)
• 右键检查
• 右上角->更多工具->开发者工具

下面介绍chrome开发者工具最常用的5个功能模块：

Elements

元素，是经过了浏览器和JS渲染后的代码，与页面源代码不一样

用于查看或修改HTML元素的属性，CSS属性，监听事件，断点等。CSS可以即时修改，即时显示，大大方便了开发者调试页面，可以右击鼠标，对Elements中的属性进行操作

查看元素的CSS属性：在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自那个CSS文件，使编码调试时修改代码变得十分方便

在Styles页旁边，有一个Computed页面，这个页面展示该元素经过计算之后的所有CSS属性，即最后浏览器渲染页面时使用的属性，属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程

Event Listeners 中显示了选择节点当前绑定的事件：

Console

控制台，一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作JavaScript API查看用，例如想查看console都有那些方法和属性，可以直接输入"console"并执行

Sources

源代码：该页面可以查看页面的HTML源代码，JavaScript源代码，CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等；按列分为三列，从左至右分别是文件列表区、当前文件区、断点调试区

文件列表区中有Page、Snippets、FileSytem等。Page可以看到当前所在的文件位置，在Snippets中单击New Snippets可以添加自定义的Js代码，FileSytem可以把本地的文件系统导入到chrome中

Call Stack：断点的调用堆栈列表，完整地显示了导致代码被暂停的执行路径

Scope：当前断点所在函数执行的作用域内容

Network

网络：就是爬虫中的抓包工具，主要用于查看header等与网络连接相关的信息

过滤按钮负责打开或关闭过滤面板，其中Filter框中是对url进行搜索，XHR：ajax数据，即异步加载数据