[TOC] 0x00 前言 小小知识大作用 0x01 F&Q 1.前端Web Q:a标签target="_blank"的安全问题及解决办法 答:A标签的target属性规定在何处如何打开链接文档常用的有...:我们知道JS在在调用window下的open方法创建一个新窗口的同时，我们可以获得一个创建窗口的opener句柄，如果通过target=”_blank”点开的窗口活着标签页，此时子窗口也能捕获opener...，又假如此时b.html有如下js代码 if (window.opener) { window.opener.location.href = 'eval.html'; } 当页面b.html被打开的同时原来打开.../default.html #此时由于target属性为_blank且没有限制Window.opener访问行为执行以下语句此时窗口1将会加载下面得网站文档内容; window.opener.location.href...= url; 总结:在开发中一些小细节还是要引起注意别怕麻烦，比如我们以后在写a标签的时候尽量都在target=”_blank”后面添加一句rel="noopener noreferrer"。
，并且是同一站点的则会默认共用一个渲染进程 如下图： image.png 2.4 通过父页面的a标签打开 当在主页面test.com中已 标签的方式在新标签中打开页面是，同一站点也共用一个渲染进程...还是上面的图 -- 切换到test.com页面（test.com页面是由test.com页面中a标签打开），在控制台查看window.opener 会发现同源站点，具有同一浏览上下文组，子页面可以使用window.opener.document...操作父页面dom image.png -- 我们切换到local.test.com页面（local.test.com页面是由test.com页面中a标签打开），在控制台查看window.opener...-- 我们切换到other.com页面（other.com页面是由test.com页面中a标签打开），在控制台查看window.opener 会发现不同站点，具有同一浏览上下文组，子页面不可以使用window.opener.document...操作父页面dom和js对象 image.png -- 我们切换到local.test.com页面（local.test.com页面是在新标签页中打开），在控制台查看window.opener发现为null
新标签页中打开一个网址如何出现安全漏洞 让我们在网站上的新标签页中打开一个网址，HTML如下 访问恶意网站！... 这里我们有一个指向恶意网站的 href 属性，并以 _blank 属性为 target，使其在新标签页中打开。...现在恶意网站可以访问你网站的 window，这显然在重定向此方法时打开了一个安全漏洞。...因此，在将用户导航到你未维护的新域时，请当心。...通过js打开新标签页时，该如何处理？
使用了此标签表明链接与网站作者无关，也就是说搜索引擎不会用这个链接计算网站的 PR 值。很多博客程序都会自动在评论链接中加上 nofollow 标签。...然而，火狐不支持这个属性值，所以实际上你要用 rel="noopener noreferrer"来完整覆盖。...target="_blank"属性特别提示 当你浏览一个页面点击一个a标签连接 跳转到另一个页面时， 在新打开的页面（mimvp...）中可以通过 window.opener获取到源页面的部分控制权， 即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。 ...36+，打开添加了rel=noopener的链接， window.opener 会为null。
COOP（Cross Origin Opener Policy：跨源程序打开策略）是我们之前在文章中多次提到的一个浏览器安全策略，它可以帮助我们的网站创建一个安全的隔离环境，从而避免一些 Web 安全风险...比如可以错误处理、资源加载、计时等机制来推断出用户的隐私信息。 比如 window.opener 属性就是一种常用的利用目标，攻击者可以通过利用 window.opener 属性来获取敏感信息。...攻击者创建一个恶意网站（Site A），并在其中包含以下代码： // 在Site A中打开一个新窗口 var newWindow = window.open('https://target-site.com...在用户访问时，Site A 会打开一个新的窗口或标签页，并加载目标网站（target-site.com）。...当目标网站加载完成后，攻击者的恶意代码会通过 window.opener 属性获取源页面（用户当前所在的页面）的 window 对象。
window.open 创建新的窗口 除此之外还有两个特例，就是 a 标签和form标签，当 a标签的 target 属性被设置为 _blank 时，点击标签会创建新窗口 当 form 标签渲染的表达被提交时...，这几个特殊的关键字在 a 标签中完全支持 那 a 标签中 target 的意义是什么呢？...还是顶级导航的页面，还是干脆新打开一个标签/窗口来展示 _self：当前页面加载。（a标签默认） _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。...使用 noopener 时，在决定是否打开新的浏览上下文时，除 _top、_self 和 _parent 以外的非空目标名称会像 _blank 一样处理 7) noreferrer 如果设置了此特性，浏览器将省略...，进入控制台，输出 window.opener看看是否存在内容 存在 window.opener 但是获取不到父窗口的上下文，如果此时，在子窗口使用 window.opener 对象的 open 方法再打开一个与父窗口同源的新窗口
无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。 接着就发生了奇怪的现象，重新生成站代码发布完成后，自测是没有问题的，但是有网友反馈说站点访问加载不出来内容。...连忙打开手机访问验证了下一切都是正常的，切换到电脑访问（用的是Edge浏览器）也是正常，难道真的是个别现象吗？...然后又切换到火狐浏览器进行测试，结果还真是加载不出来内容，通过 F12 也快速定位到了的问题，是因为关闭了谷歌在线翻译功能后，按钮的注册事件失败，影响到了后续 JS 脚本的执行。...熟悉 JS 代码的小伙伴应该都清楚这里发生了啥，最简单的修复方式就是在注册点击事件前，加个 if 条件判断，当元素不存在时不进行事件注册。...看来对于 hugo-theme-next 主题的代码架构评审的工作得加紧啦，毕竟使用的用户也在逐步增长中，得对大家的信赖“负责”才是。
定义 a 标签的 rel 属性用于指定当前文档与被链接文档的关系。 用于a标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。...这两种属性可以在 a 标签中同时使用。 属性值 noopener 用于浏览器安全防护，防止钓鱼攻击。...指示浏览器打开目标文档而不授予目标文档打开源文档的访问权限，打开添加了 rel=“noopener” 的链接，window.opener 会为 null。...当打开不受信任的链接时，这个属性特别有用，可以确保目标文档无法通过Window.opener属性来篡改源文档，同时仍提供 Referer HTTP标头（除非同时使用noreferrer）。...注意：使用noopener时，在决定是否打开新窗口/选项卡方面，除_top，_self和_parent 以外的非空目标名称都被视为_blank 。
例如，如果网站（https://a.example）打开弹出窗口（https://b.example），则打开器窗口和弹出窗口共享相同的浏览上下文，并且它们可以通过 DOM API相互访问，例如 window.opener...特别是在使用一些需要和计算机硬件进行交互的 API 时： SharedArrayBuffer (required for WebAssembly Threads) performance.measureMemory...例如，如果带有 COOP 的网站打开一个新的跨域弹出页面，则其 window.opener 属性将为 null 。...对于你无法控制的跨域资源，可以手动在 html 标签中添加 crossorigin 属性。...如果有不符合规范的资源，将不会被禁止加载，而是上报到你的服务器日志中。
(默认情况下，手动模式可以在首选项中启用) 可以对IPFS加载页进行如下的附加操作： 通过API对IPFS资源进行Pin/Unpin 复制IPFS地址 将可分享的资源地址复制到首选网关中 2.3 调试实验...默认情况下是未启用的，需要切换到Preferences Screen。...将IPFS API的子集公开为window.ipfs ，意味着每个网页加载时就可以监听到IPFS节点的接入，而不是生成自己的js-ipfs节点，这节省了资源、电量等消耗。...WebExtensions 产品经理 Mike Conca 在 Mozilla 官网发布了文章(Extensions in Firefox 59)，列举了火狐59的最新扩展(目前发布于测试版)。...六、使用QA和Bug提交 官方在Github上提供了专门的issue讨论区，大家在使用过程中遇到问题可以在这查询解决方案： https://github.com/ipfs/ipfs-companion
内容安全策略（CSP）: 主要以白名单的形式配置可信任的内容来源，在网页中，能够使白名单中的内容正常执行（包含 JS，CSS，Image 等等），而非白名单的内容无法正常执行。...但如果在第三方站点中使用 Post 方法，或者通过 img、iframe 等标签加载的 URL，这些场景都不会携带 Cookie。...window.opener 安全问题 window.opener 表示打开当前窗体页面的的父窗体的是谁。...例如，在 A 页面中，通过一个带有 target="_blank" 的 a 标签打开了一个新的页面 B，那么在 B 页面里，window.opener 的值为 A 页面的 window 对象。...将外链替换为内部的跳转连接服务，跳转时先跳到内部地址，再由服务器 redirect 到外链。 可以由 widow.open 打开外链。
https://segmentfault.com/a/1190000037673677 最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法...实现截屏的代码，假设文件名为github.js： // 创建一个网页实例 var page = require('webpage').create(); // 加载页面 page.open('http:...重新设置SLIMERJSLAUNCHER为59版本的火狐浏览器之后，发现就能成功了。 不过，Puppeteer默认会打开浏览器界面，也就是non-headless模式。...测试的时候，发现外部资源不能加载，所以简单的了解了后就放弃了。 html2canvas html2canvas。网上查了下感觉有一篇文章写的挺好的：浅析 js 实现网页截图的两种方式。...以Puppeteer的API为例，可以首先使用page.addScriptTag(options)往网页中添加前端截屏的库，然后在page.evaluate(pageFunction[, ...args
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。...DOM树：（一切都是节点） 在HTML当中，一切都是节点（非常重要） 整个html文档就是一个文档节点。所有的节点都是Object。...总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写： 下一个兄弟节点...浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。...如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
图片加载失败在不同浏览器表现有差异，比如google可能会一片空白、img的宽高是0*0，ie会在图片位置会出现一个碎片图标，火狐会显示一个边框像这样： 一个页面如果很多这种好难看，一般会用默认图片替换显示...在img的伪类加替换图片，但火狐的img没有伪类，google有，有时候就算给img标签加了width、height也没有，图片加载失败img的宽高依然是0，详情见这篇文章： https://www.cnblogs.com.../fangsmile/p/7290945.html 这样使用是应为img标签的一些特性： 1，img是个比较特殊的标签，和video一样具有被替代性，所有当图片加载成功时，原先定义的伪类会失去作用不提示...2，alt属性会在图片加载失败是出现（替代文字），这样伪类就会起作用了。...; height: 100%; background: url('替代图片'); background-size: 100% 100%; } css方案由于兼容问题，不能完美解决，所以推荐js
content_scripts：Chrome 插件中向页面注入脚本的一种形式，包括地址匹配（支持正则表达式），要注入的 JS、CSS 脚本，代码注入的时间（建议 document_start，网页开始加载时就注入...然后创建 script 标签，script 标签内容是将 Hook 函数变成 IIFE 自执行函数，然后将其插入到网页中。...再依次选择开启【开发者模式】—>【加载已解压的扩展程序】，选择整个 Hook 插件文件夹（文件夹里应包含 manifest.json、javascript_hook.js 和图标文件），如下图所示： [...在浏览器地址栏输入 about:addons 或者依次点击右上角【打开应用程序菜单】—>【扩展和主题】，也可以直接使用快捷键 Ctrl + Shift + A 来到扩展页面，在管理您的扩展目录旁有个设置按钮...：载入完成后执行，默认选项；context-menu：在浏览器上下文菜单中单击该脚本时，一般将其设置为 document-start 重新来到航班查询页面，启用 TamperMonkey 脚本，如果配置正确的话
1.首先将css文件引用放在head标签中，js文件引用放在页面代码的末尾； 2.分别合并css文件引用和js文件引用的请求（具体方法请参考：网页优化系列一：合并文件请求（asp.net版））； ...注意：Table标签除了TD的innerHTML属性可写可读外，其他标签的innerHTML属性为只读，因此我在前端用了一个全局变量保存已加载的记录，然后跟新的记录合并后重新生成表格，显示时感觉会有点突兀...现在想起来其实可以把只传递判断使用什么html标签的标识符和具体的内容数据，然后用js生成表格的结构，而因为这个操作的js文件比较大就可以在前一个页面进行预加载，当进入该页面时就可以直接读cache了。...，操作列中的控件清空。 好了，现在页面剩下3000多个html标签，体积为1M左右，加载时间为5秒左右。...子页面部分：定义一个var parent = window.opener全局对象，然后将由该页面打开的子页面的window对象加入到parent.子、孙数组中。
，首先，打开网页后，直接用浏览器（火狐）自带的开发者工具，点击网络，然后下滑网页，点击xhr，找到json数据，可以看到大概有100条内容 里面有每一个视频的相关信息，我们只需要取出每一个视频的url即可...复制地址重新打开一个网页去验证一下，确认地址无误，那么就去源代码中看看，该地址是否存在吧 很明显，这个网站并不是静态的网站，而且数据应该存放在js文件中，那么我们怎么得到它呢~？...不要着急，偶然的情况下，发现了这个 有没有发现，在url中的关键字，是存在于网页源代码中的，虽然不是完全一样，但是我们可以和前面的那个标签中内容，对比下 可以判定，这里的值就是网页渲染后出现在html标签中的值...，而且在源代码中它存在2个不同格式的视频地址！...具体过程就不一一说明了，就直接看结果吧，先看目标网页 用关键字在源代码中查找 最终代码 验证结果 上述文章如有错误欢迎在留言区指出，如果这篇文章对你有用，点个赞，转个发如何？
使用 快捷键改写 面向窗口 关闭/退出 ctrl + q 最小化 alt + m 最大化 通过鼠标手势软件进行实现 面向多标签应用程序 切换到上个标签 ctrl + shift + tab 切换到下个标签...ctrl + tab 新建标签 ctrl + alt + shfit + t 必要时重新定义了快捷键，同时也为了和其他场景快捷键不冲突，只能如此 关闭标签 ctrl + w 正常情况下统一为 alt...ctrl + tab 切换到上/下个标签 （支持 idea 64 位） ctrl + w 关闭标签/窗口（支持 vscode、 idea 64 位、QQ、WindowsTerminal、Snipaste...防止了一些网站禁止在 HTML 密码框中进行粘贴操作 ctrl + shift + " 快捷操作-插入双引号 Ctrl + Alt + S 禁用脚本 Ctrl + Alt + R 重启脚本 7....zxg 打开西瓜视频 在任意界面中输入 zbd 打开百度首页 输入 zbi 打开 b 站 9.
然后我们获取传入的参数，拼接成url的query，作为script标签的src参数，最后在body中插入标签。 ...，也就是在把带拼接后的url的script标签插入到body中的时候，就会返回这个函数执行的字符串。...1）通过a标签获取window.opener window.opener会返回打开当前窗口的那个窗口的引用，例如：在 window A 中打开了 window B，B.opener 返回 A。...但是，其实在我写实验性的代码中遇到了很多问题，这些问题很重要，我简单总结下：a标签打开另外一个窗口时，必须携带rel="opener"才可以让被打开的页面通过window.opener获取到父页面的应用...通过a标签来打开新窗口的时候，实际上，是在B页面（被打开的页面）率先发起的，在A页面（打开的页面）接收到消息后才能把数据传回去。所以我就想，为什么不能在打开的时候就获取到呢？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
