如何从HTTP页面的HTTPS跨域iframe中访问navigator.userAgentData？

问题描述 #

我有一个通过HTTP协议访问的HTML页面，页面中嵌入了一个iframe，该iframe加载来自不同域名的HTTPS页面，且我同时控制着HTTP和HTTPS服务器。我希望从这个HTTPS iframe中访问navigator.userAgentData属性，请问该如何实现？

父页面（HTTP，abcxyz.local）代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to ABCXYZ</title>
</head>
<body>
    <h1>Welcome to abcxyz.local!</h1>
    <p>This is the homepage served by the Flask server.</p>

    <iframe src="https://server.local:443" width="1" height="1" style="border:none;"></iframe>
</body>
</html>

注：server.local部署的HTTPS页面中存在调用navigator.userAgentData的函数。

实现方案 #

由于跨域（HTTP父页面 + 不同域名的HTTPS iframe）及浏览器同源策略限制，需通过postMessage跨域通信配合CORS配置实现，具体步骤如下：

1. 配置HTTPS服务器（server.local）的CORS规则 #

需允许父域名abcxyz.local跨域访问，避免浏览器拦截请求：

• 如果是Nginx服务器，添加以下配置：

add_header Access-Control-Allow-Origin "http://abcxyz.local";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

• 如果是Flask后端，使用flask-cors扩展实现：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 指定允许跨域的父域名
CORS(app, origins="http://abcxyz.local")

2. 修改HTTPS iframe页面（server.local）代码 #

添加消息监听逻辑，收到父页面的合法请求后返回navigator.userAgentData：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTTPS Iframe Page</title>
</head>
<body>
    <script>
        // 监听父页面的消息
        window.addEventListener('message', (event) => {
            // 验证消息来源，仅处理可信域名的请求
            if (event.origin === 'http://abcxyz.local') {
                if (event.data === 'request-userAgentData') {
                    // 将userAgentData返回给父页面
                    event.source.postMessage({
                        type: 'userAgentData',
                        data: navigator.userAgentData
                    }, event.origin);
                }
            }
        });
    </script>
</body>
</html>

3. 修改HTTP父页面（abcxyz.local）代码 #

添加向iframe发送请求、接收返回数据的逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to ABCXYZ</title>
</head>
<body>
    <h1>Welcome to abcxyz.local!</h1>
    <p>This is the homepage served by the Flask server.</p>

    <iframe id="secureIframe" src="https://server.local:443" width="1" height="1" style="border:none;"></iframe>

    <script>
        const iframe = document.getElementById('secureIframe');
        
        // 等待iframe加载完成后发送请求
        iframe.addEventListener('load', () => {
            iframe.contentWindow.postMessage('request-userAgentData', 'https://server.local');
        });

        // 监听iframe返回的消息
        window.addEventListener('message', (event) => {
            // 验证消息来源
            if (event.origin === 'https://server.local') {
                if (event.data.type === 'userAgentData') {
                    // 处理获取到的userAgentData，示例：打印到控制台
                    console.log('获取到的userAgentData:', event.data.data);
                    // 此处添加你的业务逻辑
                }
            }
        });
    </script>
</body>
</html>

核心注意事项 #

• 来源验证必须做：所有message事件都要验证event.origin，防止恶意域名的消息注入，避免安全风险。
• 混合内容问题：部分浏览器可能限制HTTP页面加载HTTPS iframe，若出现拦截问题，建议将父页面也升级为HTTPS，彻底解决混合内容限制。
• 兼容性处理：navigator.userAgentData仅支持Chromium内核浏览器（Chrome、Edge等），如需兼容其他浏览器，需同时兼容navigator.userAgent属性。

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