刚刚前端iframe传递数据（不久前iframe传递cookie）

关于无界微前端框架

1、无界微前端框架通过将子应用的JS注入主应用同域的iframe中运行，实现子应用和主应用之间的解耦。iframe在这里充当了一个window沙箱，内部拥有完整的history和location接口，子应用的JS实例运行于iframe之中。样式隔离：无界使用Web Components技术定义一个自定义元素，将子应用的DOM渲染在自定义元素内部，实现样式隔离。

2、无界微前端是一种旨在优化当前微前端方案并实现更灵活、高效的前端协作与升级维护的技术框架。以下是关于无界微前端的详细解核心特点：沙箱隔离：无界微前端框架通过 iframe 和 webcomponent 建立 js 沙箱与 css 沙箱，旨在解决 iframe 的缺点，同时继承其优点。

3、全面解决问题 基于iframe和webcomponent容器：该方案有效地解决了适配成本、样式隔离和运行性能等微前端领域的核心问题。 低成本适配 主应用易于使用：主应用无需进行大量改动，即可轻松集成无界方案。 子应用适配灵活：子应用只需少量适配即可在无界框架内运行，适配模式多样，降低了集成门槛。

4、将微前端推向极致：无界方案解析 在微前端领域，尽管已有成熟的方案如qiankun、micro-app和EMP，但它们在核心用户需求如适配成本、样式隔离、性能优化等方面仍存在局限。腾讯前端工程师damyxu提出了一种全新的基于iframe的无界方案，它针对这些问题提供了完善的解决方案。

5、Iframe技术优点包括同域共享内存通信，缺点在于通信困难、DOM割裂严重以及路由状态丢失。无界微前端框架通过引入webcomponent和优化iframe机制，解决这些问题。首次和切换白屏问题通过提前实例化wujie实例和保留shadowRoot与iframe，实现加速与低成本。内存开销增加，但通过保活模式降低。

怎么实现form表单提交后不重新刷新当前页面

1、在处理表单提交时，常常遇到希望保持当前页面不变，即不刷新当前页面的需求。这可以通过使用iframe实现。具体步骤如下：首先，需要在HTML文件中添加一个隐藏的iframe，用于处理表单提交。

2、使用JavaScript来阻止表单自动刷新。在form标签中添加target=_blank属性，让表单提交到一个新的窗口或标签页中，以避免当前页面的刷新。

3、原因：onsubmit是form标签的一个事件属性，当表单提交时触发。通过在该属性中返回false，可以阻止表单的默认提交行为，从而避免页面刷新。操作方法：在form标签中添加onsubmit=return false属性。例如，将form修改为form onsubmit=return false。

4、最常用的方法就是利用token。即：在生成页面的时候生成一个token（随机字符串），并把它同时写入表单的某个hidden中，和服务端的session中。客户端提交表单到服务器时，比对表单中的token与session中的token是否一致。若不一致则认为是无效的请求。

前端iframe嵌入能使用不同框架吗

1、前端iframe嵌入可以使用不同框架。iframe嵌套技术允许开发者在现有框架内创建独立的子框架，每个子框架均可加载不同的文档或应用，且这些子框架可由不同技术栈（如Vue、React、Angular等）编写。以下从技术原理、实现方式及核心优势三方面展开说明：技术原理：物理隔离与独立运行iframe的核心特性是物理级别的隔离。

2、同源策略：浏览器出于安全考虑，默认禁止不同源的网页之间进行交互。同源指的是协议、域名和端口都相同。跨域问题表现：当尝试在iframe中嵌入另一个域名的网页时，可能会遇到无法读取cookie、localStorage、indexDB，DOM无法获取，以及ajax请求无法发送等问题。

3、一个网站用iframe，嵌入另一个网站vue的url能嵌入的。建议使用微前端嵌套，或者将需要嵌套的页面打包好后再嵌套。因为是两个vue项目，现在菜单系统的vue项目使用iframe来嵌入另一内容vue项目。登录得到的token不能共享。解决思路：使用postMessage把菜单项目的token传递给内容vue项目。

4、当加载不同的ERP表单时，通过JavaScript或后端代码更新这个元素的内容，确保它显示当前加载的表单名称。关闭ERP表单：关闭iframe中的ERP表单可以通过将iframe的src属性设置为空字符串（）或about：blank来实现，从而清空iframe的内容。

5、使用qiankun框架，你可以做到以下几点：多种技术框架共存：在同一个页面中使用多种技术框架（React， Vue， AngularJS， Angular， Ember等任意技术框架），并且不需要刷新页面。无需重构现有代码：现有项目中的代码无需重构，即可实现微前端集成。

html5不支持iframe

1、这种说法是错误的，HTML5支持iframe。iframe是一种内嵌框架，允许在一个网页中嵌入另一个网页，HTML5仍然保留了对iframe的支持。不过，出于安全考虑，浏览器限制了在iframe中加载外部URL的能力，这是为了防止恶意网站通过iframe进行点击劫持、钓鱼攻击等安全威胁。

2、iframe跨域获取子页连接在大多数情况下是不被支持的，但可以通过以下方法进行尝试：使用HTML5 postMessage：方法描述：postMessage是HTML5中引入的一个API，允许不同源的页面之间进行安全的通信。

3、HTML中的iframe可以通过Ajax技术、HTML5新特性、JavaScript库或框架、服务器端技术、Web组件、跨域通信技术以及CSS布局和样式等多种方案进行替代。Ajax技术：Ajax允许网页通过JavaScript异步加载和显示内容，无需重新加载整个页面，提高了性能和用户体验。

4、多框架的页面会增加服务器的http请求；由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃，目前的html5已不再支持此标签 iframe的缺点：在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。

常见的前端安全问题及对策

1、常见的前端安全问题及对策如下： 跨站脚本攻击 问题：攻击者通过在网页中注入恶意脚本，当用户浏览该页时，脚本会被执行，从而盗取用户信息或进行其他恶意操作。 对策： 输入验证：对用户输入进行严格验证和过滤，防止恶意脚本注入。 输出编码：在输出到网页前，对特殊字符进行编码，确保它们不会被当作脚本执行。

2、对策：如果对方对一些基本问题（如薪资范围、工作内容、团队结构）不愿意正面这可能意味着岗位存在高流动性、薪资不透明或内部问题。此时，应谨慎考虑是否继续应聘。 过度强调“抗压能力”或“公司文化”表现：面试官不断强调“抗压能力”，甚至暗示加班文化。

3、场景3：订单删除攻击黑客删除订单导致对账异常，商户结算金额与上游通道不符。对策：建立订单不可删机制，或保留删除记录供审计。总结：支付渠道安全需构建“技术防护+流程管控+专业支持”的三层体系。

4、缺乏人性化设计 室外部分：传统的燃气管道设计往往忽视了与社区整体环境的协调性，如调压箱、计量表等设备的安装位置显眼，影响美观。室内部分：燃气表及管道走线在室内设计中显得突兀，与家居装潢不协调，降低了用户的居住体验。

解决跨域问题后端请求头设置?

如何设置请求ajax发送跨域请求头在前端ajax请求时，我们在header中设置了自定义的头部信息，将token写入了头部，便于后端进行身份认证，如：xhr.setRequestHeader（Authorization，access_token）。通过了ajax全局方法做了统一处理。

设置值：将InsecurePrivateNetworkRequestsAllowed的值设置为1。这一步骤旨在允许不安全的私有网络请求，从而可能解决某些跨域问题。但请注意，这可能会降低浏览器的安全性，因此需谨慎使用。后端配置调整 检查CORS策略：跨域资源共享（CORS）策略是浏览器实现同源策略的一种机制。

后端服务器可以设置HTTP头部信息，告知浏览器哪些请求是被允许的。JSONP（JSON with Padding）：这种方法只支持GET请求。通过在URL中传递回调函数名，服务器返回数据时会将数据作为回调函数的参数，从而绕过跨域限制。代理服务器：将跨域请求转发到代理服务器。