Question

我有一个django应用，我试图将其嵌入到具有不同域的网页上。我们说我的django应用程序是在https://myapp.io托管的，我试图将其嵌入的页面位于example.com。

这是我的iframe的样子：

<iframe src="https://myapp.io" style="border: medium none; min-height: 350px; overflow: hidden;" id="myIframe" scrolling="no"></iframe>

以下是在Chrome中加载iframe时发送的实际请求+响应。这与Firefox中发送的请求完全匹配。 X-FRAME-OPTIONS设置为ALLOW-FROM myapp.io。

遗漏的请求标头是：

Host:myapp.io
Referer:https://example.com/path/to/current/page
Upgrade-Insecure-Requests:1

此请求适用于Chrome，iframe的内容可正确显示。但是，在Firefox中，iframe为空。

Chrome在页面加载时显示此控制台错误：

无效的X-Frame-Options＆＃39;加载时遇到的标题＆＃39; https://myapp.io：＆＃39;允许来自MYAPP.IO＆＃39;不是公认的指示。标题将被忽略。

在Firefox中，我可以将myapp.io网址替换为https://w3schools.com，w3schools.com的内容会显示在iframe中。

但是，在Firefox中的开发者工具的“网络”标签中，显示浏览器已收到iframe的内容。由于某种原因，它永远不会进入iframe。

如何修复此问题并允许Firefox显示我的Iframe？

修改

为了排除使用JavaScript或其他任何有趣的业务，我已将iframe设置为加载包含以下内容的页面，而不会改变Firefox的行为。

<html>
  <body>hi</body>
</html>

编辑2

由于我使用docker-compose部署我的Django应用程序，我想我会发布我的配置文件。

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  '$status $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile        on;
  #tcp_nopush     on;

  keepalive_timeout  65;

  #gzip  on;

  upstream app {
    server django:5000;
  }

  server {
    listen 80;
    charset     utf-8;

    location / {
      # checks for static file, if not found proxy to app
      root /usr/share/nginx;
      try_files $uri @proxy_to_app;
    }

    # cookiecutter-django app
    location @proxy_to_app {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-Frame-Options 'ALLOW-FROM myapp.io';
      proxy_redirect off;
      proxy_pass   http://app;
    }
  }
}

搬运工-compose.yml

version: '2'

volumes:
  postgres_data: {}
  postgres_backup: {}
  static: {}

services:
  postgres:
    build: ./compose/postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - postgres_backup:/backups
    env_file: .env

  django:
    build:
      context: .
      dockerfile: ./compose/django/Dockerfile
    user: django
    depends_on:
      - postgres
      - redis
    command: /gunicorn.sh
    volumes:
      - static:/app/powerschool_apps/static/public
    env_file: .env

  nginx:
    build: ./compose/nginx
    depends_on:
      - django
    volumes:
      - static:/usr/share/nginx/static

    ports:
      - "0.0.0.0:80:80"


  redis:
    image: redis:latest

django config

# SECRET CONFIGURATION
# ------------------------------------------------------------------------------
# See: https://docs.djangoproject.com/en/dev/ref/settings/#secret-key
# Raises ImproperlyConfigured exception if DJANGO_SECRET_KEY not in os.environ
SECRET_KEY = env('DJANGO_SECRET_KEY')

# This ensures that Django will be able to detect a secure connection
# properly on Heroku.
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

# SECURITY CONFIGURATION
# ------------------------------------------------------------------------------
# See https://docs.djangoproject.com/en/1.9/ref/middleware/#module-django.middleware.security
# and https://docs.djangoproject.com/ja/1.9/howto/deployment/checklist/#run-manage-py-check-deploy
SECURE_HSTS_INCLUDE_SUBDOMAINS = env.bool(
    'DJANGO_SECURE_HSTS_INCLUDE_SUBDOMAINS', default=True)
SECURE_CONTENT_TYPE_NOSNIFF = env.bool(
    'DJANGO_SECURE_CONTENT_TYPE_NOSNIFF', default=True)
SESSION_COOKIE_SECURE = True
SESSION_COOKIE_HTTPONLY = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_HTTPONLY = True
X_FRAME_OPTIONS = 'ALLOW-FROM myapp.io'

Answer 1

我通过将协议添加到ALLOW-FROM标题来修复此问题。

而不是

proxy_set_header X-Frame-Options 'ALLOW-FROM myapp.io';

应该是

proxy_set_header X-Frame-Options 'ALLOW-FROM https://myapp.io';

Firefox中的iframe为空但在Chrome

nginx.conf

搬运工-compose.yml

django config

1 个答案: