阻止在应用外部访问嵌入的 iframe，甚至在其他选项卡中？-解网

问：

我正在开发一个 Web 应用程序，需要嵌入包含敏感信息的 iframe。我想确保此 iframe 只能在我的应用程序上下文中访问，并且无法从其他浏览器选项卡或外部访问，即使用户已通过身份验证也是如此。

我考虑过使用“sandbox”属性、“X-Frame-Options”标头和“内容安全策略（CSP）”来限制 iframe 行为。具体来说，在我的 nginx.conf 文件中，我设置了以下配置：

云解决方案提供商：

add_header Content-Security-Policy "frame-ancestors http://127.0.0.1:5500;";

这会将 iframe 嵌入限制为仅 127.0.0.1：5500 主机。

X-Frame-选项：

add_header X-Frame-Options "ALLOW-FROM http://127.0.0.1:5500";

NGINX 配置：

server {
    listen 80;
    server_name localhost;

    add_header Content-Security-Policy "frame-ancestors http://127.0.0.1:5500;";
    add_header X-Frame-Options "ALLOW-FROM http://127.0.0.1:5500";
    location / {
        index index.html;
    }

}

虽然这些配置有助于限制 iframe 嵌入到其他站点上，但我注意到仍然可以使用 iframe 的源 URL（即 localhost：8080/）直接访问嵌入的应用程序。

有没有办法完全阻止对嵌入式 iframe 的访问，确保它只能在我的应用程序的上下文中进行交互和查看？如果没有，我可以采取哪些额外的安全措施来尽可能防止未经授权的访问？

IFRAME html：

<!DOCTYPE html>
<html>
<head>
    <!-- <meta http-equiv="X-Frame-Options" content="SAMEORIGIN"> -->
    <meta http-equiv="Content-Security-Policy" content="frame-ancestors http://127.0.0.1:5500;">
    <meta http-equiv="Referrer-Policy" content="no-referrer">
    <title>Secure App</title>
</head>
<body>
    <h1>My Secure App</h1>
    <p>This is a secure web application.</p>

</body>
</html>

Docker文件：

FROM nginx
COPY iframe-nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /etc/nginx/html/index.html

父 Html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>iframe</div>
    <iframe src="http://localhost:8080/" sandbox="allow-same-origin"></iframe>
</body>
</html>

JavaScript 安全性 nginx iframe

阻止在应用外部访问嵌入的 iframe，甚至在其他选项卡中？

Prevent an embedded iframe from being accessible outside the app, even in other tabs?

评论