深度实战Electron,开发本地音乐播放器

2023-05-28 0 967

广度两栖作战Electron,合作开发邻近地区音乐创作MP3

深度实战Electron,开发本地音乐播放器

作为三个前端合作开发相关人员,你可能将已经听闻过Electron了,你知道VS Code是如前所述那个控制技术合作开发的。不仅VS Code,

palio!怎样download专业课程

目前一些红极一时的应用软件:陕郡、Slack、WhatsApp都是如前所述那个控制技术合作开发的。

即便组织工作不会牵涉到,也应该学呵呵Electron,因为它是T5450手上的法宝,你可以通过他做许多Amazing的事。

责任编辑主要谈谈Electron是甚么,以及它能做甚么T5450组织工作。

Electron的来历

2011年以内,我国AMD开放源码控制技术中心的李涛睿(Roger Wang)期望能用Node.js来操作方式WebKit,而建立了node-webkit工程项目,这是NW.js的建立者。彼时的目地并不是用这三个控制技术来合作开发图形界面GUI应用领域。

我国AMD开放源码控制技术中心全力支持了那个工程项目,不仅容许李涛睿划出一小部分心力来做那个开放源码工程项目,送给了他招工席位,容许他招工其他技师来一同顺利完成那个工程项目。2012年,故事节的另三个主人公曹武公(Cheng Zhao)重新加入到李涛睿的组成员,并对node-webkit工程项目作出了大批的改良。

而后曹武公离开了我国AMD开放源码控制技术中心,帮助github项目组试著把node-webkit应用领域到AtomGUI上,但由于彼时node-webkit还并不平衡,且node-webkit工程项目地迈向也倍受曹武公的掌控,那个试著最后以失利收场。

但曹武公和github项目组并没有舍弃,而要著手合作开发另三个类似于node-webkit的工程项目:Atom Shell,那个工程项目是Electron的建立者,曹武公在那个工程项目上饱含了大批的呕心沥血,这也是那个工程项目而后广畅销的关键因素之一,再而后github把那个工程项目开放源码出来,最后改名为Electron。

你可能将从据我所知这三个英文名字,但开放源码界是有这么一大批“英雄人物”,他们不为名利而来,甘做应用软件行业发展的铺路石,值得那个领域的所有从业者尊敬(以上内容与Electron的作者确认过)。

注入脚本

Electron内部拥有三个完整得浏览器核心,你可以用程序操纵那个浏览器核心,让它加载三个第三方网页,比如:淘宝的生意参谋、网易云音乐创作、gitee等,但单单加载这些网页,并没有甚么稀奇的,毕竟在浏览器里也能加载这些网页。最有意思的是,你还可以给这些网页注入脚本,比如像下面这样,注入三个Js文件到目标网页:

let win = new BrowserWindow({ webPreferences:{ preload: path.join(appPath,yourPreload.js), nodeIntegration: true }});win.loadURL(https://www.baidu.com/);

如果你只期望注入一两句代码,也可以通过如下形式注入脚本:

let decryptStr = await this.win.webContents.executeJavaScript(window.allendecrypt(${encryptStr}));

这些脚本是在目标网页的作用域下执行的,与目标网页的技师自己写的代码没甚么区别。想象呵呵,你如果想调用目标网页的某个服务端接口,你是不是应该考虑怎样模拟token,怎样跨域等等问题,现在你只需要在脚本里直接写调用接口的逻辑就可以了。

另外,如果你不喜欢目标网页的页面样式,你也可以直接注入一段样式脚本,代码如下:

深度实战Electron,开发本地音乐播放器

突破同源策略的限制

注入了脚本,获浏览器往往会报如下错误:

Access to XMLHttpRequest at https://www.domain1.com/aggsite/AggStats from origin http://www.domain2.com:8080 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.

“同源策略”是浏览器的三个安全功能,“同源”是指如果三个页面的协议(http/https)、端口和主机都相同,则三个页面具有相同的源。同源策略规定不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。只有同三个源的脚本才具备读写cookie、session、ajax等的操作方式的权限。

在Electron中突破同源策略,是一三个配置的事,代码如下:

let win = new BrowserWindow({ width:800,height:600, webPreferences:{ nodeIntegration: true, webSecurity: false,//此参数禁用当前窗口的同源策略}})win.loadURL(https://www.baidu.com/);

这样设置之后,浏览器的所有同源策略限制就全部失效了。如果你只是期望在https域下访问http的资源,那么你可以不用关掉整个同源策略,只需要把allowRunningInsecureContent那个配置设置为true即可(它同样也是webPreferences下的三个属性)。如果你设置webSecurity为false了,那么allowRunningInsecureContent会自动设置为true。

读写受限访问的Cookie

由于浏览器每次与服务端的交互,都会携带同域下的所有Cookie,所以网站合作开发者往往会把标记用户身份的信息(比如用户token)放到Cookie里。

一般情况下,前端合作开发技师可以使用document.cookie访问浏览器里存储的同域的Cookie,但也有例外,凡标记了HttpOnly的Cookie,通过这种方式都是访问不到的。网站合作开发者之所以这么做,主要是为了防止跨站脚本攻击(XSS)和跨站请求攻击(CSRF)。

跨站脚本攻击(XSS,是Cross Site Scripting的缩写),一旦网站容许用户提交内容,并且会在网站的某些页面上显示用户提交的内容,比如留言或者博客,那么不做防范的话,就有可能将受到跨站脚本攻击。恶意用户会在提交内容时在内容中夹带一些恶意JavaScript脚本,当其他用户访问页面时,浏览器会运行这些恶意脚本,恶意脚本有可能将会窃取用户的Cookie、页面上的用户隐私信息等,并发送到恶意用户的服务器。他们可以通过这些窃取来的信息模拟用户身份顺利完成非法操作方式。这是跨站脚本攻击。跨站请求攻击(CSRF,是Cross Site Request Forgery的缩写),当用户登录了自己信赖的网站后,用户身份信息(token)会被保存保存在用户的浏览器上,而后用户又不小心打开了三个恶意网站,那个恶意网站可能将会要求浏览器请求用户信赖的网站(通过iframe等形式),如果用户信赖的网站没有做安全防范的话,

但那个限制在Electron面前也不值一提,我们可以通过下面这种方式读写受限访问的Cookie:

function(name){ let cookies = await remote.session.defaultSession.cookies.get({name}); if(cookies.length>0) return cookies[0].value; else return ;}//设置Cookieasync function(cookie){ await remote.session.defaultSession.cookies.set(cookie);}

通过这种方式,无论Cookie有没有设置HttpOnly属性,都可以成功读写。

转发/修改请求

有的时候你不单单是期望给第三方网页附加代码逻辑,而要期望侵入式的修改第三方网站自身的代码逻辑。但往往第三方的JavaScript代码是在三个闭包作用域内执行的,你的代码没办法注入到那个作用域内,去访问作用域内的变量或方法,碰到这样的状况该怎么办呢?

此时,你第一步要做的,是分析清楚它的脚本是怎样执行的,是哪个脚责任编辑件执行的。那个过程是三个非常有趣的过程,不可避免的你要用到谷歌浏览器的合作开发者调试工具,如果对方的代码是压缩过的,你可能还要给它“美化”呵呵,再逐步调试。

搞清楚逻辑之后,就把他的脚责任编辑件下载下来,然后在那个文件中加上你的逻辑,你的逻辑可能将是粗暴的把它闭包作用域内的变量暴露到window对象上。这样你注入的脚本,就可以访问那个变量了。

修改完那个脚责任编辑件后,把那个脚责任编辑件host到你自己的三个服务器上,然后通过Electron把网页加载那个脚责任编辑件的请求,转发到你自己的服务器上去,那个转发请求的代码如下:

win.webContents.session.webRequest.onBeforeRequest({ urls:[“https://*/*”]}, async (details, cb)=>{ if (details.url ===https://g.alicdn.com/dt/op-mc/vendors.js){ cb({ redirectURL:http://domain.com/vendors.js});} else { cb({})}});

当那个网页再试图加载那个脚本时,得到的结果将是你修改过的脚本。

有些网站对一些敏感数据保护的很好,客户端请求这些数据时,得到的是服务端加密过的数据,客户端执行解密后,再使用这些数据。对于这类网站,Electron的那个能力无疑是非常有力的。

当然,你也可以考虑使用PWA控制技术里的service worker来办那个事儿,甚至可以自己在客户端模拟三个响应,不用再经由你的服务器转发了。如果你没有自己的服务器,也可以通过Node.js的能力,自己在应用软件里起三个localhost的服务。所有这些骚操作方式,都必须时在Electron内执行的哦。

反“防盗链”

有的时候你可能将只是想把目标网站的一些静态资源嵌入到你的应用领域程序中,比如:图片或者视频。然而如果目标网站已经做了防盗链的组织工作,你那个功能可能将就没那么容易实现了。

防盗链的主要目地有三个:三个是版权问题,别人未经授权就使用你的资源,另三个是流量压力的问题,盗链产生了大批的请求,这些请求对于网站运营者来说没任何价值。

防盗链最常见的做法是识别HTTP的Refer请求头,那个请求头代表着发起请求时前三个网页的地址,网站运维技师会根据那个Refer请求头来推测出当前请求是否为三个盗链请求(判断那个Refer请求头的内容是不是自己域名下的三个地址)。

Electron容许合作开发者监听发起请求的事件,并容许合作开发者在发起请求前修改请求头,我们可以在那个事件里修改那个Refer请求头,代码如下:

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务