Multiple 'X-Frame-Options' headers with conflicting values ('ALLOW, DENY') encountered when loading page - ClickJacking Issue

Problem

Any Studio HTML Component would not load the HTML editor view due to a `X-Frame-Options: DENY` HTTP response header setting. The response header when loading the HTML editor had the following header values and the 'DENY' value was causing the page not to load properly. It seemed weird to have multiple `x-frame-options` value set to begin with since our production install of edx-platform was only returning one value.

# Response Header
x-frame-options:ALLOW
x-frame-options:DENY

# Javascript Console within Chrome Browser
Refused to display 'https://cms.ficus-lti.ew-dev.com/static/ef1065178a//js/vendor/tinymce/js/ti…static/ef1065178a//js/vendor&ParentOrigin=https://cms.ficus-lti.ew-dev.com' in a frame because it set 'X-Frame-Options' to 'deny'.
container.js:162 

GET https://cms.ficus-lti.ew-dev.com/static/ef1065178a//js/vendor/tinymce/js/ti…static/ef1065178a//js/vendor&ParentOrigin=https://cms.ficus-lti.ew-dev.comnet::ERR_BLOCKED_BY_RESPONSE


Solution

Follow these steps to resolve your issue. Additional information about X-Frame-Options can be found here https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Browser_compatibility

For the NGINX site in question make sure that you don't have multiple `add_header X-Frame-Options` values set unless needed.

  1. For this case we setup Let's Encrypt (https://letsencrypt.org/) to configure our site out with SSL.
  2. Within the /edx/app/nginx/sites-available/cms configuration file we included a Let's Encrypt configuration reference at /etc/nginx/snippets/ssl-params.conf.
    1. This file included a call to add_header X-Frame-Options DENY; which we removed (by commenting out) to resolve our issue.
    2. By default edx-platform sets the middleware 'django.middleware.clickjacking.XFrameOptionsMiddleware' value for X_FRAME_OPTIONS = 'ALLOW' which won't restrict <frame>, <iframe>, or <objects> from rendering.

      For example:
      https://github.com/edx/edx-platform/blob/open-release/ficus.master/cms/envs/common.py#L404-L405

      # Clickjacking protection can be enabled by setting this to 'DENY'
      X_FRAME_OPTIONS = 'ALLOW'
    3. Need to restart NGINX service for any updated configuration for the site to remove the additional `X-Frame-Option` header.

Details of this issue can be found here. 

https://groups.google.com/d/msg/openedx-ops/Ih4doZVUChI/YqEmJq16AwAJ