基于局域网IP网段隐藏内网页面元素的JavaScript实现问询

完全可以实现这个需求！在多VLAN/子网的内网场景下，通过JavaScript识别访客所在网段并控制页面元素显示，是很常见的内网站点个性化手段。下面我会一步步拆解具体实现方法：

一、核心思路 #

1. 获取访客内网IP：前端通过WebRTC API获取本地内网IP（内网环境下这个方法很可靠，大部分主流浏览器都支持）
2. 判断IP所属网段：将IP和子网掩码转换为整数，通过按位与运算计算网络地址，对比目标网段
3. 控制元素显示/隐藏：根据网段判断结果，修改页面元素的display属性或添加/移除CSS类

二、具体代码实现 #

1. 获取内网IP的函数 #

这个函数利用WebRTC的RTCPeerConnection特性来抓取本地内网IP：

function getLocalIP(callback) {
    const pc = new RTCPeerConnection({ iceServers: [] });
    const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
    let detectedIp = null;

    pc.createDataChannel('');
    pc.createOffer().then(offer => pc.setLocalDescription(offer));
    
    pc.onicecandidate = (event) => {
        if (!event.candidate) {
            pc.close();
            callback(detectedIp);
            return;
        }
        const ipMatch = event.candidate.candidate.match(ipRegex);
        if (ipMatch && ipMatch[1] && !detectedIp) {
            detectedIp = ipMatch[1];
        }
    };
}

2. 网段判断工具函数 #

把IP字符串转换为32位整数，方便和子网掩码做按位运算，精准匹配网段：

// 将IP字符串转为32位整数
function ipToInt(ipStr) {
    return ipStr.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0) >>> 0;
}

// 判断当前IP是否在目标网段内
function isInTargetSubnet(currentIp, targetSubnet, subnetMask) {
    const currentIpInt = ipToInt(currentIp);
    const subnetInt = ipToInt(targetSubnet);
    const maskInt = ipToInt(subnetMask);
    return (currentIpInt & maskInt) === (subnetInt & maskInt);
}

3. 页面元素控制逻辑 #

假设你有两个菜单元素：#vlan1-exclusive-menu（仅对192.168.1.0/24网段显示）和#vlan2-exclusive-menu（仅对192.168.2.0/24网段显示），可以这样写：

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', () => {
    getLocalIP((localIp) => {
        if (!localIp) {
            // 无法获取IP时的降级处理，比如隐藏所有网段专属元素
            document.getElementById('vlan1-exclusive-menu').style.display = 'none';
            document.getElementById('vlan2-exclusive-menu').style.display = 'none';
            return;
        }

        // 匹配192.168.1.0/24网段
        const isInVlan1 = isInTargetSubnet(localIp, '192.168.1.0', '255.255.255.0');
        // 匹配192.168.2.0/24网段
        const isInVlan2 = isInTargetSubnet(localIp, '192.168.2.0', '255.255.255.0');

        // 控制VLAN1专属菜单显示
        document.getElementById('vlan1-exclusive-menu').style.display = isInVlan1 ? 'block' : 'none';
        // 控制VLAN2专属菜单显示
        document.getElementById('vlan2-exclusive-menu').style.display = isInVlan2 ? 'block' : 'none';
    });
});

三、关键注意事项 #

• WebRTC兼容性：Chrome、Firefox、Edge等现代浏览器都支持WebRTC，但如果需要兼容老旧浏览器，建议结合后端方案——服务器通过请求头（如Remote-Addr）获取访客IP，再通过模板引擎直接渲染对应网段的元素，或者给元素标记专属类名由前端控制样式
• 隐私限制：部分浏览器在非HTTPS环境下可能限制WebRTC获取IP，但内网站点一般使用HTTP，这个限制通常不会生效
• 可靠性补充：前端JS方案可能被用户禁用，若需要更严谨的控制，优先考虑后端识别网段后返回差异化内容，前端仅做样式配合

内容的提问来源于stack exchange，提问作者user3294740