2020-04-10 百度地图api和qiankunjs的script劫持引起的问题

首先,我们梳理一下百度地图加载的过程。

我们在页面的html底下写了一条百度地图的script,页面在初始化的时候,会加载这条script,这条script会引入BMap这个全局变量,以及一些处理函数(比如我们下面要讲到的_jsload2),然后会检测localstorage里面有没有需要的一些变量,没有的话,再次写一个标签,形如api.map.baidu.com/getmodules?这样src的script,由于是script标签引入的,所以没有跨域的问题,这条脚本会加载一条条函数,放到全局window底下去实现,把一些处理函数放到localstorage里面。

接着有趣的事情发生了,由于qiankunjs用了自己写的import-html-entry来劫持script标签,把这条标签注视掉,然后发起一个通用的fetch来请求这些资源,这样就导致了那些用script标签引入的资源会导致跨域错误。

可以的解决办法:看了源码,发现在用qiankunjs启动的时候,跨域传入一个opts参数,这条参数,可以写入一个fetch请求,如果没有这个fetch,则使用浏览器自带的fetch,这个地方就给我们留了条口子来hack

说干就干,针对那些有callback的src,我们就可以认为他是jsonp请求,这部分我们拆开来处理,其余的则按照fetch来处理,这里需要注意的是fetchjsonp会写一条标签,这个标签我们得放到document底下,不然依然会被qiankunjs劫持,导致死循环。这样的话,依然会发生上面跨域的问题,为什么呢?原因在于形如api.map.baidu.com/getmodules?这样的标签是没有callback参数的,编者认为可能百度也就不是按照jsonp的请求来实现的,而是仅仅是写一条标签,引入这个资源罢了,但是我们还是按照统一的jsonp来封装请求他。

请求得到的内容,其中就有我上面说的_jsload2

这里有一个_jsload2,这个其实是一开始的百度标签所加载的一个全局函数,写入了window底下,原本,检测出了localstorage里没有相应的内容,即会加载这几条js,来依次写入相应的内容,但是,这个地方,我们犯了个错,本意是想改写_jsload2这个函数,让其能够实现原本功能外,还能监测到其执行的状态,但是,这里犯了个错,这个函数,的参数有两个,但是我们只写了一个,导致后面的内容变成了undefined,从而后续结果报错,这里编者之前还有点纠结一个问题,即换了名字可以成功请求,使用_jsload2却不能成功,后来经过查验发现,由于使用的名字不是_jsload2,但是返回的依然是_jsload2,导致不能访问到我们自定义的callback,然后导致超时,抛出了自定义错误,由于没有捕获,所以我们查看不到,另一方面,虽然导致了自定义错误,但是,由于使用fetchjsonp,这条标签其实是写到document底下的了,然后就自然的加载了资源,在全局window底下执行_jsload2这个函数,未改其名字前,由于写入的参数错误,导致第二个参数成了undefined,导致写入localstorage错误,从而导致后续错误。


总结:这次事件首先我对百度地图加载资源就不太清楚,开始就没有发现是localstorage的问题,然后梳理了一下百度地图加载过程之后,这个事情其实也就比较清楚了,解决方案因人而异,这里是我们的解决方案,并且因此导致的一些问题,谨作记录!

?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,168评论 0 3
  • 面试题一:https://github.com/jimuyouyou/node-interview-questio...
    R_X阅读 1,615评论 0 5
  • 本博客转自:「作者:若愚链接:https://zhuanlan.zhihu.com/p/22361337来源:知乎...
    韩宝亿阅读 2,759评论 0 3
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,080评论 0 2
  • 姓名:岳沁 学号:17101223458 转载自:http://www.cnblogs.com/fsyz/p/80...
    丘之心阅读 481评论 0 0