@missing-elements/h5p-embed 0.3.1 → 0.4.0

package/README.md

@@ -66,10 +66,14 @@ It works at a domain's root or under a path, over https. Serve `h5p-sw.js` with
 | `preload=auto` | Start fetching media at once |
 | `activity-id=<IRI>` | The xAPI object id, instead of the package URL |
 | `custom-css=<url>` | A stylesheet loaded into the content |
+| `lang=<tag>` | The language of H5P's own buttons and dialogs, such as `de` or `pt-BR`. Default: English |
 | `xapi=<origin>` | Relay statements to the embedding page |
 
-A custom script and a learner's name cannot be set on the address. Opened unframed, the page asks
-before playing a package from another origin unless `--packages` names it.
+A custom script and a learner's name cannot be set on the address. Opened unframed, the page plays
+a package from another origin `untrusted` unless `--packages` names it: none of the package's own
+code runs, its libraries come from this domain's pack or `--default-libraries` (never from the
+address's `libraries=`), and a button offers to play it with its own scripts only when it needs
+them.
 
 ## Messages
 
@@ -112,7 +116,7 @@ page's script, which reads the page's `<h5p-player>`, `#loader` and `#notice` (s
 `site/index.html` and `site/embed.css`). Its options: `librariesPack` (the URL `libraries=pack`
 names), `packages` (allowed origins, `null` for any), `defaultLibraries`, `runtime` (the
 `@missing-elements/h5p-runtime` export, for a bundled element) and `askInOwnFrame` (default
-`true`; `false` skips the click when a same-origin page frames it).
+`true`; `false` plays a package from another origin as it is when a same-origin page frames it).
 
 ```js
 import '@missing-elements/h5p-offline-player'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@missing-elements/h5p-embed",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Self-hosted H5P embeds: writes the H5P embed page as a static site for a player domain of your own, then any site frames it with an iframe and one script line. No H5P server, no third-party service; optional allowlists for package hosts and embedding sites.",
   "license": "MIT",
   "repository": {
@@ -44,8 +44,8 @@
   ],
   "dependencies": {
     "@missing-elements/h5p-libraries": "^0.1.1",
-    "@missing-elements/h5p-offline-player": "^0.6.1",
-    "@missing-elements/h5p-runtime": "^0.1.1"
+    "@missing-elements/h5p-offline-player": "^0.7.0",
+    "@missing-elements/h5p-runtime": "^0.1.2"
   },
   "devDependencies": {
     "@types/node": "^26.6.4",

package/site/embed.js

@@ -7,7 +7,7 @@
  *
  *   ?src=<package url>[&libraries=pack|<url> …|none][&preload=auto][&xapi=<parent origin>]
  *    [&frame][&copyright][&export][&icon][&reporting][&fullscreen=off]
- *    [&activity-id=<IRI>][&custom-css=<stylesheet url>]
+ *    [&activity-id=<IRI>][&custom-css=<stylesheet url>][&lang=<language tag>]
  *
  * Upward it speaks H5P's own resizer protocol — the `hello` / `resize` exchange that h5p.org's
  * embed code and its `h5p-resizer.js` use — so a page that already resizes h5p.org iframes
@@ -26,15 +26,17 @@ const PACK_CDN_ORIGIN = 'https://cdn.jsdelivr.net'
  * @param {string | null} [options.librariesPack] the URL of a copy of `@missing-elements/h5p-libraries`
  *   on this site, which `libraries=pack` names; without one, `pack` is the element's copy on jsDelivr
  * @param {string[] | null} [options.packages] the origins packages and library bundles may come
- *   from, besides this page's own; `null` plays any, asking first when the storage is this origin's
+ *   from, besides this page's own; `null` plays any, one from another origin `untrusted` when the
+ *   storage is this origin's
  * @param {string | null} [options.defaultLibraries] the `libraries` value for an address that has
  *   none — `pack` or URLs, as the parameter — so a snippet without `&libraries=` still plays
  *   an export that carries no libraries; `&libraries=none` turns it off for one address
  * @param {object | null} [options.runtime] the `runtime` export of `@missing-elements/h5p-runtime`,
  *   for a page that bundles the element; without it the element looks for `frame-assets/` beside itself
- * @param {boolean} [options.askInOwnFrame] whether a package from another origin waits for a click
- *   when this page is framed by a page of its own origin, whose storage it shares. A site whose
- *   own preview frames the page for a package the visitor just chose passes `false`
+ * @param {boolean} [options.askInOwnFrame] whether a package from another origin plays `untrusted`,
+ *   with a click to play it with its own code when it needs that, when this page is framed by a
+ *   page of its own origin, whose storage it shares. A site whose own preview frames the page for
+ *   a package the visitor just chose passes `false`
  */
 export function startEmbed({ librariesPack = null, packages = null, defaultLibraries = null, runtime = null, askInOwnFrame = true } = {}) {
   const params = new URLSearchParams(location.search)
@@ -166,8 +168,16 @@ export function startEmbed({ librariesPack = null, packages = null, defaultLibra
 
   /* ---------------------------------------------------------------- errors, and Safari */
 
+  /** Asks whether to play an untrusted package with its own code; set when one is played so. */
+  let askToTrust = null
+
   player.addEventListener('error', (event) => {
-    const { code, message } = event.detail
+    const { code, message, missingLibraries } = event.detail
+    // Played untrusted, it cannot do without its own copy of a library: a click decides.
+    if (missingLibraries?.carried && player.untrusted && askToTrust) {
+      askToTrust()
+      return
+    }
     if (code === 'no-worker' && framed) {
       // Detected, not sniffed: a browser, an in-app one or a page that is not https may give a
       // frame no Service Worker, and the player cannot run without one. Safari does allow it.
@@ -243,9 +253,10 @@ export function startEmbed({ librariesPack = null, packages = null, defaultLibra
    * The element's display options, by their attribute names, for the embedding page to ask for:
    * `&frame&copyright&export` shows H5P's action bar with those buttons, `&fullscreen=off` takes
    * that one away, `&activity-id=` names the statements' object and `&custom-css=` restyles the
-   * content to the embedding site's taste. Not `custom-js`, `embed-code` or `user`: a script is
-   * a capability on this origin that a link should not hand out, the embed is the embed, and a
-   * learner's name has no place in a URL.
+   * content to the embedding site's taste. `&lang=` is the embedding page's language, which this
+   * page cannot read across origins: H5P's own buttons and dialogs follow it. Not `custom-js`,
+   * `embed-code` or `user`: a script is a capability on this origin that a link should not hand
+   * out, the embed is the embed, and a learner's name has no place in a URL.
    */
   const applyOptions = () => {
     for (const name of ['frame', 'copyright', 'export', 'icon', 'reporting']) {
@@ -256,6 +267,8 @@ export function startEmbed({ librariesPack = null, packages = null, defaultLibra
       const value = params.get(name)?.trim()
       if (value) player.setAttribute(name, value)
     }
+    const lang = params.get('lang')?.trim().replaceAll('_', '-')
+    if (lang && /^[A-Za-z]{2,8}(?:-[A-Za-z0-9]{1,8})*$/.test(lang)) player.setAttribute('lang', lang)
   }
 
   const start = (value, libraries) => {
@@ -308,25 +321,44 @@ export function startEmbed({ librariesPack = null, packages = null, defaultLibra
     return
   }
 
-  // A host on the list was vouched for when the site was set up; anything else from another
-  // origin waits for a click when it would share this origin's storage.
+  // A host on the list was vouched for when the site was set up, and in another site's frame the
+  // storage is that site's own: those play as they are.
   if (origin === location.origin || allowed || !sharesOriginStorage()) {
     start(src, sources.value)
     return
   }
-  loader.hidden = true
+
+  // Anything else from another origin would share this origin's storage. It plays untrusted, as
+  // data with the library pack's code and none of its own, and waits for a click that names the
+  // host only when it cannot play without its own, or there is no pack to play it with.
   const host = new URL(src, location.href).host || origin
-  const button = document.createElement('button')
-  button.type = 'button'
-  button.textContent = 'Open the package'
-  button.addEventListener('click', () => {
-    say('')
-    loader.hidden = false
-    start(src, sources.value)
-  })
-  say(
-    `This link opens a package from ${host}. A package runs its own scripts on this site, and they ` +
-      'can read what other packages saved in this browser. Open it only if you trust that site.'
-  )
-  notice.append(' ', button)
+  askToTrust = () => {
+    loader.hidden = true
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.textContent = 'Open with its own scripts'
+    button.addEventListener('click', () => {
+      say('')
+      loader.hidden = false
+      player.untrusted = false
+      player.removeAttribute('src')
+      start(src, sources.value)
+    })
+    say(
+      `This package from ${host} plays only with its own scripts. They would run on this site and ` +
+        'could read what other packages saved in this browser. Open it only if you trust that site.'
+    )
+    notice.append(' ', button)
+  }
+  // The address's `libraries=` is the link-writer's as much as its `src`, and a bundle's code runs
+  // as the host's own: an untrusted package plays with this site's sources alone, the page's
+  // default or its pack, and the address's only once the click has trusted it.
+  const own = defaultLibraries?.trim() ? librarySources(defaultLibraries.trim()).value : ''
+  const pack = own || librarySources('pack').value
+  if (!pack) {
+    askToTrust()
+    return
+  }
+  player.untrusted = true
+  start(src, pack)
 }