#481: Window Controls Overlay for Installed Desktop Web Apps

Visit on Github.

Opened Mar 6, 2020

Hello TAG!

I'm requesting a TAG review of Window Controls Overlay for Installed Desktop Web Apps. (Originally: "Title Bar Customization for PWAs")

The title bar feature extends the app's client area to cover the entire window, including the title bar area. The web app developer is then able to draw and handle input for the entire window except the window buttons (close, maximize/restore, minimize), which are overlaid on top of the app's canvas.

Further details:

We'd prefer the TAG provide feedback as:

💬 leave review feedback as a comment in this issue and @-notify @amandabaker

Discussions

Discussed Mar 1, 2020 (See Github)

Dan: Lets try to not creep the term PWA into specs, especially since some vendors do not like the term and because it is more a pattern than a formal term.

Ken: this is about the app getting control to draw the title bar - with trusted controls to mitigate against e.g. it mimicking your bank or some other trusted site...

Alice: I am no CSS expert, but I don't think adding classes is the right approach, why not a media query.

Dan: Adding my comment about the term PWA.

Alice: OK the class example, was in user code, sorry

Discussed Mar 1, 2020 (See Github)

Dan: I might move this to... not sure why I put this here. I think Alice and I should discuss in Breakout C

Discussed Mar 1, 2020 (See Github)

Ken: Haven't heard anything back on our questions.

... Thought Rossen was going to talk to the team?

Ken: not just about where not to draw... about how to drag the window around... New display modifier in the webapp manifest for how it would look, new api for bounding rects and states... Environment variables.. system drag region... So lots of stuff. Should we look at each of these in separation?

Dan: so each of these becomes a separate proposal?

Ken: yes, like something related to CSS needs to go to the CSS working group... Also there should be some restrictions on drag regions.. CSS environment variables could be fine ... also used for dual screen API... Right names, right properties... using left and right – does that work for accessibility? Maybe start and end might make more sense

Comment by @dbaron Mar 6, 2020 (See Github)

Did you intend that those two links to w3c/csswg-drafts issues point to different issues? (They're the same.)

Comment by @kenchris Mar 17, 2020 (See Github)

Hi there,

We are wondering what are the intended venues for these features, like dragable might be intended for CSS WG and the manifest changes for Web Apps WG but where will the JS additions land? Also as part of Web App Manifest?

Comment by @torgo Mar 17, 2020 (See Github)

In general we are a bit concerned about specs that explicitly refer to the term PWA, as there is no formal definition. I am a big proponent of the PWA pattern, but specs should probably instead of saying "PWA title bar", it should say "installed windowed web app title bar" or something more related to the underlying technologies such as the manifest file...?

Comment by @kenchris Mar 18, 2020 (See Github)

Related (with my comments): https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/229 regarding security/phishing

Comment by @kenchris Mar 24, 2020 (See Github)

@atanassov you pointed out that this same technology would work for other use-cases than explained in the explainer. Are you following up?

Comment by @kenchris Mar 24, 2020 (See Github)

Regarding unsafe-area-top-inset-left and unsafe-area-top-inset-right: These should work in both RTL and LTR and in other specs we are moving to use start and end (think flexbox) instead of left and right @plinss

Discussed Apr 1, 2020 (See Github)

Ken: good to see change

Dan: agreed

Ken: they are experimenting with it in chrome right now

Dan: I asked Amanda if there is a mitigation against the issue Rossen raised. Hope we can get a reply before the plenary. I don't think there additional issues

Comment by @amandabaker Apr 3, 2020 (See Github)

We have iterated on the title per some of the feedback here and elsewhere, so I changed it above from "Title Bar Customization for PWAs" to "Window Controls Overlay for Installed Desktop Web Apps".


Did you intend that those two links to w3c/csswg-drafts issues point to different issues? (They're the same.)

@dbaron Not intentional, but I've updated it to include the web app manifest issue

Hi there,

We are wondering what are the intended venues for these features, like dragable might be intended for CSS WG and the manifest changes for Web Apps WG but where will the JS additions land? Also as part of Web App Manifest?

@kenchris JS changes are targeted for WICG. Currently the discussion has started here. I also added to the discussion links section above.

In general we are a bit concerned about specs that explicitly refer to the term PWA, as there is no formal definition. I am a big proponent of the PWA pattern, but specs should probably instead of saying "PWA title bar", it should say "installed windowed web app title bar" or something more related to the underlying technologies such as the manifest file...?

@torgo "Installed windowed web app" is what we were intending, so I've updated the title to use that terminology. Thanks for the suggestion!

Comment by @atanassov Apr 6, 2020 (See Github)

Since this feature enables PWA's to paint in areas where the window title bar would have been, we identified a concern of impersonating a browser. Most modern browsers today have their tabs UI in the window title bar area, something that's hard to spoof by windowed PWAs and presence of a title bar. In other words, a user could install a PWA that after launch looks like Chrome for example thus spoofing the user to enter privacy-sensitive data.

Comment by @tomayac Apr 6, 2020 (See Github)

s/lunch/launch/ Fun typo in tough times… A little chuckle at the beginning of my work day…

Comment by @torgo Apr 7, 2020 (See Github)

Thanks @amandabaker! Looks good. Is there a mitigation against the issue @atanassov raised above?

Comment by @amandabaker May 5, 2020 (See Github)

@atanassov @torgo We're working on writing up some of the mitigation options that we've come up with so far, so I'll share that out shortly

Comment by @kenchris May 27, 2020 (See Github)

@amandabaker any update?

Also there is now this related proposal from Google (at least touching the display values):

https://github.com/dmurph/display-mode/blob/master/explainer.md

Discussed Jun 1, 2020 (See Github)

Alice: I unassigned myself, since I've never commented.

Ken: No update since we asked for updates.

Sangwhan: Not sure how this would work on non-Windows OSes.

Ken: Definitely for desktop OSes.

Dan: Could work for DeX, windowing system for Android. Lets you use your phone like a desktop.

Sangwhan: I seem to recall this is wonky on macOS. Most apps fake the Mac window bar.

Dan: Should we bump this to the plenary to get some feedback from Rossen and Tess, respectively?

Comment by @amandabaker Jun 11, 2020 (See Github)

We have a few new mitigation proposals listed in our Security and Privacy Review doc. Access to the doc is currently limited, so feel free to request access if you don't have it already.

Although the proposals in the doc are specific to Chromium, the concepts behind them can be applied to any browser.

Discussed Jul 1, 2020 (See Github)

Dan: requested access to the s&p document...

Rossen: I explained some of the concerns - Amanda did say that the spec and proposal are being worked on. They are definitely addressing the privacy & security concerns. As a result the doc has info... I'll ping.

[bumped to next week

Comment by @torgo Jul 20, 2020 (See Github)

Hi @amandabaker sorry but can you please migrate that doc to an appropriate place in git hub or at least turn on View permission for anyone who has the link? Many thanks.

Comment by @amandabaker Jul 20, 2020 (See Github)

@torgo I've updated the permissions on the doc. Let me know if you still have issues accessing it

Discussed Aug 1, 2020 (See Github)

[bumped]

Discussed Aug 1, 2020 (See Github)

Skipped.

Comment by @torgo Aug 3, 2020 (See Github)

Due to holiday schedules we've had to bump discussion on this to the week after next. Sorry for the delay on our side @amandabaker. If there are any updates in the mean time please feel free to let us know here.

Comment by @amandabaker Aug 14, 2020 (See Github)

Just as a heads up, we moved the explainer into it's own WICG repo here: https://github.com/WICG/window-controls-overlay/blob/master/explainer.md

I also updated the original post to reflect the new location of the explainer

Comment by @kenchris Sep 22, 2020 (See Github)

Web App Manifest is close to integrate display_override (https://github.com/w3c/manifest/pull/932) but the explainer is not using that yet.

Comment by @torgo Sep 22, 2020 (See Github)

Hi @amandabaker - we're just discussing in the TAG "f2f" today and it seems to me that some potential privacy issues are not being taken into account. Specifically:

The point of PWAs is to have app-like experiences that have the same safety guarantees as the rest of the web - so if we're allowing developers to write arbitrary stuff into trusted UI then this can be a problem. It does not seem like there are sufficient mitigations. For example, a PWA could write confusing or misleading UI elements into the title bar in order to trick the user into disclosing private information (e.g. a phishing attack making it looks like their bank and taking their username and password).

Yes, we're talking about web apps that are installed but I'm also concerned that the web app could be installed under false pretences - where the user's trust is gamed by a web site or malicious advert for example, or via a URL they receive by text message or otherwise out of band...

It feels to me like this needs to be in the Privacy section and some mitigations need to be discussed here?

Comment by @amandabaker Sep 22, 2020 (See Github)

Hi @torgo, we have heard a lot of concerns about security and spoofing and have been discussing implementing a way to toggle between a normal standalone titlebar and the window controls overlay. When an app is installed that supports window controls overlay, by default it opens in standalone mode. Then from a button in the titlebar, the user can choose to toggle into this unsafe state. We are still discussing how best to notify the user of exactly what area can be trusted (e.g. highlighting bounds of UA-controlled region when toggling between modes).

Would this help to resolve the privacy issues? If so, I can update the explainer to include this mitigation. Also, we have a doc with other mitigation options if this approach is still insufficient: https://docs.google.com/document/d/1l7z7Y88lhL9r_0y5S-pcYGaFJqUkaPKSDcgRRTIyj6c/edit?usp=sharing

Comment by @kenchris Sep 22, 2020 (See Github)

I think it solves it partially and I even suggested this idea to @torgo in our breakout today.

I also think that if we can detect that the titlebar UI changed radically (maybe look at fuzzy comparing average color etc) then we would toggle back to standalone mode or so

Comment by @amandabaker Sep 22, 2020 (See Github)

@kenchris I worry that detecting differences in the UI would be harmful to both the user and the developer:

  1. For "good" apps, it limits the amount of change that is permissible in the title bar, making them less customizable and likely a worse experience for users.
  2. For malicious apps, it just forces the developer to work harder to spoof, but it doesn't prevent spoofing.
  3. For any app, the dev needs to experiment to figure out how much can change before toggling the standalone title bar. This is bad for "good" devs, but still won't stop the bad ones.
  4. Due to minor style/font differences across OSes, devs would have to validate their changes on all platforms to ensure that the title bar did not toggle back to standalone.

Also, I think it would be difficult to agree upon an acceptable amount of change.

Comment by @kenchris Sep 22, 2020 (See Github)

It should be per platform, by saving info from rendering. Chrome already has pixel rendering tests that does something similar.

All that would happen if it detects a large change is expand back to regular titlebar, and the user can easily collapse it to the custom toolbar again.

Comment by @kenchris Sep 22, 2020 (See Github)

Anyway you don't have to implement this, but I think it is worth listing or exploring as a mitigation strategy.

It is good to have potential mitigation strategies listed in case we start seeing abuse cases

Comment by @kenchris Sep 22, 2020 (See Github)

With regard to 1. I was mostly considering the state of the toolbar after a reload or restart of the app, but I see that it might be dynamic while the app is running (ie. entering data in search bar)

I mostly think the phishing attempts will be pretending to be another app after relaunch, but I might be wrong.

In which case it could be extended to visibility change as apps probably shouldn't change the toolbar while invisible - or it would be interesting to hear use cases for doing that

Comment by @kenchris Jan 26, 2021 (See Github)

What is this current status of this?

I see that "display_override" is shipping in next Chrome version (M89) on desktop. https://chromestatus.com/features/5728570678706176 - I assume this is blocking on that?

Is there anything in particular that you would like our help with?

Discussed May 1, 2021 (See Github)

Ken: this is also moving along ... article from google ...

Dan: At this point I don't see why we shouldn't close the issue given we have answers to the spoofing concerns.

Rossen: Sure, let's close it.

Spoofing from article by Google
Giving sites partial control of the title bar leaves room for developers to spoof content in what was previously a trusted, browser-controlled region. Currently, in Chromium browsers, standalone mode includes a title bar which on initial launch displays the title of the webpage on the left, and the origin of the page on the right (followed by the "settings and more" button and the window controls). After a few seconds, the origin text disappears. If the browser is set to a right-to-left (RTL) language, this layout is flipped such that the origin text is on the left. This opens the window controls overlay to spoof the origin if there is insufficient padding between the origin and the right edge of the overlay. For example, the origin "evil.ltd" could be appended with a trusted site "google.com", leading users to believe that the source is trustworthy. The plan is to keep this origin text so that users know what the origin of the app is and can ensure that it matches their expectations. For RTL configured browsers, there must be enough padding to the right of the origin text to prevent a malicious website from appending the unsafe origin with a trusted origin.

Comment by @kenchris May 12, 2021 (See Github)

Since last, we see that "display_override" has shipped in Edge and Chrome.

Google also made an article about it here: https://web.dev/window-controls-overlay/

Comment by @kenchris May 12, 2021 (See Github)

From the article:

Spoofing # Giving sites partial control of the title bar leaves room for developers to spoof content in what was previously a trusted, browser-controlled region. Currently, in Chromium browsers, standalone mode includes a title bar which on initial launch displays the title of the webpage on the left, and the origin of the page on the right (followed by the "settings and more" button and the window controls). After a few seconds, the origin text disappears. If the browser is set to a right-to-left (RTL) language, this layout is flipped such that the origin text is on the left. This opens the window controls overlay to spoof the origin if there is insufficient padding between the origin and the right edge of the overlay. For example, the origin "evil.ltd" could be appended with a trusted site "google.com", leading users to believe that the source is trustworthy. The plan is to keep this origin text so that users know what the origin of the app is and can ensure that it matches their expectations. For RTL configured browsers, there must be enough padding to the right of the origin text to prevent a malicious website from appending the unsafe origin with a trusted origin.

Comment by @atanassov May 12, 2021 (See Github)

During our May 2021 vf2f @torgo, @kenchris and myself took another look at this issue. Overall we are still concerned about the lack of multistakeholder interest. At the same time there has been sufficient efforts made to ensure our concerns about spoofing have been addressed, thus we are happy to close the issue. Good luck and thank you for working with TAG.