正则验证用户名和跨域postmessage

KylinZhang_0817

已于 2023-10-13 15:19:24 修改

阅读量93

点赞数

文章标签：服务器运维

于 2023-10-13 15:18:58 首次发布

本文链接：https://blog.csdn.net/KylinZhang_0817/article/details/133811034

版权

用户名正则表达式：在Web应用程序中，用户名通常用于标识用户并进行身份认证。但是，为了确保用户名的安全性和格式的一致性，我们可能需要使用正则表达式进行验证。

<!DOCTYPE html>
<html>
<head>
    <title>ID验证</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 30px;
        }
    </style>
</head>
<body>
    <h1>ID验证</h1>
    <p>请提供ID以验证：</p>
    <input type="text" id="username" placeholder="输入ID">
    <button onclick="validateUsername()">验证ID</button>
    <p id="result"></p>
    <script>
        function validateUsername() {
            const usernameRegex = /^[a-zA-Z0-9_]{4,30}$/;
            const usernameInput = document.getElementById("username");
            const resultMessage = document.getElementById("result");
            const username = usernameInput.value;
            if (usernameRegex.test(username)) {
                resultMessage.textContent = "ID有效。";
                resultMessage.style.color = "green";
            } else {
                resultMessage.textContent = "ID无效。ID必须由字母、数字和下划线组成，长度在4到30个字符之间。";
                resultMessage.style.color = "red";
            }
        }
    </script>
</body>
</html>

跨域postmessage：在前端开发中，跨域是一个常见的问题，由于同源策略的限制，浏览器不允许在不同源的页面之间直接进行通信。解决跨域问题有多种方式，其中一种常用的方式是使用postMessage。 postMessage是HTML5引入的一种跨文档通信的机制，可以在不同的窗口或框架之间传递数据，即使这些窗口或框架不属于同一个源。

<!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>
<body>
    <div>
        <h1>2023.security.pw</h1>
    </div>
</body>
<script>
    window.addEventListener('message', (event) => {
        if (event.origin === 'http://2023.oupeng.pw') {
            const cookieData = event.data;
            console.log('Receive message from parent:', cookieData);
            window.parent.postMessage('child message', '*');
        }
    })
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2024</title>
</head>
<body>
    <div>
        <h1>2024.security.pw</h1>
    </div>
</body>
<script>
    window.addEventListener('message', (event) => {
        if (event.origin === 'http://2024.oupeng.pw') {
            const cookieData = event.data;
            console.log('Receive message from parent:', cookieData);
            window.parent.postMessage('child message', '*');
        }
    })
</script>
</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://2023.security.pw/" frameborder="0"></iframe>
</body>
<script>
    window.onload = function() {
        document.cookie = 'sessionid=oupeng'
        const cookieData = document.cookie
        window.frames[0].postMessage(cookieData, 'http://2023.security.pw/');
    }
    window.addEventListener('message', (event) => {
        if(event.origin === 'http://2023.security.pw')
        console.log('Received message from child:', event.data);
    })
</script>
</html>