Initial Considerations

To embed the isolated functionality in the customer Toqio version, we use I-Frames with some initial considerations:

Nothing related to cards will be allowed unless the customer is PCI too.
Functionality must be completely stand-alone or self-isolated. It would be a new section in the menu and all the features must be run inside the section.
As said, the I-frames will sit on a new screen with a new route. For example, if a customer wants to add loyalty functionality, Toqio will create the FE a new route /loyalties and will add the I-frame with the URL given.
The code that will be rendered in the I-frame will require a security review by our team before being launched into production.

Authorisation

Toqio will add the new feature to the ON/OFF system, so in case the customer wants to offer the feature we can enable it on demand.

A permission system will be agreed upon between the customer and Toqio to manage access to the new feature by Toqio's front end and to secure the endpoints on both the customers' side and Toqio's side.

Technical Considerations and Security:

I-frames have a bad reputation for being a security risk, and maybe this was true in the past, but nowadays there are a lot of ways to make an I-frame secure. Also, there are plenty of companies that use i-frames for integrations such as Facebook, Spotify, Paypal, etc.

Security Risks

The i-frame element may be a security risk. ifyour site is embedded inside an i-frame on a hostile site, which won't be the case. Note that it does not matter if you use <iframe> or not. The only real protection from this attack is to add the HTTP header x-frame-options: DENY.

Security of <iframe src="..."> tag is equal to <img src="..."> or <a href="..."> as long as there are no vulnerabilities in the browser. And if there's a suitable vulnerability, it might be possible to trigger it even without using <iframe>, <img>, or <a> elements, so it's not worth considering for this issue.

Also, i-frames have an extra security prop sandbox where you can list the features that will be allowed or prohibited within the iframe. Here's a small list of which features you can control:

allow-forms: allows form submission.
allow-modals: allows to open modal windows.
allow-top-navigation: allows the I-frame content to navigate its top-level browsing context.

You can check the full list here.

Knowing exactly what the customer wants, we can create a custom I-frame allowing only what the customer needs and nothing else. As long as we know the source code and we restrict everything else, i-frames are secure.

Limitations

There are some usability topics that can disable certain functions and must be known beforehand. These include:

Making the 'Back' button unusable, this button should be inserted within the I-frame and will work inside the I-frame only.
Affecting access for visually impaired users.
Affecting aesthetics by disregarding style sheets.
Affecting navigation when the source URL changes or stops working.
Access to some device-based features is not allowed, such as accessing the camera from an I-frame in iOS.
I-frames can mess up your SEO by making it harder to crawl and index pages. Algorithms are designed to read one page and recognise only one URL at a time. They run into trouble when they encounter one page with several URLs. Google claims to be working on the issue, but it's still a hit-or-miss prospect. In this particular case, since the i-frames will be in no-index pages, and the SEO is not relevant because most of the features will sit after login, it s not an issue unless the I-frame needs to be positioned and sits in pre-login pages such as the login page, the registration form, terms and conditions, or privacy policy pages. However, these are not pages that are typically relevant for SEO purposes.

Reselling

Besides the technical considerations above we are also proposing our customers use this embedded functionality to generate a new revenue channel by adding their features to Toqio’s marketplace. This will allow Toqio to offer the service provided in the embedded functionality to other customers, doing a pre-selling service, and later putting our customers in touch to agree on the commercial conditions between the parties.