Terrar.js
An efficient and permeable alternative to iframes.
Disclaimer
This project is a prototype, it has not been through any audit and is even not well tested. DO NO USE IN PRODUCTION.
If you're interested in this repo, please give it a start
Introduction
Terrar.js offers HTML, CSS and JS isolations by using :
- the SES library to create rights-less JS compartements
- the native
Proxy
class to create parent-jailedHTMLElement
objects - the native Shadow DOM API to create HTML & CSS isolated contexts
- the Esprima library to prevent the encapsulated context from accessing disallowed objects
Installation
For server-side usage (NodeJS), Terrar.js can be installed like any NPM package :
npm install terrar
And then you can import it in your scripts using :
import "terrar";
For client-side usage (browser), simply put this <script>
tag inside of your HTML document :
<script src="https://unpkg.com/terrar@latest"></script>
Usage
Like iframes, Terrar frames are a client-side way of isolating some content from the main context. However Terrar frames support SSR, which means that you can pre-populated frames with content generated on server side to reduces the amount of requests the page has to perform.
From JS
const content = `<!-- Your isolated HTML here -->`
terrar.createFrame(content)
From HTML
...
<terrar-frame src="https://isolated-content.here/index.html"></terrar-frame>
...
or
...
<terrar-frame>
<template>
<!-- Your isolated HTML here -->
</template>
</terrar-frame>
...
Configuration
The preview Usage section simply shows how to insert an HTML content into a Terrar frame using the default configurations.
If the default configuration should fit most use cases, each Terrar frame can be me manually fine-grained configured to :
- allow / restrict the usage of some tags
- allow / restrict the usage of some properties
- expose / hide function from the main context
Limitations
Since Terrar.js createx SES compartement instead of a whole new Realm (a new JS context) like iframes, at lot of external ressources may not lot because of their CORS policy.
So Terrar.js is especially useful with :
- Contents you own but don't trust (e.g. user-provided HTML content)
- Contents you dynamically generate from JS and want to prevent collisions between them