Embedding a Web Application Using an Iframe

I have a Django application (A), and one of my clients wants to embed it within their application (B) using an iframe. The client application can be built with any framework, and we have no control over its code. Additionally, both applications are hosted on entirely different domains. To enable this setup, we need to fine-tune the settings in our Django application A to allow embedding within client application B.

Below is a test HTML code snippet used to embed the web application, which I have hosted using a free hosting service.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Loader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        iframe {
            width: 100%;
            height: 80vh;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h2>Loaded URL in iFrame</h2>
    <iframe 
        id="urlFrame" 
        src="https:/xyz.com"
    ></iframe>
</body>
</html>

Django Configuration:

  • Python 3.6

  • Django: 2.2.5

Changes made:

Updated Django settings to permit the domain to load the application. Some of the settings below should be hardened for security in production, as they are intended only for POC purposes.:

  • DEBUG = True

  • Removed X_FRAME_OPTIONS = "DENY" and used CSP_FRAME_ANCESTORS = ("'self'", "*")

  • CORS_ALLOW_ALL_ORIGINS = True

  • CORS_ALLOW_CREDENTIALS = True

  • CSRF_TRUSTED_ORIGINS = ['https://*']

  • CSRF_USE_SESSIONS = True

  • Added ‘corsheaders.middleware.CorsMiddleware' in middleware

The login page loads successfully, but when I attempt to log in, I encounter the following error:

Error message

I tried setting SESSION_COOKIE_SAMESITE and CSRF_COOKIE_SAMESITE to ‘None’ but that is not supported in the old django version

I aim to load the application within an iframe, which I have successfully achieved. Later I'm not able to do any operations on the loaded application.

Вернуться на верх