Django/Angular 4 CORS issue - django

Question

I am running two angular 4 apps served through two django different apps (as static files served. That is working perfectly fine). I have a "parent app" and a "child app".
Both apps are served through their own Django application on their own identical app ( we literally copied the django app to serve both the parent and the child). ]
THE ISSUE: We are facing a CORS issue between loading the child app on the parent app in an iFrame.
what's going on:
The chld app is loaded by the parent appp
Parent app:
<div *ngIf="theRoute">
<iframe [src]="myUrl" appHeght id="myIFrame"></iframe>
</div>
My parent-app IFrame Component:
ngOnInit() {
// The Router is correct, and so are the params.
this.myRouter = this.route.params.subscribe(
params => {
...
this.myUrl = this.sanitizer.bypassSecurityTrustResourceUrl('http://127.0.0.1:8201/'); // location of the child
... // more stuff, including change detection
}
);
}
my PARENT DJANGO App - SETTINGS.PY:
import os
import datetime
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'my parent secret'
DEBUG = True
ALLOWED_HOSTS = '*'
INSTALLED_APPS = [
'rest_framework',
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'spa.middleware.SPAMiddleware',
]
ROOT_URLCONF = 'my_project_proj.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'my_project_proj.wsgi.application'
# Database
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'America/Chicago' #'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = './frontend/dist/parent-app'
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:8000',
'http://127.0.0.1:8000',
'http://127.0.0.1:8201',
'http://localhost:8201'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
)
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)
X_FRAME_OPTIONS = 'ALLOW'
I've also allowed X_FRAME-OPTIONS = 'ALLOW-FROM http://localhost:8201 --> this is the location of the parent component. I have allowed both localhost:8200 and 127.0.0.1/8201. Both gave the same error.
AND THIS IS MY CHILD DJANGO APP SETTINGS:
import os
import datetime
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'my child secret'
DEBUG = True
ALLOWED_HOSTS = '*'
INSTALLED_APPS = [
'rest_framework',
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'spa.middleware.SPAMiddleware',
]
ROOT_URLCONF = 'my_child.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'my_child.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'America/Chicago' #'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = './frontend/dist/child-one-app'
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:8000',
'http://127.0.0.1:8000',
'http://127.0.0.1:8201',
'http://localhost:8201'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
)
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)
X_FRAME_OPTIONS = 'ALLOW'
As you can see, both my child and my parent component allow CORS. But for some reason, I'm still getting this error in my IFrame:
Invalid 'X-Frame-Options' header encountered when loading
'http://127.0.0.1:8201/': 'ALLOW' is not a recognized directive. The
header will be ignored.
**AND this error: **
ERROR DOMException: Blocked a frame with origin
"http://127.0.0.1:8000" from accessing a cross-origin frame.
My overall question: so even though I've enabled CORS in both my parent and child app, why is my child app still giving me a CORS issue?. I've tried everything to access this cross origin including doing a `iframeID.contentWindow.postMessage() and in my child app make a window.addEventListener('message', myRecever, false). the reciver App in my child app did nothing but call itself over and over again!!
my child component receive method:
import { Component, OnInit } from '#angular/core';
import { LoaderService } from './services/loader.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
private loaderService: LoaderService = LoaderService.getInstance();
constructor() {
window.addEventListener('message', this.receiveMessage, false);
}
ngOnInit() {
this.loaderService.removeSpinner();
}
private receiveMessage(event) {
console.log("event origin:" , event.origin);
event.source.postMessage('verified', event.origin);
}
}
That console.log event keeps calling itself in my iFrame and my child component over and over again! Why?!