• 正则表达式验证和跨域postmessage

    1.用正则表达式验证用户名

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <form>
    10.         <input type="text" id="username" name="username" pattern="[A-Za-z0-9_-]{6,16}" required>
    11.         <input type="submit" value="提交">
    12.         <div class="error-message">用户名必须由6到16个字符的字母、数字组成。div>
    13.       form>
    14. body>
    15. html>

    解释该正则：

    • [a-zA-Z0-9_-]：匹配任意字母、数字、下划线或破折号。
    • {3,16}：限制用户名的长度在6到16个字符之间。

    2.跨域postmessage 

    需要用到两个虚拟主机

    子页面：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>2023title>
    8. head>
    9. <body>
    10.     <div>
    11.         <h1>2024.security.pwh1>
    12.     div>
    13. body>
    14. <script>
    15.     window.addEventListener('message', (event) => {
    16.         if (event.origin === 'http://2024.oupeng.pw') {
    17.             const cookieData = event.data;
    18.             //处理cookieData
    19.             console.log('Receive message from parent:', cookieData);
    20.             window.parent.postMessage('child message', '*');
    21.         }
    22.     })
    23. script>
    24.  
    25. html>

    父页面：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>iframetitle>
    7. head>
    8. <body>
    9.     <iframe id="myIframe" src="http://2024.security.pw/" frameborder="0">iframe>
    10. body>
    11. <script>
    12.     window.onload = function() {
    13.         document.cookie = 'sessionid=oupeng'
    14.         const cookieData = document.cookie
    15.         window.frames[0].postMessage(cookieData, 'http://2024.security.pw/');
    16.     }
    17.     //添加一个监听事件处理子页面的返回消息
    18.     window.addEventListener('message', (event) => {
    19.         if(event.origin === 'http://2024.security.pw')
    20.         console.log('Received message from child:', event.data);
    21.     })
    22. script>
    23. html>

    验证：在子页面里接受到返回值和发送消息到子页面，实现跨域

  • 相关阅读:
    艾美捷Abnova NEUROD6单克隆抗体(M17)说明书
    .bat批处理命令处理文件
    谷粒商城 高级篇 (二十四) --------- 秒杀业务
    PLGA纳米粒负载环丙沙星Ciprofloxacin-PLGA|甲硝唑修饰PLGA纳米粒PLGA-Metronidazole
    浅析Redis基础数据结构
    Git子模块使用说明
    秋招，网申测评，认知能力测试
    滚雪球学Java(42)：探索对象的奥秘：解析Java中的Object类
    001计算机网络基础习题+答案+解析
    MySQL表的增删改查初阶(上篇）
  • 原文地址：https://blog.csdn.net/Fran_klin__/article/details/133497404