1306384 - codepen does server-side UA sniffing and only sends allow-modals sandbox option to Chrome

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[johan]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160922113459

Steps to reproduce:

I'm working in codepen and am testing some variables through alert(). This used to work in the past, but not anymore (as in not in 49.0.1). When I reload the frame just by itself (without the iframe structure), the alerts work.

OS: Windows 10 (with anniversary update).
Browser: Firefox 49.0.1


Actual results:

I'm working in codepen and am testing some variables through alert(). This used to work in the past, but not anymore (as in not in 49.0.1). When I reload the frame just by itself (without the iframe structure), the alerts work.


Expected results:

The alerts should have worked even inside the iframe.

Comment 1

[Tooru Fujisawa [:arai]]

can you provide a testcase?

Comment 2

[johan]

testcase.. hmm.. not really, but I was working in codepen.io.

Comment 3

[Loic]

We need a testcase.

Comment 4

[Liviu Cirdei]

Johan, please provide the codepen.io link with the code that caused the issue to appear, or attach a file with that code. Otherwise we can't do any progress on this bug report.
Thanks.

Comment 5

[johan]

Made a copy of it:

http://codepen.io/Malachi/pen/dpdpZX

This page throws about 8 alerts at you in Chrome, but nothing in Firefox.

Comment 6

[Liviu Cirdei]

Thanks Johan,

I was able to reproduce the issue on latest Nightly too. Chrome and Edge show the alerts. 
Firefox used to show them too. I found a regression range for this:

Pushlog: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=212d1af61570cd407e1ca5678ece1b898afdab8e&tochange=58d84f830e72fece44a4838ca47781a3b754aea1

Regressed by Bug 1268845.

Comment 7

[johan]

Thanks Liviu,

at least I'm not going crazy then. (at least not that crazy)
As for the regression range.. not sure what that means. Does this mean that the bug had already been reported?

Thanks,
Johan

Comment 8

[Boris Zbarsky [:bzbarsky]]

> As for the regression range.. not sure what that means.

It means that one of the changes in that list caused this problem to appear.

> Regressed by Bug 1268845.

No, regressed by bug 1190641 (which is in the same push range, note).  That bug added the allow-modals sandbox keyword, which can be used to allow alert in a sandboxed iframe; if it's not set, alerts are not allowed in the sandbox.

What's odd here is that Chrome also implements allow-modals.  So why is it showing alerts on the testcase linked in comment 5?

If I look at the codepen from comment 5 in Chrome in developer tools, here's what the <iframe> tag in question looks like (with some irrelevant attributes stripped off):

  <iframe src="http://s.codepen.io/boomerang/7d5ae3a40fac0b31d67301180b4924971475855739935/index.html"
          allowfullscreen="true" 
          sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms">
  </iframe>

OK, so that sets "allow-modals" and all is good.

Here's the same page's <iframe> tag in Firefox:

  <iframe src="http://s.codepen.io/boomerang/19510f5e445929ed0f424445cdfb4f5b1475856277979/index.html"
          allowfullscreen="true" 
          sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms">
  </iframe>

Note the lack of "allow-modals".  So they're not allowed.

Now why is codepen sending us and Chrome differrent markup?  The sandbox value comes from this.sandboxVal in <https://assets.codepen.io/assets/editor/pen/index-b56544e135729b683b33191ddfb53bc4.js>, which is set like so:

  this.sandboxVal = window.__CPDATA.iframe_sandbox

OK, where is this coming from?  On the toplevel codepen page there is an <input> tag like so (with "..." where I elided some stuff):

  <input type="hidden" id="init-data" value="{... __CPDATA&quot;:{ ... iframe_sandbox&quot;:&quot;allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms&quot;} ...">

That's in Firefox, at least.  In Chrome it's:

  <input type="hidden" id="init-data" value="{... __CPDATA&quot;:{ ... iframe_sandbox&quot;:&quot;allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms&quot;} ... ">

A simple test confirms that if I do this:

  wget --user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2882.0 Safari/537.36" -O /tmp/foo.html 'http://codepen.io/Malachi/pen/dpdpZX'

I get HTML that includes "allow-modals" (both in the __CPDATA thing and in other iframe tags in the page).  If I use a different UA string (e.g. Firefox's or Safari's) then the HTML does not include "allow-modals".

I have no idea why codepen is UA-sniffing and purposefully sending us broken markup, but that's what it's doing.  The Firefox behavior is correct given the markup they are sending us.

Johan, you may want to complain to them if you actually have an account with them...

Comment 9

[Boris Zbarsky [:bzbarsky]]

And spoofing the Chrome UA string in Firefox makes the alerts show up, as expected.

Comment 10

[Loic]

To contact codepen support: https://trello.com/c/YJSDG1JV

Comment 11

[Mike Taylor [:miketaylr]]

Laziest support attempt here: https://twitter.com/miketaylr/status/784431369103347712

Adam, can you get in touch with Codepen? The fix from Comment #8 is to add "allow-modals" to the sandbox attribute of the iframe (just like they do in Chrome).

Comment 12

[Chris Coyier]

It was about one year ago we started only putting `allow-modals` on Chrome. We we put it on all browsers, we were getting console noise. Some warning about not supporting that particular value. Looks like its supported now, so I can push a fix to make all those sandbox values consistent.

Comment 13

[Mike Taylor [:miketaylr]]

Thanks Chris!

Comment 14

[Boris Zbarsky [:bzbarsky]]

Note that I'm not aware of us ever having any console noise for unsupported sandbox values, except in the CSP case....

Comment 15

[Chris Coyier]

I know that we do use CSP at CodePen, so perhaps that's it.

Comment 16

[Devdatta Akhawe [:devd]]

hmm .. I don't see a CSP header on http://codepen.io/Malachi/pen/dpdpZX in any of the documents. Additionally, the CSP sandbox is still in beta and only hits release in November, right? @chris are you testing on beta and changed the Firefox CSP code in the last month or so? Do you even use CSP sandbox?

Comment 17

[johan]

(Thanks Chris & all others in getting this going/fixed! Apparently not a Firefox bug then!

Comment 18

[Mike Taylor [:miketaylr]]

This is fixed now, thanks Chris and team!