响应式建站网站,移动端网站开发多少钱,免费换友情链接,怎么制作网站视频导言
在Web开发中后端负责程序架构和数据管理#xff0c;前端负责页面展示和用户交互#xff1b;在这种前后端分离的开发方式中#xff0c;以接口为标准来进行联调整合#xff0c;为了保证接口在调用时数据的安全性#xff0c;也为了防止请求参数被篡改#xff0c;大多数…导言
在Web开发中后端负责程序架构和数据管理前端负责页面展示和用户交互在这种前后端分离的开发方式中以接口为标准来进行联调整合为了保证接口在调用时数据的安全性也为了防止请求参数被篡改大多数接口都进行了请求签名、身份认证、动态Cookie等机制。另外部分网站会对返回的数据进行加密通常利用AES、RSA等加密方式也有在传输时对数据进行序列化比如Protobuf等。
参数的生成方法都是由Js来控制的如果要想直接从接口上获取数据就要去调试分析JavaScript的调用逻辑、堆栈调用关系来弄清楚网站加密的实现方法根据网站的参数生成规则还原加密参数可以称这个过程为Js逆向。
目前加密参数常用的逆向方式
根据源码的生成逻辑还原加密代码copy源码补环境模拟加密参数生成通过RPC的方式远程调用
一JavaScript基础
标识符与运算符
语句标识符
Throw 抛出异常
const 声明固定值的变量
let 声明块作用域的变量
var 声明变量
this 当前所属对象逻辑运算符and
|| ornot位运算符如果两位都为1则设置每位为1
| 如果两位之一为1则设置每位为1
~ 反转所有位
^ 异或运算零填充左位移零填充右位移有符号右位移三元运算
v1 条件 ? 值A : 值B;res 1 1 ? 99 : 88;
console.log(res); // 99 先执行1 1赋值和比较
v1 11 (n123)console.log(n); // 123
console.log(v1); // false逻辑运算
v1 true || truev2 9 || 14 # v29
v3 0 || 15 # v315
v4 0 || 15 || 武沛齐 # v415最终结果取决那个值结果就是那个值举例
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)函数中的this
function sign(v1){// this 默认内部会有个this值console.log(v1);
}
// 执行如果没有为this赋值函数内部默认 thiswindow
sign(456)// call的方式执行函数内部 this123
sign.call(123,456)// 若函数内部没有使用this那sign(456)和sign.call(123,456)这两种写法没有差别// 举例
var o window.byted_acrawler.sign.call(n,i)
var o window.byted_acrawler.sign(i)// n就会传递给sign函数中this
// i当做参数传递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 }添加键值对
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 }属性从一个或多个源对象复制到目标对象返回修改后的对象
可以运用到补充环境
extra { k2:99, k3:888}
Object.assign(global, extra) 如果global指全局变量那么可以直接使用如下写法
console.log(k2)
console.log(k3)作用域
作用域最大的用处就是隔离变量不同作用域下同名变量不会有冲突。
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?callbacklist_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)二Window对象属性
Window对象表示浏览器当前打开的窗口有以下常用属性
document history location navigator screenDocument载入浏览器的HTML文档。
cookie 当前cookie
domain 文档域名
referrer 访问来源
title 文档标题
URL 当前URLNavigator对象包含的属性描述了当前使用的浏览器可以使用这些属性进行平台专用的配置。
userAgent 用户代理
webdriver 是否启用驱动
AppName 浏览器名称Location对象包含有关当前URL的信息。
host 当前主机名和端口号
href 当前URL
protocol 当前URL的协议Screen对象中存放着有关显示浏览器屏幕的信息。
height 显示屏高度
width 显示屏宽度History对象包含用户在浏览器窗口中访问过的URL。
length 浏览器历史列表中的URL数量
back() 加载前一个URL
go() 加载某个具体页面三chrome开发者工具介绍
如何调出浏览器开发者工具
F12FnF12)右键检查右上角-更多工具-开发者工具
下面介绍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进行搜索XHRajax数据即异步加载数据
按钮其实就是ctrlF调出的全局搜索按钮相比Filter框搜索搜索得更细
Preserve log保留日志当选择保留日志重新加载url界面时之前请求显示的资源信息会保留下来
Disable cache禁用缓存当关闭这个开关则页面资源会存入缓存以后再有请求时如果缓存中已有则不会再向浏览器发送请求
Application
Application是应用管理部分主要记录网站加载的所有资源信息包括储存数据Local Storage, Session Storage, Cookies等、缓存数据、字体、图片、样式、脚本等。
有时调试需要清除Cookies可以在Application的Cookies位置单击鼠标右键选择Clear进行清除或者根据Cookies中指定的Name和Value进行清除。
注意在辨别cookie来源时可以看到httpOnly一栏有√的是来自服务端没有√的则是本地生成的。
