经过我们团队的调研，我们选择了无界作为微前端的技术栈。目前的使用效果非常好，不仅性能表现出色，而且使用体验也不错。
点击劫持中间件和装饰器提供了简捷易用的，对点击劫持的保护。这种攻击在恶意站点诱导用户点击另一个站点的被覆盖元素时出现，另一个站点已经加载到了隐藏的frame或iframe中。
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。
做 Web 开发经常需要面对跨域问题，跨域问题的根源是浏览器安全中的同源策略，比如说，对于 http://www.a.com/1.html 来说：
平时经常会逛 Github，除了一些 star 极高的大项目外，还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣，或是有不错的技术点，读起来都让人有所收获。所以准备汇总成一个「漫游Github」系列，不定期分享与解读在 Github 上偶遇的有趣项目。本系列重在原理性讲解，而不会深扣源码细节。
clickjacking攻击又称作点击劫持攻击。是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。
具体描述参考 https://xsleaks.dev/docs/attacks/experiments/scroll-to-text-fragment/
rebindMultiA是一款功能强大的多重A记录重绑定攻击测试工具，该工具可以帮助广大研究人员通过针对目标域名执行多重A记录重绑定攻击，来测试目标域名或地址的安全情况。
作者：damyxu，腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 背景 前端开发中我们对iframe已经非常熟悉了，那么iframe的作用是什么？可以归纳如下： 在一个web应用中可以独立的运行另一个web应用 这个概念已经和微前端不谋而合，相对于目前配置复杂、高适配成本的微前端方案来说，采用iframe方案具有
上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。
油猴脚本是在沙盒里执行用户脚本，不会对网页注入script元素，它通过沙盒向网页中传递信息以达到控制dom的操作。所以如果要对脚本进行检测，没有像上面代码这样子向页面中植入iframe的话，通过去检测dom和window是无法检测出使用油猴脚本的。
你好，我已经很久没有分享我最近的研究/发现了，但在这篇报道中，我将分享我发现的一个漏洞，这对我来说相当有趣，可能会改变你对 "SELF XSS "的看法。
一、浏览器的同源策略 1.什么是同源？ 所谓“同源”指的是”三个相同“。相同的域名、端口和协议，这三个相同的话就视为同一个域，本域下的JS脚本只能读写本域下的数据资源，无法访问其它域的资源。 协议相同 域名相同 端口相同（如果没有写端口，默认是80端口） 2.什么是同源策略？ 同源策略是浏览器为了保护用户的个人信息以及企业数据的安全而设置的一种策略，不同源的客户端脚本是不能在对方未允许的情况下访问或索取对方的数据信息； 3.同源策略的目的 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号”.”来分隔，最后一个”.”的右边部分称为顶级域名（TLD，也称为一级域名），最后一个”.”的左边部分称为二级域名（SLD），二级域名的左边部分称为三级域名，以此类推，每一级的域名控制它下一级域名的分配。定义是这样的，在域名中包含两个点的，就叫二级域名，只包含一个点的，就是一级域名。
项目被发布到npm上后，引起了激烈的讨论，最终因为安全问题被npm官方移除，代码也闭源了
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优
# 使用业务组件（npm 模块）的问题 无法独立发布（业务组件更新后，需要重新构建一次） 通过 <AsyncApp /> 异步加载 UMD bundle 允许独立发布（业务组件的更新后，不需要重新构建一次） # 页面组件 每个页面也可以是一个具体业务领域下的组件（粒度比较大的组件） # 其他细节 具体如何加载子 APP （包含隔离方案 -> *技术无关？） Shadow DOM -> 隔离 CSS 前端基础设施 如何发布子 APP 如何监控子 APP # 隔离的级别 Iframe
前言 关于非input文件上传，点上传按钮后，这个弹出的windows的控件了，已经跳出三界之外了，不属于selenium的管辖范围（selenium不是万能的，只能操作web上元素）。autoit工
Tech 导读 本文由浅到深地对微前端进行了概括性介绍，读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能，以及微前端的适用场景。读者可以多关注下本文提到的各个开源的优秀的微前端实现方案，通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么 传统的分而治之的策略已经无法应对现代 Web 应用的复杂性，因此衍生出了微前端这样一种新的架构模式，与后端微服务相同，它同样是延续了分而治之的设计模式，不过却以全新的方法来实现。微前端是一种由独立交付的多个前
如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性，则window对象会赋予一个属性，其名字为id属性的值，其值指向该元素
例如同一个域名 CDN 服务器上的 a.js，b.js，c.js 就可以按如下方式在一个请求中下载：
其实第一个版本已经很好了，不知足，后来自己又做了兼容markdown的，结果用来用去，发现不是自己想要的
specs 可选。一个逗号分隔的项目列表。支持以下值： channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 height=pixels 窗口的高度。最小.值为100 left=pixels 该窗口的左侧位置 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes top=pixels 窗口顶部的位置.仅限IE浏览器 width=pixels 窗口的宽度.最小.值为100 replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
URL 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
博主也是vuejs萌新，公司仅我一个前端，收到做h5的需求后，马上想到要用下vuejs，于是说服领导，开始慢慢钻研，现在记录一下踩到的坑。这些坑主要是在一些组件的使用上，其它的只要好好看官方文档就好了，vue，vue-router, vuex的文档相当重要。
drawio是一款非常强大的开源在线的流程图编辑器，支持绘制各种形式的图表，提供了Web端与客户端支持，同时也支持多种资源类型的导出。
作为面试官，我经常听到很多候选人说在公司做的项目很简单，平常就是堆页面，写管理端，写H5,没有任何亮点，我以我一次面试候选人的经历分享给大家
最近在项目中进行 WordPress 后台开发的时候，需要制作弹出层，经过一轮测试，发现还是 WordPress 原生已支持的 ThickBox 比较方便。
看到这个题目，好多的then，实际上只需要记住一个原则：.then 或.catch 的参数期望是函数，传入非函数则会发生值透传。
多媒体和嵌入内容 HTML5中的音频和视频标签的使用 嵌入内容的应用，如地图、嵌入网页等
iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架）
大家好，今天和大家讨论的是 CSP ，即内容安全策略。相信很多朋友在渗透测试的过程中已经了解过 CSP 了
在之前的文章中，我们已经深入剖析了微前端究竟是什么，可以带来什么收益，现在让我们复习一下微前端的概念：
Beef-XSS框架无疑是当今最强大的浏览器攻击框架，网络上也存在很多关于它的教程，但是大部分都是基于内网环境下的教学，这就使得攻击效果大打折扣，另外大部分XSS教程只是实现一个aler(1)便证明达到了效果，而Beef-XSS要保证完整效果就要加载hook.js文件，在存在一定过滤的情况下，这是有一定难度的。于是便有了今天的文章，希望对大家有所帮助。
大家好，今天和大家讨论的是 Web 嵌入，无论是网站还是应用程序，在部分场景下我们需要嵌入一些第三方的 web 内容，例如我写了篇技术文章，其中部分包含视频内容，我上传到 B 站上了，我想把这段内容嵌入到我的技术文章中，就可能要使用 web 嵌入技术
方法测试：openApp('ios页面','**.apk','metools://home');
大家好，又见面了，我是你们的朋友全栈君。 网页挂马 将木马程序上传到网站，使用木马生成器生成一个网马，放到网页空间，在添加代码使木马在网页打开时运行 1.常见的几种方式 将木马伪装成页面元素，木马被浏览器自动加载到本地 利用脚本运行的漏洞下载木马 利用脚本运行的漏洞释放隐含在网页脚本中的木马 将木马伪装成缺失的组件。或和缺失的组件绑在一起（flash播放插件等） 通过脚本运行调用某些com组件，利用其漏洞下载木马 在渲染页面内容的过程中利用格式溢出释放木马（ani格式溢出漏洞等） 在渲染页面内容的过程
最近面试问的挺多的一个问题，就是JavaScript的跨域问题。在这里，对跨域的一些方法做个总结。由于浏览器的同源策略，不同域名、不同端口、不同协议都会构成跨域；但在实际的业务中，很多场景需要进行跨域传递信息，这样就催生出多种跨域方法。
劫持与注入，怎么有种涩涩的感觉。确实，好多时候被攻击都是跟好色有关。当然，好色并不是罪，但即便好色也得注意上网环境的安全。
<iframe> 标签（又称内联框架元素）表示了一个嵌套的浏览上下文(browsing context)，实际上是用来在当前页面中内嵌另一个HTML页面。
img标签的src为空或者加载失败，浏览器都会自动加上一个边框，一定程度上影响美观。
首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
