XF 2.4 PWA Improvements and Enhanced CSRF Protection

XenForo Community PSD Edit (2).webp
PWA Improvements​

Hot on the heels of the improvements announced earlier this week, we have another set of improvements to show you today, again, courtesy of @digitalpoint! This time we'll be focusing on some improvements to Progressive Web Apps which some of you will be familiar with if you're already using the [DigitalPoint] PWA add-on.

Web app manifest editing​

We've been rocking a web app manifest for a while now but starting with XenForo 2.4 you will be able to modify the web app manifest using the new additionalWebAppManifest option:

1743790380014.webp


In addition to adding additional properties, you can also override existing ones. There are various resources which document compatible (and experimental!) options.

JSON: 
{
  "name": "XF 2.4",
  "short_name": "XF 2.4",
  "description": "Community platform by XenForo®",
  "icons": [
    {
      "src": "/data/assets/logo/xenforo-icon-large.png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "/data/assets/logo/xenforo-icon-large.png",
      "sizes": "192x192",
      "purpose": "maskable"
    },
    {
      "src": "/data/assets/logo/xenforo-icon-large.png",
      "sizes": "512x512",
      "purpose": "any"
    },
    {
      "src": "/data/assets/logo/xenforo-icon-large.png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "lang": "en-US",
  "dir": "ltr",
  "display": "standalone",
  "scope": "/",
  "id": "/?_pwa=1",
  "start_url": "/?_pwa=BkGzMt_ojcv1jsEts8Rl26Zca2M1IH9y",
  "background_color": "#ebebeb",
  "theme_color": "#0f578a",
  "orientation": "portrait",
  "categories": [
    "social",
    "lifestyle"
  ]
}

Auto login after PWA installation​

The web manifest now contains special unique token inside the start_url properties which allows users across all browsers to be automatically logged in after the PWA is installed.


Automatic badge counter updates​

Whether you're switching tabs in a normal browser or launching the installed PWA app, in doing so you will now trigger badge counters to update -- meaning no reloading or page navigation is required to update the latest Inbox and Alert counts.


More prominent push notification notice​

When installing the PWA for the first time, the push notification notice will be displayed more prominently:

1743791724771.webp


More reliable push subscriptions​

In some cases, some browsers may "lose" push notification subscriptions under certain conditions. This primarily happens on Safari (macOS and iOS) but, theoretically, this behaviour may eventually come to other browser engines including Chromium-based browsers and Firefox. This relates to the need for push notification subscriptions requiring actual user gestures rather than being triggered programmatically. The push notification subscription logic has been completely overhauled for XenForo 2.4 which will avoid these scenarios - particularly problematic when things like 2FA verification is triggered.

Send push notifications from the admin control panel?​

Strictly speaking this isn't implemented yet. Although we would like your thoughts as to whether this would be a useful addition. DigitalPoint's PWA add-on allows admins to send push notifications to users based on criteria. This is similar to "Alert users", "Email users" and "Message users". It is somewhat duplicative of "Alert users" as this already sends push notifications in addition to alerts to any users who have enabled push notifications. "Push users" could be implemented from the add-on if there are reasonable use cases for it. Just let us know below!
 
Click to expand...

Enhanced CSRF Protection​

While this is also a feature from @digitalpoint's add-on, we're highlighting it separately as we've expanded it to cover more use cases. It's also a more technical, behind-the-scenes change rather than something user-facing.

On supported browsers, we now use Fetch Metadata to mitigate cross-site request forgery (CSRF) attacks, replacing the traditional token-based approach. This is a relatively new feature, but one that's supported by all modern browsers. Older browsers will gracefully fall back to the legacy token method. This change helps avoid common issues with stale tokens, particularly on mobile, or when using edge caches like Cloudflare to serve guest content.

Alongside this, we've eliminated the use of placing tokens in GET requests for state-changing actions (such as logging out). To preserve the same user experience, these actions are now triggered via JavaScript-initiated POST requests. We've also built in graceful degradation. If JavaScript is disabled or a link is accessed directly, users will be presented with a fallback confirmation form.

For developers​

As mentioned, there's a new XF.LinkPostClick handler that lets links trigger POST requests. For example:
HTML: 
<a href="{{ link('route') }}" data-xf-click="link-post">Change state</a>

We've also introduced a RedirectPlugin controller plugin, which displays an auto-submitting interstitial form when redirecting to a state-changing action. For example:
PHP: 
$redirectPlugin = $this->plugin(\XF\ControllerPlugin\RedirectPlugin::class);

return $redirectPlugin->actionPost($this->buildLink('route'));

Lastly, Fetch Metadata is now used to prevent URLs from being embedded as images. This protection is automatic, even without calling the legacy assertNotEmbeddedImageRequest method. If you do need to allow embedding (as we do with attachments), opt out by overriding the optional isAllowedMediaEmbedAction method. For example:
PHP: 
public function isAllowedMediaEmbedAction(
    string $action,
    ParameterBag|null $params = null
): bool
{
    return strtolower($action) === 'index';
}
 
The webmanifest is like the schematic for how your website should be handled as a PWA. Some vendors may look for properties that are non-standard, other properties may be ratified, but not as quickly adopted. Today, it's basically impossible to make micro-adjustments to this "file" without writing your own add-on.
 
Chris D said:
Strictly speaking this isn't implemented yet. Although we would like your thoughts as to whether this would be a useful addition. DigitalPoint's PWA add-on allows admins to send push notifications to users based on criteria. This is similar to "Alert users", "Email users" and "Message users". It is somewhat duplicative of "Alert users" as this already sends push notifications in addition to alerts to any users who have enabled push notifications. "Push users" could be implemented from the add-on if there are reasonable use cases for it. Just let us know below!
Click to expand...
I'd love to see a send push notifications function. Any push message can also be sent by sending an alert. But sometimes it's nicer to only send push, without the alert. I send push notifications (through One Signal) for short general messages that do not relate to any content. For example to let members know that the website has been upgraded and nice new functionality is waiting for them.
It can also be useful to send an push notification if email has bounced.
Push is more effective than email in any case.

It's more of a nice to have. We can use alerts.
 
This should close out a lot of bug reports and suggestions:

eva2000

Implemented Thread 'Compatibility for CSRF protection & Cloudflare full HTML page caching'

I'm curious if there's any better way for CSRF protection that would work with Cloudflare or other CDN's guest full HTML page caching which uses cookies to differentiate between logged in/logged out guest users?

The issue that arises with Xenforo 2.x in CSRF and full page HTML caching is similar to the one outlined by Cloudflare for Magento and includes the workaround Magento did at https://blog.cloudflare.com/the-curious-case-of-caching-csrf-tokens/. Easy work around for register/login, guest posting and guest search and contact links can be made. But a better solution would be...
  • Like

digitalpoint

Confirmed Thread 'Use statechange listener in PWA app'

Have an event listener that fires when the app is loaded so you can refresh CSRF token and/or fetch counters (for conversations and alerts).

K

Fixed Thread 'Logout bug when Guest caching is enabled'

The issue described here https://xenforo.com/community/threads/guest-page-caching.164816/ has been existing for a long time with no resolution .. I tried doing some troubleshooting to see the reason behind it because it was really annoying , I found the bug is very simple
at method PageCache->getCachedPage() .. there is a call $response->replaceHeaders($result['headers']);
result header will typically look like
Code: 
array (size=5)
  'X-Frame-Options' => string 'SAMEORIGIN' (length=10)
  'X-Content-Type-Options' => string 'nosniff' (length=7)
  'Last-Modified' => string...
  • Like
  • Love

digitalpoint

Fixed Thread 'CSRF token not always updated with XF.KeepAlive.refresh()'

Ran into this for something else, but it's also the same reason for this bug report:

xenforo.com

Fixed - Logout bug when Guest caching is enabled

The issue described here https://xenforo.com/community/threads/guest-page-caching.164816/ has been existing for a long time with no resolution .. I tried doing some troubleshooting to see the reason behind it because it was really annoying , I found the bug is very simple at method...
xenforo.com xenforo.com

XF.KeepAlive.refresh() updates XF.config.csrf and hidden input fields containing csrf, but it does not update URLs with t={csrf_token}. Things like Logout button, the advanced cookie consent buttons, language selector, style selector and a few other things.

XF.KeepAlive is an anonymous function so there wasn't a real way to extend it to fix it for now. However I did come up with an extremely hacky way to do it...

digitalpoint

Implemented Thread 'Prominent push notification request if in PWA app'

If the user is in the PWA app, give a more noticeable push notification enable message.

JavaScript: 
XF.alert('Yo, do you want push notifications in this fancy app?  [Yes/No]', '', 'Push notifications available');
  • Like

digitalpoint

Implemented Thread 'Auto log-in user on PWA app'

Instead of _pwa=1, have it be _pwa={some sort of token unique to the user that can log them in automagically} (if it's a logged in user) and then use that token.
  • Like

digitalpoint

Thread '"Lost" push subscriptions for iOS PWA'

Has anyone noticed push subscriptions going away for the PWA app? Noticed it happening not just for my own, but also here at XenForo. At the operating system level, push was still enabled (you can reenable it by going to account preferences and hitting the Enable push notifications button and it does it [doesn't require the permission dialog]).

Digging a little in my databases, the push subscriptions at https://web.push.apple.com went missing in the xf_user_push_subscription table. If it was just my site, I'd say it was something on my end... but like I said, it also...
  • Like

digitalpoint

Thread 'User unsubscribed from push notifications when in admin'

If you are subscribed to push notifications, that subscription is removed from the xf_user_push_subscription when you enter the admin area. There is a mechanism that automatically deletes the user's push subscription record if the user doesn't have a user_id (XF.config.userId) so a user of a browser doesn't get some other user's push notifications if they log out of the browser. Since admin and public are different apps, logging into the admin area gives the user a userId of 0 on the admin login form.

The end result is that you stop receiving push notifications while you are...
  • Like

digitalpoint

Thread 'Better handling of push subscriptions in PWA'

Was logged into the XF PWA app and then changed my password from my computer, which logged my out of PWA as expected (even though I was still getting push notifications). When I logged back into PWA, I realized I wasn’t getting push notifications anymore (and also didn’t get the small notice to enable them). Ended up needing to go digging in account settings in the PWA version to manually re-enable push notifications after logging back in.

Seems like this should be handled better… maybe don’t revoke the push subscription when you log in if you are logging in with the same user account...
 
Chris D said:

Send push notifications from the admin control panel?​

Strictly speaking this isn't implemented yet. Although we would like your thoughts as to whether this would be a useful addition. DigitalPoint's PWA add-on allows admins to send push notifications to users based on criteria. This is similar to "Alert users", "Email users" and "Message users". It is somewhat duplicative of "Alert users" as this already sends push notifications in addition to alerts to any users who have enabled push notifications. "Push users" could be implemented from the add-on if there are reasonable use cases for it. Just let us know below!
Click to expand...
Honestly it's probably not terribly useful unless someday there was a point where notification destinations were abstracted out (where push notifications aren't tied to alerts).

digitalpoint

Thread 'Abstract notification destinations'

By default XenForo has 3 (that I can think of) types of notification destinations:
  • XenForo Alerts
  • Push
  • Email (for some things)
They are all independent methods/destinations, but serve the same general purpose.

So what if XenForo had an alert system that had notification destinations for each user? The xf_user_push_subscription table is already a one-to-many relationship (each user can have multiple push destinations), so it could be done with the addition of one more column in that table (a destination handler identifier)

This would allow notification...
  • Like
 
There is one use case for direct Push notifications that is very valuable: Currently I send Push notifications to guests trough One Signal. 95% of our traffic is guests. Many people do not want to register a forum account, but they do accept Push notifications. 70% of Push subscribers are guests. This offers an unique opportunity to communicate with your guests. I have sent them various messages about the site, registration benefits, social media and even successfully invited a bunch of them to follow us on Patreon. This resulted in donations.

While not directly what you were asking for, it's an amazing and IMHO very valuable and useful use case for sending push notifications directly to the user.
 

Similar threads

eva2000
  • Suggestion Suggestion
Implemented Compatibility for CSRF protection & Cloudflare full HTML page caching
2
Replies
31
Views
5K
Jeremy P
Jeremy P
mjda
  • Solved
XF 2.2 Disable CSRF protection for single URL?
Replies
5
Views
518
iNnOceNtbOy
iNnOceNtbOy
researcher
XF 2.1 How can I disable the CSRF protection?
Replies
4
Views
996
researcher
researcher
Jean-Baptiste
XF 2.0 Disable CSRF protection on login & register
Replies
1
Views
862
Robust
Robust
Back
Top Bottom