JS-混淆&遗忘&难点

记录一些我经常混淆和遗忘的JS点

1. Date类型之时间格式化

1）toGMLString()、toUTCString()、toLocalString()、toString()

  • toGMLString() 和 toUTCString() 都是表示国际标准时间，toGMLString() 已经被淘汰，建议使用 toUTCString() 。
  • toLocalString() 表示当地的时间
  • toString() 表示根据当地的时间，但是格式是国际上的格式

2. slice、subStr、substring

这三者都表示字符串切割("断章取义") [ slice方法Array对象也可以使用 ]

1）区别1：

  • slice 和 substring 的第一个参数表示起分割index，第二个参数表示结束分割index,（不包括结束index）
  • substr 的第一个参数同上，第二个参数是表示要分割的个数

2）区别2：

  • 仅有 substring 会根据选择两个参数中较小的那个作为起始点

3）区别3：

参数中遇上负数

  • substring 中遇到负数直接视为0
  • substr 中遇到负数，第一个参数是字符串长度加上负数，第二个参数视为0
  • slice 中遇到负数，两个参数都是字符串长度加上负数

3. XSS和CSRF

  • XSS: 跨站脚本攻击（Cross Site Scripting），恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
  • XSS
  • CSRF: 跨站请求伪造（Cross-site request forgery）通常缩写为CSRF或XSRF，是一种对网站的恶意利用。XSS 利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。
  • CSRF

4. sessionStorage、localStorage、session、cookie

  • localStorage 、 sessionStorage、cookie 都是用户存储客户端临时信息的对象，且同源的。
  • session 是存储在服务器的临时会话数据
  • localStorage 生命周期是永久
  • sessionStorage 生命周期为当前窗口或标签页
  • cookie生命周期取决于设置的cookie过期时间（如果没有设置过期时间，则浏览器关闭生命周期结束）
  • cookie 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器来回传递。它还有路径的概念，可以限制cookie只属于某个路径下。cookie数据不能超过4k，因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
  • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  • Web Storage 实际上由两个部分组成：sessionStorage 和 localStorage

点击这里

5. querySelector 和 getElementBy..区别 以及性能比较

点击这里

6. 获取不重复的随机数

    // 生成随机数
    getRandomNum(randomLength) {
      let rL = randomLength || 18;
      return Number(Math.random().toString().substr(3,rL) + Date.now()).toString(36);
    },

7. 判断浏览器是否是PC

// 判断是否是pc
isPc: function(req, res){
    let sUserAgent = req.headers["user-agent"].toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    let bIsWP = sUserAgent.match(/windows phone/i) == "windows phone";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || bIsWP) {
        return false;  //Mobile
    } else {
        return true;   //pc
    }
},

8.上报错误到后台

  • window.onerror
  • addEventListener(‘error‘)
  • pormise用catch

doc

JS难点

1. 页面之间的通信

  1. url带参数 -- 单向传递
  2. 可以使用iframe进行嵌套
    1. 方法调用

      • 父页面调用子页面方法：FrameName.window.方法;
      • 子页面调用父页面方法：parent.window.方法;
      • 子页面获取父页面属性：parent.属性
      • 父页面获取子页面属性：Frame.contentWindow.属性

        vue中父页面的方法需要写到index.html或者定义window.parent/window.top = 方法

    2. 自定义事件的监听与调用
  3. postMessage -- 单向传递

    postMessage API

    注意： IE8 和 IE9 仅支持窗口与<frame>和 <iframe>之间的通信

  4. localStorage
  5. websocket

2. 数组中两个交换位置

  1. 方法一

    es6中引入扩展运算符（...），它用于把一个数组转化为用逗号分隔的参数序列，它常用在不定参数个数时的函数调用，数组合并等情形

        arr = [1, 2, 3, 4, 5]
    // 交换第三个和第四个元素
    // x < y
    x = 2, y = 3

    arr.splice(x, 1, ...arr.splice(y, 1, arr[x]))
    console.log(arr) /// [1,2,4,3,5]
  2. 方法二 
        let a=[1,2,3];
    [a[1], a[2]]=[a[2], a[1]];

3. https中的iframe不能加载http的，会出现跨域问题

doc

4. 导出文件（后台传输回流的格式）

DOC

导出excel文件，请求头的accety格式为application/vnd.ms-excel

1.blob格式

new blob可以转化为blob格式

blob doc

<!--if (window.navigator.msSaveOrOpenBlob) // IE10+-->
<!--window.navigator.msSaveOrOpenBlob(file, filename);-->

let link = document.createElement('a');
let year = this.descData.year ? this.descData.year : '- -';
let month = this.descData.month ? this.descData.month : '- -';
link.style.display = 'none';
link.href = window.URL.createObjectURL(response.data);
link.download = `汇报明细_${year}年${month}月`;
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);

2.如果是base64格式

  1. 加类型说明可直接下载

可以直接把base64加到a标签的link属性中在前面加上data:文件类型;base64,，download属性设置文件名字，可以下载

  1. 转化为file格式，在转换为blob格式，用1去下载
base64ToFile(base64Data, tempfilename, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    var file = new File(byteArrays, tempfilename, { type: contentType });
    return file;
}

download属性的兼容性较差，不建议使用，建议后台直接返回url去下载

download兼容一览

5. split方法分割多个字符

str.split(/[字符集合]/)

eg:
'aa-bb_cc/dd' -> [aa, bb, cc ,dd]
'aa-bb_cc/dd'.split(/[-_/]/)

6. base64 和 binary转化

btoa()/atob

ps: a -> ascii, b -> binary

7. onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

兼容性好

8. 移动端阻止页面下拉事件

addEventListener

document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

9. 拿到其他页面的内容（仅浏览内容）

仅适用不考虑样式或内联样式的页面【例如：微信公众号文章】
【PS: 如果带有多图，必须要有浏览行为才可以拿到图片！！】
【所有跨域问题的解决必须有服务器权限和服务器配合 】

  1. 使用iframe做隐形的桥梁（拖慢页面渲染） -- 跨域不可取，浏览器安全限制
    将链接内容放到iframe中，获取iframe中的innerHTML拷贝出来。具体方法如下
    格式：
window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click(); 

格式：
var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();
  1. 考虑使用node抓取数据（后台爬虫）
  2. JQ的load()方法 -- 跨域不可取，浏览器安全限制
  3. 直接请求页面，将拿到的结果回填 -- 跨域不可取，浏览器安全限制
    (ajax,fetch等）
  4. 使用代理转发一层（还未测试）-- 多图不可行，必须模拟浏览器行为

??8. async await,promise,setTimeout执行顺序!!

9.解决浏览器保存密码自动填充问题

场景：注册/修改密码时含有type=password的input和在他之前非type=password的input时会自动填充浏览器保存的密码

  1. form表单可以隔断填充密码问题
<form>
 <input type="text" />
</form>
<form>
 <input type="password" />
</form>
  1. 用隐藏input隔开在chorme无效
  2. 通过focus修改type只在密码在上/除密码之外的input框在下的情况

10.formData

自行创建一个formData格式的请求用于上传文件

创建formData对象

const formData = new FormData();
formData.append('file', (某input元素对象).files[0]);
  • !!不能设置headers的contentType,因为设置Content-Type:multipart/form-data;后不会自动加boundary及之后的内容（例如Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBHCQAyJZJXeOYet1）
  • 注意body中的内容不需要JSON.stringify

js兼容

Response.redirected

一个Boolean是true如果响应表示您的请求被重定向。

ie监听storage差异与其他浏览器

storage变化，ie会刷新所有页面（与当前storage相关的）其他浏览器值会刷新当前页。可以通过比较newValue和oldValue再做出相应的操作

ie和safari不支持

ie get请求缓存不更新

// 兼容IE处理（IE缓存坑）
if (newConf.method.toLowerCase() === 'get') {
    newConf.params = Object.assign({}, (newConf.params || {}), {          _: new Date().getTime()
    });
}

js其他

input file读取文件

  1. 获取file对象: (元素).files[0]
  2. FileReader
  3. 获取url对象-通过file创建链接: createObjectURL

JS冷门知识点

js函数的6个基本术语

  • 匿名函数
  • 头等函数
  • 高阶函数
  • 一元函数
  • 柯里化
  • 纯函数

doc

实用api

  • 监听屏幕旋转变化接口: orientationchange
  • 电池状态：navigator.getBattery()
  • 让你的手机震动: window.navigator.vibrate(200)
  • 当前语言：navigator.language
  • 联网状态：navigator.onLine
  • 页面可编辑：contentEditable

doc

chorme插件

以上内容，如有错误请指出，不甚感激。
如需转载，请注明出处

原文地址：https://www.cnblogs.com/adelina-blog/p/10912668.html

时间： 2024-10-12 11:47:18

JS-混淆&遗忘&难点的相关文章

js callback 和 js 混淆

function test(a,callback){ a+=100; callback(a) } function abc(a){ a+=100; alert(a); } test(5,abc) js 混淆 原文地址:https://www.cnblogs.com/aladam/p/10793515.html

中国空气质量在线监测分析平台之JS加密、JS混淆处理

中国空气质量在线监测分析平台数据爬取分析 页面分析:确定url.请求方式.请求参数.响应数据 1.访问网站首页:https://www.aqistudy.cn/html/city_detail.html,通过抓包工具分析首页请求并没有获取到页面内的数据信息  2.因此可以确定页面内的数据是动态加载的,通过抓包工具捕获加密的响应对象, 3.加密响应对象是通过post请求携带加密的参数发起(2次). 4.综上分析可以确定,动态请求时在搜索按钮触发时发起的,因此通过火狐firefox浏览器分析页面搜索

爬虫之Js混淆&amp;加密案例

需求: 中国空气质量在线监测分析平台是一个收录全国各大城市天气数据的网站,包括温度.湿度.PM 2.5.AQI 等数据,链接为:https://www.aqistudy.cn/html/city_detail.html,网站显示为: 一连串的分析 该网站所有的空气质量数据都是基于图表进行显示的,并且都是触发鼠标滑动或者点动后才会显示某点的数据,所以如果基于selenium进行数据爬取很吃力,因此考虑采用requests模块进行数据爬取. 首先要找到空气质量数据所在的数据包: 使用抓包工具抓取,经

爬虫之JS混淆和加密案例

需求: 中国空气质量在线监测分析平台是一个收录全国各大城市天气数据的网站,包括温度.湿度.PM 2.5.AQI 等数据,链接为:https://www.aqistudy.cn/html/city_detail.html,网站显示为: 一连串的分析 该网站所有的空气质量数据都是基于图表进行显示的,并且都是触发鼠标滑动或者点动后才会显示某点的数据,所以如果基于selenium进行数据爬取很吃力,因此考虑采用requests模块进行数据爬取. 首先要找到空气质量数据所在的数据包: 使用抓包工具抓取,经

js混淆代码还原－js反混淆：利用js进行赋值实现

先贴一个混淆后的测试代码: eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(

使用jsCompress压缩混淆js代码的一些常见的问题和技巧

不同的团队使用的js混淆器或压缩工具不一样,jsCompress是一款绿色的免费的js压缩工具,时代定制的UI团队推荐大家使用,不仅性能优越,而且操作非常人性化. 使用jsCompress.exe时,但是若你的js代码结构有问题,或者js行数太多,一般超过500行,  就有可能会出现无法压缩的故障,或者Js压缩后无法使用. 通常是因为全局变量的问题导致的,全局变量在压缩混淆时丢失,函数内部变量被缩写,导致无法处理.解决方法:将你的Js代码分块压缩,每块尽量少些行数,在压缩后,将代码合并到一个tx

论css学习难点

学习css的新手们都知道 css的两大特性 层叠性 和继承性 并且css作为网络的样式 有着承上启下的作用 上接html 下联JS 他的难点在于专业代码很多 很多同学容易记混淆 或者不记.css主要用类选择器 很少用id选择器(多用于JS) 这是很不利于学习的 古人说 书读百遍其义自见 打代码也是如此 如果不相及 既要多动手 自然就会熟悉 css的属性单位 一定不能记错 并且我认为 选择器是很重要的 我们会大量用到它 如果说 要做效果的话 我想text-shadow是很棒的 做阴影 因为css具

【转】Android 工程在4.0基础上混淆

Android现在对安全方面要求比较高了,我今天要做的对apk进行混淆,用所有的第三方工具都不能反编译,作者的知识产权得到保障了,是不是碉堡了. 一,首先说明我这是在4.0基础上进行的. 先看看project.properties 这个文件. # This file is automatically generated by Android Tools. # Do not modify this file -- YOUR CHANGES WILL BE ERASED! # # This file

js 实现 di

前些时候有使用过AngularJS一些时间,最大的感受就是Angular完全颠覆了我们开发Web应用的方式,自己被其许多耳目一新的设计思想所折服. 首先想说的就是依赖注入(DI),这也意味着,你在使用某一个模块时,不需要去手动require()一下,你需要的模块会自己注入到的函数所在的作用域中,如: JavaScript 1 2 3 4 5 app.service('PersonService', function ($http) {     this.addPerson = function