jinja2/react_base.html template uses request.user

[peterbe]

Summary says it all. The read-only pages should never depend on the users.

Our CDN is configured to never pass through any sessionid cookie values to the Django views so hopefully all pages now are always forcibly anonymous.

We should audit the trail to make sure nothing in the read-only site depends on the user.
Including waffle flags.

[peterbe]

Let's start with waffle flags. One place where request.user is used is

  {% if waffle.flag('developer_needs') %}
    {% stylesheet 'banners' %}
  {% endif %}

the implementation of waffle.flag depends on users in some django-waffle way.
But what's so wrong is that the rendering of the HTML is always anonymous (because our CloudFront will strip sessionid cookie values). So the HTML will never ship with the necessary CSS into the CSSOM but it could be that a users /api/v1/whoami says that the developer_needs is on so banners.jsx decides to render something to the DOM. But the CSS won't be there.

The minified banners.css is 5,095 bytes which isn't insignificant. So let's aim to NOT include it if there's no reason not to.

Thing is, developer_needs is one of N possible uses of the banners.css. In jinja this might be expressed as:

{% if waffle.flag('developer_needs') or waffle.flag('devportal_promotion') or waffle.flag('firefox_partnership') or waffle.flag('some_other_reason') %}
    {% stylesheet 'banners' %}
  {% endif %} 

So it's not fair to connect banners.css to a particular waffle flag.

A possible solution is to use Constance instead. So like this:

{% if config.ENABLE_BANNERS %}

Then, if you enable ANY waffle flag that needs banners.css you remember to go to https://developer.mozilla.org/admin/constance/config/ and enable it.

Another option is to inspect any defined waffle flag that might need it. If there is greater than 0% chance that it might be enabled, you include it. E.g.

# the view function
possible_flags = ['developer_needs']
context['include_banners_css'] = False
for flag in Flag.objects.filter(name__in=possible_flags):
   if flag.everyone or flag.percent > 0 or flag.superusers or flag.staff or flag.authenticated or flag. ...:
      context['include_banners_css'] = True
      break

{# e.g. react_base.html #}
{% if include_banners_css %}
  {% stylesheet 'banners' %}
{% endif %}

[peterbe]

Actually, a more ideal solution would be something like this:
https://gist.github.com/peterbe/1740864dfa1e2ec02e90063eeec396f4

It's more complicated but might perform better since it's less CSS upfront. We'd need to do it more properly with better error handling and we'd also need to figure out a way to "connect" this to django-pipeline.

[peterbe]

@Gregoor For the record, this relates to how we'd do the CSS for BCD tables too.
I think my Django solution would tie us over but it would be even better if we could properly lazy load it.
Again, I'm not convinced I want to improve Kuma since there are no good ways to test if it works.

[tobinmori]

#6108 was done, but needs to be redone after some consideration.

[peterbe]

We can close this now. Somewhere in the read-only site stuff do we do things that depend on request.user. For example, the Subscription banner depends on the user but we're side-stepping that entirely by including the subscription banner CSS on every possible page no matter what the waffle flag might say.