HTML component editor not viewable because of X-Frame-Options: DENY - ClickJacking

1,028 views
Skip to first unread message

Zachary Trabookis

unread,
Jun 7, 2017, 1:32:31 PM6/7/17
to Open edX operations, lki...@g.clemson.edu, tra...@vlabs.ac.in, chris...@hotmail.com, d...@edx.org
ClickJacking issue with Studio loading the HTML editor contents. Occurs with default edX course or any other courses HTML components.

Version: open-release/ficus.master 

edxapp@ip-172-31-30-95:~/edx-platform$ git branch -v
  master                    c8accbc30e Merge pull request #15131 from edx/nedbat/help-tokens-from-pypi
* open-release/ficus.master ef1065178a Move matplotlib to post requirements.


After installing the latest Native install of Ficus it appears that when editing an HTML component within the TinyMCE Editor and clicking the HTML button to pull up the HTML code the following Javascript error is displayed.

# 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.com net::ERR_BLOCKED_BY_RESPONSE

# Network Responses within Chrome Browser
Here are two document request/responses that I thought were important.

Document #1
HTTP STATUS: 200
General
    1. Request URL:
    2. Request Method:
      GET
    3. Status Code:
      200
    4. Remote Address:
    5. Referrer Policy:
      no-referrer-when-downgrade
  1. Response Headers
    1. content-encoding:
      gzip
    2. content-language:
      en
    3. content-type:
      text/html; charset=utf-8
    4. date:
      Wed, 07 Jun 2017 16:35:19 GMT
    5. p3p:
      CP="Open edX does not have a P3P policy."
    6. server:
      nginx
    7. set-cookie:
      csrftoken=zLg9xKS4QyOjaBTX3N5eu7n5Ch3OtDXp; expires=Wed, 06-Jun-2018 16:35:19 GMT; Max-Age=31449600; Path=/
    8. status:
      200
    9. vary:
      Accept-Language, Cookie
    10. vary:
      Accept-Encoding
    11. x-content-type-options:
      nosniff
    12. x-frame-options:
      ALLOW
    13. x-frame-options:
      DENY
  2. Request Headers
    1. :authority:
    2. :method:
      GET
    3. :path:
      /container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@45c7cedb4bfe46f4a68c78787151cfb5
    4. :scheme:
      https
    5. accept:
      text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    6. accept-encoding:
      gzip, deflate, sdch, br
    7. accept-language:
      en-US,en;q=0.8,es;q=0.6
    8. cache-control:
      max-age=0
    9. cookie:
      edxloggedin=true; sessionid="1|hxft44pa0s9vlngek59fxiu6s376ynx0|r2md4UHcuWuT|ImUwMDNmZDQwZGVmMTM3MGE2ODcyYmZiMjdiMTEzNTNlMGZlZmM4NDk3YzI1ZjgxMGViZDUwY2VlOWJiNjJjNzMi:1dIds0:ykAJl4G_f3gSJfGpEjQuRPM2gyU"; edx-user-info="{\"username\": \"staff\"\054 \"version\": 1\054 \"enrollmentStatusHash\": \"092a45aee16385f5730b722aee207a87\"\054 \"header_urls\": {\"logout\": \"https://cms.ficus-lti.ew-dev.com/logout\"}}"; csrftoken=zLg9xKS4QyOjaBTX3N5eu7n5Ch3OtDXp
    10. referer:
    11. upgrade-insecure-requests:
      1
    12. user-agent:
      Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Document #2
HTTP STATUS: (FAILED)
    1. Request URL:
    2. Referrer Policy:
      no-referrer-when-downgrade
  1. Request Headers
    1. Provisional headers are shown
    2. Referer:
    3. Upgrade-Insecure-Requests:
      1
    4. User-Agent:
      Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
  2. Query String Parametersview sourceview URL encoded
    1. CodeMirrorPath:
      /static/ef1065178a//js/vendor
    2. ParentOrigin:


 


After looking at the edx-platform code I noticed the following setting from Django X_FRAME_OPTIONS.

It appears that this setting is set to ALLOW in
# Clickjacking protection can be enabled by setting this to 'DENY'
X_FRAME_OPTIONS = 'ALLOW'


There exists an override for AWS installs that accounts but we haven't set the "X_FRAME_OPTIONS": "DENY" in the /edx/app/edxapp/cms.env.json file.
https://github.com/edx/edx-platform/blob/open-release/ficus.master/cms/envs/aws.py#L407-L408
##### X-Frame-Options response header settings #####
X_FRAME_OPTIONS = ENV_TOKENS.get('X_FRAME_OPTIONS', X_FRAME_OPTIONS)


After searching edx-platform code for x-frame-options or X_FRAME_OPTIONS I could only find this decorator that only used for third party auth logins. I don't see how this code could affect our situation since we don't have ENABLE_THIRD_PARTY_AUTH enabled. I tried enabling third party auth and nothing changed so this code doesn't seem like the culprit.
https://github.com/edx/edx-platform/blob/open-release/ficus.master/common/djangoapps/third_party_auth/decorators.py#L22-L30


Are we configuration something wrong? Any help would be appreciated. I've made some comments about this within https://openedx.slack.com/archives/C08B4LZEZ/p1496844959193125 but haven't received any feedback yet from edX or the community members.

Zach

Zachary Trabookis

unread,
Jun 7, 2017, 3:34:50 PM6/7/17
to Open edX operations, lki...@g.clemson.edu, tra...@vlabs.ac.in, chris...@hotmail.com, d...@edx.org
After working with Diana Huang from edX we found out that a second NGINX .conf file for Let's Encrypt snippets/ssl-params.conf was causing the second `x-frame-options: DENY` to be set in the Response Header information.

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

We ended up using Let's Encrypt (https://letsencrypt.org/) to sign our SSL certificate and the configuration files included for parameters had this value set. After commenting this DENY header out and restarting NGINX services the HTML editor loaded fine in Studio.

/etc/nginx/snippets/ssl-params.conf

# Commenting this out removed that second `x-frame-option` within the HTTP response header.
#add_header X-Frame-Options DENY;

Showing partial CMS nginx config where the Let's Encrypt configuration is used.

upstream cms-backend {
            server 127.0.0.1:8010 fail_timeout=0;
    }

server {
    listen 80;
    listen [::]:80;
    server_name cms.ficus-lti.ew-dev.com;
    return 301 https://$server_name$request_uri;
}

server {
  # CMS configuration file for nginx, templated by ansible
      
  # Proxy to a remote maintanence page
  
  # error pages
  error_page 504 /server/server-error.html;
  error_page 502 /server/server-error.html;
  error_page 500 /server/server-error.html;
  
  #listen 18010 ;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name cms.ficus-lti.ew-dev.com;
    include snippets/ssl-ficus-lti.ew-dev.com.conf;
    include snippets/ssl-params.conf;
  
  # Prevent invalid display courseware in IE 10+ with high privacy settings
  add_header P3P 'CP="Open edX does not have a P3P policy."';

  .... more code here ....

}


This article helped us figure out what might be the issue.

Details of this work are here in the #ops channel for Open edX.

Zach

Zachary Trabookis

unread,
Jun 7, 2017, 3:59:38 PM6/7/17
to Open edX operations, lki...@g.clemson.edu, tra...@vlabs.ac.in, chris...@hotmail.com, d...@edx.org

prakash....@vlabs.ac.in

unread,
Jul 3, 2017, 9:57:26 AM7/3/17
to Open edX operations


On Wednesday, June 7, 2017 at 11:02:31 PM UTC+5:30, Zachary Trabookis wrote:
ClickJacking issue with Studio loading the HTML editor contents. Occurs with default edX course or any other courses HTML components.

Version: open-release/ficus.master 

edxapp@ip-172-31-30-95:~/edx-platform$ git branch -v
  master                    c8accbc30e Merge pull request #15131 from edx/nedbat/help-tokens-from-pypi
* open-release/ficus.master ef1065178a Move matplotlib to post requirements.


After installing the latest Native install of Ficus it appears that when editing an HTML component within the TinyMCE Editor and clicking the HTML button to pull up the HTML code the following Javascript error is displayed.


Hi Zach,

I am trying to load a site into my iframe, but I get X-Frame-Options as  DENY, ALLOW-FROM http://xxx.xxx.xxx

I am not able to figure out from where the DENY is coming from? I do not have the snippets/ssl-params.conf file in my LMS/CMS files.



Regards,
P 
Screenshot from 2017-07-03 15:53:17.png

Zachary Trabookis

unread,
Aug 16, 2017, 7:59:37 AM8/16/17
to Open edX operations
I would check your NGINX configuration to see if you added anything else in from default edX. That should help you narrow down the issue like I did with Let's Encrypt.

Zach

Reply all
Reply to author
Forward
0 new messages