Reporting in Chrome broken when form-action CSP directive exists

[foolip]

Starting from https://webcompat.com/issues/new?label=type-google (HTTPS) and being logged in to the site using my GitHub account, I see a "Report as foolip" button alongside the "Report Anonymously" button. Using that button doesn't work, the whole form is fading in/out (intentional, I presume) but nothing happens. In the Chrome devtools console:

Refused to send form data to 'http://webcompat.com/' because it violates the following Content Security Policy directive: "form-action 'self'".

In other words, a problem of mixing http and https.

[foolip]

I also tried from https://webcompat.com/ and using "Report Anonymously", same problem.

@miketaylr red alert?

[miketaylr]

dang. ok, i'll revert and investigate.

[miketaylr]

dang. ok, i'll revert and investigate.

rather, deploy the last version.

[miketaylr]

Refused to send form data to 'http://webcompat.com/'

Why are we trying to submit to the http endpoint...

[foolip]

Don't know if you already deployed, but I just tested on Firefox and the problem doesn't manifest there. So possibly this is also an interop issue :)

[foolip]

Interesting, my 3 attempts actually did successfully file issues:

• foolip.org - see bug description web-bugs#17906 ("Report as foolip" in Chrome)
• foolip.org - see bug description web-bugs#17907 ("Report Anonymously" in Chrome)
• foolip.org - see bug description web-bugs#17908 ("Report Anonymously" in Firefox)

I'll close them. Good news is that the type-google label worked!

[miketaylr]

@foolip yeah, just barely re-deployed. Unsure if it was before or after you tested though.

b1bfaf5 is when we added the form-action CSP bits.

(site note: staging.webcompat.com is a place where we can file test bugs, fyi -- can manually deploy patches or branches there independent from production).

[miketaylr]

cc @laghee (since this relates to the CSP stuff)

[foolip]

staging.webcompat.com is a place where we can file test bugs, fyi

Oh, I'll do that next time :) Which repo do the bugs end up in?

[softvision-sergiulogigan]

Right here, @foolip
https://github.com/webcompat/webcompat-tests/issues

[miketaylr]

Interesting... this does reproduce on staging in Chrome. I had tested before deploying in Firefox on staging.

Time to investigate form-action CSP interop...

[miketaylr]

from MDN

Whether form-action should block redirects after a form submission is debated and browser implementations of this aspect are inconsistent (e.g. Firefox 57 doesn't block the redirects whereas Chrome 63 does).

That would make sense if we're trying to submit the form on HTTP and relying on nginx doing the 301 to HTTPS... but why would we be submitting to http? The form action is /issues/new... 😕

[miketaylr]

We might consider removing the form-action directive from our CSP until we figure this out... otherwise it means Chrome users can't report bugs (which would be silly for a compat site :P). If I can't figure it out in a few hours, I'll back that out.

[foolip]

Thanks @miketaylr, much appreciated!

[laghee]

@miketaylr Any chance it's related to flask's url_for? https://stackoverflow.com/questions/34802316/make-flasks-url-for-use-the-https-scheme-in-an-aws-load-balancer-without-mess Maybe specifying PREFERRED_URL_SCHEME would change behavior?

[miketaylr]

Any chance it's related to flask's url_for?

That's a good guess... but right now the form action is hard-coded to the relative/issues/new. And if you try to log out what formEl.action is before we call formEl.submit(), it shows the https endpoint. But somehow form-action is still complaining about trying to submit to http...

[miketaylr]

OK, I've deployed the temporary bandaid patch (which just removes form-action) and deployed that, but we should try to figure out what the real bug is here... I'm still not 100% sure this isn't some strange Chrome bug. Testing with Charles Proxy, I didn't see any traffic trying to hit the http endpoint, or a redirect of any kind.

[karlcow]

Maybe some contexts here.
w3c/webappsec-csp#8
see for example

The current situation where Chrome/Safari block redirects and Firefox does not makes deploying form-action very tricky.

302 and 307 seem to have different behaviors btw.