用正则表达式验证用户名和跨域postmessage

news2024/10/6 0:37:25

正则验证用户名 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" pattern="[A-Za-z0-9]+" required title="用户名只能包含字母和数字">
        <input type="submit" value="提交">
      </form>
</body>
</html>

 跨域postmessage 

#index.html
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023</title>
</head>
    <div>
        <h1>www.test1.com</h1>
    </div>
</body>
<script>
    window.addEventListener('message', (event) => {
        if (event.origin === 'http://www.class2.cn') {
            const cookieData = event.data;
            //处理cookieData
            console.log('Receive message from parent:', cookieData);
            window.parent.postMessage('child message', '*');
        }
    })
</script>
 
</html>
 
#web.php
<?php 
$pets = $_POST['pet-select'];
echo $pets;?>
##----------------------------class04----------------------------------------------------
#child.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child</title>
</head>
<body>
    <h1>child-html</h1>
</body>
<script>
    console.log(document.cookie);
    alert(1);
</script>
</html>
 
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
</head>
<body>
    <iframe id="myIframe" src="http://www.test1.com/" frameborder="0"></iframe>
</body>
<script>
    window.onload = function() {
        document.cookie = 'sessionid=class2'
        const cookieData = document.cookie
        window.frames[0].postMessage(cookieData, 'http://www.test1.com/');
    }
    //添加一个监听事件处理子页面的返回消息
    window.addEventListener('message', (event) => {
        if(event.origin === 'http://www.test1.com')
        console.log('Received message from child:', event.data);
    })
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1069437.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

redis命令学习

redis命令学习 redis的类型分为&#xff1a; string类型hash类型list类型set类型sortedset类型 string类型命令 set key value 设置值&#xff0c;key是键 value是值get key 根据键获取值setex key second value 设置值有效时间 second 是时间setnx key value 只有key不存在…

JSP旅游平台管理

本系统采用基于JAVA语言实现、架构模式选择B/S架构&#xff0c;Tomcat7.0及以上作为运行服务器支持&#xff0c;基于JAVA、JSP等主要技术和框架设计&#xff0c;idea作为开发环境&#xff0c;数据库采用MYSQL5.7以上。 开发环境&#xff1a; JDK版本&#xff1a;JDK1.8 服务器&…

【19】c++设计模式——>桥接模式

桥接模式的定义 C的桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它将抽象部分与实现部分分离&#xff0c;使得它们可以独立地变化。桥接模式的核心思想是利用组合关系代替继承关系&#xff0c;将系统划分成多个独立的、功能不同的类层次结…

Spring实例化源码解析之Custom Events下集(九)

上集从官网的角度讲解了基本的使用和源码的内容&#xff0c;没有深入的进行分析&#xff0c;本章将从源码的角度分析ApplicationEvent、ApplicationListener、ApplicationEventMulticaster这三者之间的关系。 initApplicationEventMulticaster 上一章后续部分给出了源码的含义…

数据驱动智能护理:看AI如何塑造医疗领域,为灰暗夕阳带来新的曙光

近年来&#xff0c;人工智能的应用正日益渗透到医疗领域&#xff0c;呈现出无限的潜力和前景。技术的不断进步和全球医疗挑战的不断涌现&#xff0c;使得AI成为改善医疗保健质量、提高患者生活水平的强大工具。从疾病的早期诊断到治疗计划的制定&#xff0c;再到医疗管理和患者…

IP 子网划分(VLSM)

目录 一、 为什么要划分子网 二、如何划分子网 1、划分两个子网 2、划分多个子网 一、 为什么要划分子网 假设有一个B类IP地址172.16.0.0&#xff0c;B类IP的默认子网掩码是 255.255.0.0&#xff0c;那么该网段内IP的变化范围为 172.16.0.0 ~ 172.16.255.255&#xff0c;即…

IDEA的database工具以及对比两个数据库之间的差异(比DBVisualizer和DBeaver方便)

背景 其实IDEA里有个非常好用的database工具&#xff0c;用来连数据库&#xff0c;能连的数据非常多&#xff0c;最重要的是还带有对比数据库差异的工具。 唯一有点不好就是这个是 intellij idea的ultimate edition版本才有&#xff0c;对于社区版本&#xff08;community ed…

Tomcat自启动另一种方法

Tomcat自启动另一种方法 问题&#xff1a; 不知道怎么回事&#xff0c;好几台电脑都可以开机自启动tomcat&#xff0c;正常运行项目。一样的配置一样的操作流程&#xff0c;偏偏要运行的机器开机自启动后&#xff0c;项目不能运行&#xff0c;手动重启tomcat又可以用了。网上…

【案例分享】企业常用IPSec VPN实现

【微|信|公|众|号&#xff1a;厦门微思网络】 【微思网络www.xmws.cn&#xff0c;成立于2002年&#xff0c;专业培训21年&#xff0c;思科、华为、红帽、ORACLE、VMware等厂商认证及考试&#xff0c;以及其他认证PMP、CISP、ITIL等】 组网需求 如图1所示&#xff0c;RouterA为…

图像处理与计算机视觉--第五章-图像分割-自适应阈值分割

文章目录 1.自适应阈值分割介绍2.自适应阈值函数参数解析3.高斯概率函数介绍4.自适应阈值分割核心代码5.自适应阈值分割效果展示6.参考文章及致谢 1.自适应阈值分割介绍 在图片处理过程中&#xff0c;针对铺前进行二值化等操作的时候&#xff0c;我们希望能够将图片相应区域内所…

数字IC前端学习笔记:数字乘法器的优化设计(Wallace Tree乘法器)

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 进位保留乘法器依旧保留着阵列的排列规则&#xff0c;只是进位是沿斜下角&#xff0c;如果能使用树形结构来规划这些进位保留加法器&#xff0c;就能获得更短的关键…

ToBeWritten之让响应团队参与并做好沟通

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…

网页动画科普LLM原理;淘宝推出AI试衣间;爆火的AI极简人像;100天创业日程表;Llama 2详解 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f525; Meta Connect 2023&#xff0c;发布基于 LLama 2 的AI聊天助手和虚拟角色 9月27日-28日&#xff0c;Meta 举办了年度重要会议 Meta Co…

vue3 + vite项目使用SVG图标

我们在开发一个项目时常会用到一些图标&#xff0c;有些图标在有限的图标库中却是没有&#xff0c;因此少数的图标需要我们去网上查找&#xff0c;或是自定义一些专用的图标。一般很少有图标库满足现实的项目开发&#xff0c;这时将推荐使用 iconify 这个图标库&#xff0c;几乎…

Zabbix 监控系统安装和部署

Zabbix 监控系统安装和部署 一、zabbix 是什么&#xff1f;1.1、zabbix 监控原理&#xff08;重点&#xff09;1.2、Zabbix 6.0 新特性1.3、Zabbix 6.0 功能组件1.4、数据库1.5、Web 界面1.6、Zabbix Agent1.7、Zabbix Proxy1.8、Java Gateway 二、部署Zabbix 6.02.1、 解决 za…

通达信指标预警信号,自动发送给微信好友1.0

1.功能介绍&#xff1a;十一节假日期间写了一个&#xff0c;可将股票指标预警信号&#xff0c;自动发送给微信好友/微信群&#xff08;即电脑端的消息&#xff0c;通过模拟微信操作可在手机上显示&#xff09;。本工具按通达信写的&#xff0c;如果大智慧&#xff0c;同花顺也能…

Flutter环境搭建及新建项目

一、下载安装压缩包 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.10.6-stable.zip 二、解压缩 解压之后&#xff0c;将里面的flutter整体拿出来 三、配置环境变量 将flutter/bin全路径配置到系统环境变量里面 四、运行…

12.2 实现键盘模拟按键

本节将向读者介绍如何使用键盘鼠标操控模拟技术&#xff0c;键盘鼠标操控模拟技术是一种非常实用的技术&#xff0c;可以自动化执行一些重复性的任务&#xff0c;提高工作效率&#xff0c;在Windows系统下&#xff0c;通过使用各种键盘鼠标控制函数实现动态捕捉和模拟特定功能的…

用vscode进行远程主机开发

文章目录 插件操作步骤FQA 插件 Remote - SSH - 通过使用 SSH 打开远程计算机或者VM上的文件夹&#xff0c;来连接到任何位置。 操作步骤 使用Vscode利用Remote进行远端开发必须现在Vscode内安装插件 安装完成后&#xff0c;底部工具栏会出现一个绿色按钮&#xff0c;如下…

Vue中如何进行图像处理与图像滤镜

在Vue中进行图像处理与图像滤镜 图像处理和滤镜效果是现代Web应用程序中常见的功能之一。Vue.js作为一个流行的JavaScript框架&#xff0c;为实现这些功能提供了许多工具和库。本文将介绍如何使用Vue来进行图像处理与图像滤镜&#xff0c;包括使用HTML5 Canvas和CSS滤镜。 准备…