Since plugins are simply web pages embedded in a sandboxed iframe within Front, how you authenticate users of the plugin is entirely up to you (OAuth, email/password, token etc.). Session storage with cookies will work as you might expect with any web browser.
However, for added security you might also consider the following options.
Restricting the domains that are allowed to embed your plugin is a simple way to ensure that your plugin is not used outside your preferred contexts. Additionally, if you are trying to embed a web page that has an existing content security policy in place, you will need to update that page’s content security policy accordingly.
frame-ancestors directive should be updated as follows:
Content-Security-Policy: frame-ancestors https://*.frontapp.com https://*.frontapplication.com;
To verify that your plugin is being requested by Front, you can check the
auth_secret query parameter when your plugin is rendered. The
auth_secret can be found in your plugin settings, and will be sent as a query parameter whenever Front renders your plugin. You can add it as a config var in your app, and then check against the
auth_secret query param.
Auth secrets are unique for each app
Auth secrets are unique to each instance of an app. This means that token verification is best suited for verifying the source of traffic for a custom plugin created for one Front customer instance. If you are creating a plugin app that will be published and available for all Front customers to use, you will not have a consistent set of auth secrets to check against. Future improvements are planned for handling this scenario, but for now you should use alternative security checks.
// In your web server, before serving the plugin HTML, get the auth_secret from the plugin's URL and verify that it matches the one saved.
const frontPluginSecret = req.query.auth_secret;
// If the auth_secret does not match, the plugin does not come from Front.
if (frontPluginSecret !== process.env.FRONT_PLUGIN_SECRET)
// ...proceed with the request.
// Access the current url of the page, there are many ways to do that
// this shows one example using the `window` object.
var url = new URL(window.location.href);
// The query param will be attached to the url of the current page
// and you can access it via `auth_secret`
var authToken = url.searchParams.get('auth_secret');
Updated 10 months ago