首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端开发必备之Chrome开发者工具(上篇)

快速预览媒体查询 点击媒体查询条形,调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形,查看媒体查询 CSS 何处定义并跳到源代码的定义 元素面板(Elements)...例如,如果您的 JavaScript 正在更改 DOM 元素的样式,请将 DOM 断点设置为元素属性修改时触发。...即除了当前选定节点的事件侦听器外,还会显示其祖先实体的事件侦听器 启用 Framework listeners 复选框时查看框架侦听器,DevTools 会自动解析事件代码的框架或内容库封装部分,然后告诉您实际事件绑定代码的位置...控制台面板(Console) 开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell 页面上与 JavaScript 交互 消息堆叠 如果一条消息连续重复,而不是行上输出每一个消息实例...例如,如果您检查 的一个 元素,那么,DevTools Execution Context Selector 设置为该 的环境。

8.3K111

从XSSRCE(CVE-2023-23383)

我们的PPT,我们演示了如何通过滥用“指标”选项卡并在控制台中启用特定选项(“群集类型”切换) Azure Service Fabric Explorer 反射型 XSS 漏洞升级为未经身份验证的远程代码执行...Super FabriXss 则位于“事件”选项卡。步骤 2:观察节点名称更改    我们注意,当 Node 名称 UI 改时,它会反映在 Node 的独立仪表板。...单击“事件”选项卡向我们展示与我们在其他两个选项卡收到的完全相同的输出,但是“节点指标”呢?如果一个事件发生或由节点执行,那么名称如何展示(如果有的话)呢?   ...第 4 步: XSS 用于 RCE    发现 FabriXss 漏洞后,我意识如果 XSS 与其它漏洞组合,可能会获得更好的结果,这涉及嵌入一个 iframe,该 iframe 允许攻击者利用受害者的权限来执行所需的操作...此 URL 包含一个 iframe,该 iframe 使用简单的POST请求来触发 Compose 部署的升级,本例为 IIS 应用程序。

11410
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android浏览器跨域数据窃取和Intent Scheme攻击

    相比于普通Intend-Based攻击,这种方式极具隐蔽性,而且由于恶意代码隐藏WebPage,传统的特征匹配完全不起作用。...攻击实验背景介绍 我研究Stock浏览器的事务流程标准时发现,如果让浏览器打开选项卡并且使用file://协议,就可以通过网页打开本地文件。...,使得受害者的浏览器自行下载exploit.html 3.受害者浏览器会主动打开选项卡,浏览exploit.html 4.exploit.html读取本地敏感信息文件,反馈给黑客 为了给这次攻击构造一个有效的...浏览器会自行在选项卡打开刚刚下载的恶意文件exploit.html,然后从其他本地文件里读取内容。实际上,这个攻击过程并不如我讲的这么轻松愉快。...,发现收效甚好,POC如下: Read iframe <button onclick="window.open('\u0000<em>javascript</em>

    1.5K60

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 创建了的 React 应用程序后,让我们命令行 cd 该项目的目录: cd web-code-editor...创建按钮组件 接下来,我们创建一个通用的按钮组件,用于选项卡 src 文件夹创建一个名为 components 的文件夹。...使用 useState 钩子,我们将该 state 存储单击该选项卡按钮时当前打开的编辑器选项卡的名称。...让我们继续编写函数,该函数将使用 setOpenedEditor 来更改单击选项卡按钮时的 state 值。 注意:这里可能不会同时打开两个选项卡,所以我们在编写函数时需要考虑这一点。...MDN: HTML 内联框架元素 () 表示嵌套的浏览上下文,另一个 HTML 页面嵌入当前页面

    12K30

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 创建了的 React 应用程序后,让我们命令行 cd 该项目的目录: cd web-code-editor...创建按钮组件 接下来,我们创建一个通用的按钮组件,用于选项卡 src 文件夹创建一个名为 components 的文件夹。...使用 useState 钩子,我们将该 state 存储单击该选项卡按钮时当前打开的编辑器选项卡的名称。...让我们继续编写函数,该函数将使用 setOpenedEditor 来更改单击选项卡按钮时的 state 值。 注意:这里可能不会同时打开两个选项卡,所以我们在编写函数时需要考虑这一点。...MDN: HTML 内联框架元素 () 表示嵌套的浏览上下文,另一个 HTML 页面嵌入当前页面

    72120

    ​从 JS 文件分析 XSS 的一种方法

    例如,如果站点 A 有指向站点 B 的超链接,将被点击——包含超链接的页面可以通过 window.opener 从新打开选项卡访问。...我们可以通过提供代码作为 URI( src 属性)使用元素轻松执行 Javascript 代码,通过使用特殊的 URI 模式/协议,javascript。...通过使用浏览器只会执行alert(1) Javascript 代码。...那么我们如何仍然可以开始时传递包含 javascript 模式的 URL 呢? 很高兴知道我们仍然可以 URL 的模式部分使用空白字符,浏览器忽略这些字符。...3.单击链接后 - 选项卡打开选项卡之间有 window.opener 连接) 4.单击链接后直接第一页重定向目标(onclick事件) 这就是 tumblr.com 页面的情况,该页面还包含易受攻击的

    33710

    深入理解浏览器原理

    2.1.4 运行流程 渲染进程共享:开启浏览器新窗口或选项卡时,创建的浏览器进程,并创建RenderView。不同页面/iframe可共享同个渲染进程。...2.2.1 Blink的运行流程 多进程架构,有一个浏览器进程和N个沙盒渲染器进程,Blink沙盒渲染运行。浏览器选项卡iframe可共享同个渲染器进程。...因此为每个跨网站iframe运行单独的渲染器进程。 站点隔离难点:从根本上改变iframe的通信方式,包括ctrl+F查找、打开devtools等需不同渲染器进程访问。【重大版本】。...2) 通过获取此信息,合成器线程可以确保该区域中发生事件时输入事件发送到运行JavaScript的主线程。如果输入事件来自该区域之外,则合成器线程不等待主线程的情况下继续合成帧。...passive: true 选项,提示浏览器主线程监听事件,合成器线程也可以继续合成帧。

    4.6K31

    每天都在用的浏览器,你知道它是如何工作的吗?

    2.1.4 运行流程 渲染进程共享:开启浏览器新窗口或选项卡时,创建的浏览器进程,并创建RenderView。不同页面/iframe可共享同个渲染进程。...2.2.1 Blink的运行流程 多进程架构,有一个浏览器进程和N个沙盒渲染器进程,Blink沙盒渲染运行。浏览器选项卡iframe可共享同个渲染器进程。...因此为每个跨网站iframe运行单独的渲染器进程。 站点隔离难点:从根本上改变iframe的通信方式,包括ctrl+F查找、打开devtools等需不同渲染器进程访问。【重大版本】。...2) 通过获取此信息,合成器线程可以确保该区域中发生事件时输入事件发送到运行JavaScript的主线程。如果输入事件来自该区域之外,则合成器线程不等待主线程的情况下继续合成帧。...passive: true 选项,提示浏览器主线程监听事件,合成器线程也可以继续合成帧。

    2.2K20

    如何绕过XSS防护

    事件方法插入javascript还将适用于任何使用Form,Iframe,Input,Embed等元素的HTML标记类型注入。...<iframe src=http://xss.rocks/scriptlet.html < 转义JavaScript转义: JavaScript输出一些用户信息,如:var a=“$...() (在对象设置为活动元素之前激发) onBeforeCopy() (攻击者选定内容复制剪贴板之前执行攻击字符串-攻击者可以使用execCommand(“Copy”)函数执行此操作) onBeforeCut...有些网站认为评论块的任何内容都是安全的,因此不需要删除,这就允许我们使用跨站点脚本。 或者系统可以某些东西周围添加注释标记,试图使其无害化。如我们所见,这可能不起作用. <!...+\s*|\s*)src/i“使用重音符(同样,Firefox不起作用).

    3.9K00

    现代浏览器探秘(part 1):架构

    我们介绍Chrome浏览器从高级架构渲染管道的具体细节。...本系列文章,我们将使用下图中描述的Chrome最新架构。 最重要的部分是浏览器进程怎样与程序的其他工作进程进行协调。 对于渲染器进程,创建多个进程并将其分配给每个选项卡。...最简单的情况下,你可以想象每个选项卡都有自己的渲染器进程。 假设你打开了3个选项卡,每个选项卡都由独立的渲染器进程运行。...我们一直讨论每个选项卡一个渲染进程的模型,它允许跨站iframe单个渲染器进程运行,并在不同站点之间共享内存空间。 同一个渲染进程运行a.com和b.com似乎没问题。...在下一篇文章,我们开始深入研究显示一个网站时,这些进程和线程之间究竟发生了什么事情。

    1K20

    小程序测试方案初探

    puppeteer Chrome 团队出品的一款友好的Headless Chrome Node API,用于代替用户页面上面点击、拖拽、输入等多种操作,常见的使用场景还是应用到UI自动化测试,...mocha JavaScript测试框架,浏览器和Node环境都可以使用,通过测试框架,可以为你的JavaScript代码添加相应的测试用例,使得项目代码更加强健。...await browser.close(); })(); 上面几行代码其实就是相当于我们日常的一些操作:打开chrome->新建选项卡->输入url并回车->页面截图->保存,也可以看出puppeteer...,所以这里需要获取页面所有的iframe const frames = await page.frames(); //根据iframe的name属性来获取正确的iframe...当然希望的是小程序官方能给出相应的单元测试方案吧。

    8.5K30

    JavaScript LocalStorage 完整指南

    JavaScript LocalStorage 完整指南 对于大多数 web 浏览器,web 存储 API 提供了浏览器存储键值对的机制。...3.4 标签间同步数据 使用 localStorage,用户可以浏览器选项卡打开一个计时器网站,启动计时器,然后打开同一网站的另一个选项卡两个选项卡之间同步计时器。...本例,一个项被添加到新窗口的 localStorage 值写入 localStorage 之后,窗口关闭。...一个是「持久性」:存储 localStorage 的数据会话持续存在。打开选项卡、访问域或关闭浏览器都不会清除 localStorage。...打开一个选项卡或访问一个清除特定域的会话。 另一个区别是,少数浏览器的情况下,localStorage 不能在隐身模式下工作,但 sessionStorage 可以。

    2.2K10

    自动化测试工具Selenium的基本使用方法

    baidu_input_tag=browser.find_element_by_id("kw") #寻找到百度页面的id='kw'的标签 key=baidu_input_tag.send_keys('张根') #标签输入...browser.find_element_by_id('draggable') #找到拖拽的源标签 target=browser.find_element_by_id('droppable')#找到拖拽的目标标签...release(on_element=None) ——某个元素位置松开鼠标左键 send_keys(*keys_to_send) ——发送某个键当前焦点的元素 send_keys_to_element...from selenium import webdriver browser=webdriver.Chrome() browser.execute_script('window.open()') #打开选项卡...(iframe) # 4.从frame中切回主文档(switch_to.default_content()) 切到frame之后,我们便不能继续操作主文档的元素,这时如果想操作主文档内容,则需切回主文档

    2.4K30

    Kali Linux Web渗透测试手册(第二版) - 5.5 - 利用BeEF执行xss攻击

    在这个小节,我们演示利用XSS漏洞和BeEF框架控制目标浏览器。...kali linux默认的BeEF的服务是不起作用的,所以不能以beef-xss这样简单的方式来启动BeEF。...实战演练 BeEF需要目标浏览器调用hook.js文件,它能让浏览器挂钩到我们的BeEF服务器,另外我们利用一个易受XSS攻击的应用程序,让目标用户调用它: 1....现在,BeEF面板,攻击者看到一个浏览器上线: 3. 如果我们浏览器查看Logs选项卡,我们可以看到BeEF存储了用户浏览器窗口中执行的操作的信息,比如输入和单击,如下图所示: 4....例如,模块目录Browser | Get Cookie,点击Execute来获取用户的Cookie: 原理剖析 在此小节,我们使用script标记的src属性来调用外部JavaScript文件

    3.2K10

    burp-2021-2破解版下载

    的漏洞定义:当目标应用程序导入具有已知漏洞的JavaScript依赖项时,易受攻击的JavaScript依赖项ciesburp Scanner现在检测到,例如,当一个图书馆已经过时或有其他危险时问题...非-打印字符改进在文本编辑器查看非打印字符时,十六进制代码点低于20的字符显示为带有十六进制代码的“菱形”。现在,代码点从7FFF的字符也会显示同一行中路。...每-平台身份验证的主机控件现在可以每个主机上打开或关闭平台身份验证(“用户选项”和“连接”选项卡下)基本信息检查器改进消息的性能有了显著的改进检查员。...现在激活.burp文件打开burp并加载该文件,而不是启动burp启动向导。 “删除字节”上下文菜单选项已恢复Burp解码器。 消息编辑器现在正确地用双引号突出显示文本。...此更改会影响“代理”和“目标选项卡的MIME类型筛选器,以及“响应查看器”的“渲染”选项卡。 严重性为假阳性的漏洞图标已从蓝色变为绿色。 使用截图 ?

    1.7K10

    利用特殊协议加载本地文件, 绕过 HTML5 沙箱, 打开弹窗诸事

    我印象,Chrome 有这样一个健康的习惯,在打开外部程序之前询问用户是否打开外部程序。但是这次的情况是它直接打开了相应程序,而且没有警告。...例如,如果我们想在 iframe 渲染内容并且确保它不运行 javascript (甚至不打开标签),我们只需要使用此标签: <iframe src=”sandboxed.html” sandbox...我继续注册表按下 F3 键,发现了 read: 协议,它引起了我的注意力,因为当阅读它的 (javascript)源码时,它可能有潜在的 UXSS 漏洞,但是尝试的过程 Edge 一次次地崩溃了。...例如, iframe 的 location 设置为 “read:” 就足以使浏览器崩溃,包括所有选项卡。想看看吗?...我们将使用 window.open 伴以 read: 协议继续玩耍,而不是一个 iframe ,因为它使用起来舒服。

    2.4K80

    如何使用谷歌浏览器 Chrome 更好地调试

    Google 的 Chrome DevTools 窗口迷你窗口中打开时会在顶部显示一些快速选项卡,以及一些额外的隐藏选项卡,可通过单击它们旁边的 >> 符号或切换到全屏视图来访问这些选项卡。...想象一下,你正试图在你的 chrome 控制台中预览或读取此返回的数据,以找出在你的应用程序不起作用的内容。该console.log()函数通常将其显示为难以阅读或分类的文本输出。...你可以 chrome 控制台中使用table()函数即 table(data) 来完成此操作。这种方法以人性化、更易于阅读和理解的表格格式打印和组织信息。...只需控制台中调用它并将函数的名称传递给它,它就会自动调试器注入函数,让你可以单步调试代码。...这可以节省你每个页面测试输入重复信息的时间。 Chrome 创建代码片段: 1.打开 DevTools 窗口并单击选项卡面板的“Sources”。

    3.6K30
    领券