• 正则表达式验证和跨域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>

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

  • 相关阅读:
    uniapp解决h5跨域问题
    uniapp地图围栏代码
    解决DCNv2不能使用高版本pytorch编译的问题
    数据库使用psql及jdbc进行远程连接，不定时自动断开的解决办法
    RocketMq消费原理及源码解析
    Elasticsearch插件：elasticsearch-sql安装和使用
    Xilinx FPGA 超温关机保护
    Mybatis逆向工程 MyBatis Generator 收集
    关联规则代码实现
    以脚本形式运行python库
  • 原文地址：https://blog.csdn.net/Fran_klin__/article/details/133497404