@aquera/nile-elements 1.9.8 → 1.9.9

package/dist/src/nile-wysiwyg-editor/engine/plugins/style-block-view.js

@@ -0,0 +1,174 @@
+/** Content root the editor mounts the document under. Author CSS is scoped to
+ * it so a rule such as `div { background: green }` styles the content only and
+ * can never paint the editor chrome (toolbar, panels, surface) that shares the
+ * same shadow root. */
+const CONTENT_SCOPE = '.ProseMirror';
+/** Advances past a quoted string starting at `i` (the opening quote), honoring
+ * backslash escapes; returns the index just after the closing quote. */
+function skipString(css, i) {
+    const quote = css[i];
+    i += 1;
+    while (i < css.length) {
+        if (css[i] === '\\') {
+            i += 2;
+            continue;
+        }
+        if (css[i] === quote)
+            return i + 1;
+        i += 1;
+    }
+    return i;
+}
+/** Splits on a top-level separator, ignoring ones inside (), [] or strings. */
+function splitTopLevel(str, sep) {
+    const parts = [];
+    let depth = 0;
+    let buf = '';
+    for (let i = 0; i < str.length; i += 1) {
+        const c = str[i];
+        if (c === '"' || c === "'") {
+            const end = skipString(str, i);
+            buf += str.slice(i, end);
+            i = end - 1;
+            continue;
+        }
+        if (c === '(' || c === '[')
+            depth += 1;
+        else if (c === ')' || c === ']')
+            depth -= 1;
+        if (c === sep && depth === 0) {
+            parts.push(buf);
+            buf = '';
+            continue;
+        }
+        buf += c;
+    }
+    parts.push(buf);
+    return parts;
+}
+/** Confines one complex selector to the content root. `html`/`body`/`:root`
+ * map onto the root itself. */
+function scopeSelector(selector, scope) {
+    const sel = selector.trim();
+    if (!sel)
+        return sel;
+    if (/^(?:html|body|:root)$/i.test(sel))
+        return scope;
+    const root = sel.match(/^(?:html|body|:root)\b\s*/i);
+    return root ? `${scope} ${sel.slice(root[0].length)}`.trim() : `${scope} ${sel}`;
+}
+/** Confines a comma-separated selector list to the content root. */
+function scopeSelectorList(list, scope) {
+    return splitTopLevel(list, ',')
+        .map(part => scopeSelector(part, scope))
+        .filter(Boolean)
+        .join(', ');
+}
+const NESTED_AT_RULES = new Set(['media', 'supports', 'container', 'layer', 'scope']);
+/**
+ * Scopes every rule in a CSS block to the content root by prefixing selectors,
+ * keeping each declaration block **verbatim**. Declarations are never re-parsed
+ * (a CSSOM round-trip drops `var()` inside shorthands, e.g. gradient text), and
+ * strings/nested braces are tracked so `content: "}"` can't derail it. Nested
+ * conditionals (`@media`, `@supports`, …) recurse; other at-rules
+ * (`@keyframes`, `@font-face`, …) pass through untouched.
+ */
+function scopeBlock(css, scope) {
+    let out = '';
+    let i = 0;
+    const n = css.length;
+    while (i < n) {
+        let j = i;
+        while (j < n) {
+            const c = css[j];
+            if (c === '"' || c === "'") {
+                j = skipString(css, j);
+                continue;
+            }
+            if (c === '{' || c === ';')
+                break;
+            j += 1;
+        }
+        if (j >= n) {
+            out += css.slice(i);
+            break;
+        }
+        if (css[j] === ';') {
+            // A statement at-rule (e.g. a stray @charset) — keep verbatim.
+            out += css.slice(i, j + 1);
+            i = j + 1;
+            continue;
+        }
+        const prelude = css.slice(i, j).trim();
+        let depth = 1;
+        let k = j + 1;
+        while (k < n && depth > 0) {
+            const c = css[k];
+            if (c === '"' || c === "'") {
+                k = skipString(css, k);
+                continue;
+            }
+            if (c === '{')
+                depth += 1;
+            else if (c === '}')
+                depth -= 1;
+            k += 1;
+        }
+        const body = css.slice(j + 1, k - 1);
+        if (prelude.startsWith('@')) {
+            const name = (prelude.match(/^@([a-z-]+)/i)?.[1] ?? '').toLowerCase();
+            out += NESTED_AT_RULES.has(name)
+                ? `${prelude} {${scopeBlock(body, scope)}}`
+                : `${prelude} {${body}}`;
+        }
+        else if (prelude) {
+            out += `${scopeSelectorList(prelude, scope)} {${body}}`;
+        }
+        i = k;
+    }
+    return out;
+}
+/** Returns author CSS confined to the content root. */
+function scopeCss(css, scope) {
+    if (!css.trim())
+        return '';
+    try {
+        return scopeBlock(css, scope);
+    }
+    catch {
+        return css;
+    }
+}
+/**
+ * Node view for an author `<style>` block. It injects the CSS live — scoped to
+ * the content root — so the styles apply to the document as authored, with no
+ * visible chip. The block itself renders nothing (a hidden `<style>` host); it
+ * round-trips to `<style>` in the output via the schema's toDOM, and the same
+ * raw CSS is what the HTML-source preview renders.
+ */
+export class StyleBlockView {
+    constructor(node) {
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.className = 'nile-wysiwyg__style-block';
+        this.dom.contentEditable = 'false';
+        // A <style> applies regardless of its (display:none) host, so the block is
+        // invisible yet its rules take effect on the content.
+        this.styleEl = document.createElement('style');
+        this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+        this.dom.append(this.styleEl);
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        if (node.attrs.css !== this.node.attrs.css) {
+            this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+        }
+        this.node = node;
+        return true;
+    }
+    ignoreMutation() {
+        return true;
+    }
+}
+//# sourceMappingURL=style-block-view.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/style-block-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-block-view.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/style-block-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { Node as PMNode } from 'prosemirror-model';\nimport { NodeView } from 'prosemirror-view';\n\n/** Content root the editor mounts the document under. Author CSS is scoped to\n * it so a rule such as `div { background: green }` styles the content only and\n * can never paint the editor chrome (toolbar, panels, surface) that shares the\n * same shadow root. */\nconst CONTENT_SCOPE = '.ProseMirror';\n\n/** Advances past a quoted string starting at `i` (the opening quote), honoring\n * backslash escapes; returns the index just after the closing quote. */\nfunction skipString(css: string, i: number): number {\n  const quote = css[i];\n  i += 1;\n  while (i < css.length) {\n    if (css[i] === '\\\\') {\n      i += 2;\n      continue;\n    }\n    if (css[i] === quote) return i + 1;\n    i += 1;\n  }\n  return i;\n}\n\n/** Splits on a top-level separator, ignoring ones inside (), [] or strings. */\nfunction splitTopLevel(str: string, sep: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let buf = '';\n  for (let i = 0; i < str.length; i += 1) {\n    const c = str[i];\n    if (c === '\"' || c === \"'\") {\n      const end = skipString(str, i);\n      buf += str.slice(i, end);\n      i = end - 1;\n      continue;\n    }\n    if (c === '(' || c === '[') depth += 1;\n    else if (c === ')' || c === ']') depth -= 1;\n    if (c === sep && depth === 0) {\n      parts.push(buf);\n      buf = '';\n      continue;\n    }\n    buf += c;\n  }\n  parts.push(buf);\n  return parts;\n}\n\n/** Confines one complex selector to the content root. `html`/`body`/`:root`\n * map onto the root itself. */\nfunction scopeSelector(selector: string, scope: string): string {\n  const sel = selector.trim();\n  if (!sel) return sel;\n  if (/^(?:html|body|:root)$/i.test(sel)) return scope;\n  const root = sel.match(/^(?:html|body|:root)\\b\\s*/i);\n  return root ? `${scope} ${sel.slice(root[0].length)}`.trim() : `${scope} ${sel}`;\n}\n\n/** Confines a comma-separated selector list to the content root. */\nfunction scopeSelectorList(list: string, scope: string): string {\n  return splitTopLevel(list, ',')\n    .map(part => scopeSelector(part, scope))\n    .filter(Boolean)\n    .join(', ');\n}\n\nconst NESTED_AT_RULES = new Set(['media', 'supports', 'container', 'layer', 'scope']);\n\n/**\n * Scopes every rule in a CSS block to the content root by prefixing selectors,\n * keeping each declaration block **verbatim**. Declarations are never re-parsed\n * (a CSSOM round-trip drops `var()` inside shorthands, e.g. gradient text), and\n * strings/nested braces are tracked so `content: \"}\"` can't derail it. Nested\n * conditionals (`@media`, `@supports`, …) recurse; other at-rules\n * (`@keyframes`, `@font-face`, …) pass through untouched.\n */\nfunction scopeBlock(css: string, scope: string): string {\n  let out = '';\n  let i = 0;\n  const n = css.length;\n  while (i < n) {\n    let j = i;\n    while (j < n) {\n      const c = css[j];\n      if (c === '\"' || c === \"'\") {\n        j = skipString(css, j);\n        continue;\n      }\n      if (c === '{' || c === ';') break;\n      j += 1;\n    }\n    if (j >= n) {\n      out += css.slice(i);\n      break;\n    }\n    if (css[j] === ';') {\n      // A statement at-rule (e.g. a stray @charset) — keep verbatim.\n      out += css.slice(i, j + 1);\n      i = j + 1;\n      continue;\n    }\n    const prelude = css.slice(i, j).trim();\n    let depth = 1;\n    let k = j + 1;\n    while (k < n && depth > 0) {\n      const c = css[k];\n      if (c === '\"' || c === \"'\") {\n        k = skipString(css, k);\n        continue;\n      }\n      if (c === '{') depth += 1;\n      else if (c === '}') depth -= 1;\n      k += 1;\n    }\n    const body = css.slice(j + 1, k - 1);\n    if (prelude.startsWith('@')) {\n      const name = (prelude.match(/^@([a-z-]+)/i)?.[1] ?? '').toLowerCase();\n      out += NESTED_AT_RULES.has(name)\n        ? `${prelude} {${scopeBlock(body, scope)}}`\n        : `${prelude} {${body}}`;\n    } else if (prelude) {\n      out += `${scopeSelectorList(prelude, scope)} {${body}}`;\n    }\n    i = k;\n  }\n  return out;\n}\n\n/** Returns author CSS confined to the content root. */\nfunction scopeCss(css: string, scope: string): string {\n  if (!css.trim()) return '';\n  try {\n    return scopeBlock(css, scope);\n  } catch {\n    return css;\n  }\n}\n\n/**\n * Node view for an author `<style>` block. It injects the CSS live — scoped to\n * the content root — so the styles apply to the document as authored, with no\n * visible chip. The block itself renders nothing (a hidden `<style>` host); it\n * round-trips to `<style>` in the output via the schema's toDOM, and the same\n * raw CSS is what the HTML-source preview renders.\n */\nexport class StyleBlockView implements NodeView {\n  dom: HTMLElement;\n\n  private styleEl: HTMLStyleElement;\n\n  constructor(private node: PMNode) {\n    this.dom = document.createElement('div');\n    this.dom.className = 'nile-wysiwyg__style-block';\n    this.dom.contentEditable = 'false';\n\n    // A <style> applies regardless of its (display:none) host, so the block is\n    // invisible yet its rules take effect on the content.\n    this.styleEl = document.createElement('style');\n    this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);\n    this.dom.append(this.styleEl);\n  }\n\n  update(node: PMNode): boolean {\n    if (node.type !== this.node.type) return false;\n    if (node.attrs.css !== this.node.attrs.css) {\n      this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);\n    }\n    this.node = node;\n    return true;\n  }\n\n  ignoreMutation(): boolean {\n    return true;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/engine/plugins/tables.js

@@ -1,4 +1,32 @@
-import { tableEditing, columnResizing } from 'prosemirror-tables';
+import { tableEditing, columnResizing, TableView } from 'prosemirror-tables';
+/**
+ * TableView that also reflects the author's `class`/`id` onto the inner
+ * `<table>` element (the base TableView leaves it bare and puts its own class on
+ * the wrapper div). The attributes round-trip via the schema's toDOM on export;
+ * this makes `table.grid …` style rules match in the live editor too. Passed to
+ * `columnResizing` as its `View`, so column resizing keeps working.
+ */
+class HtmlAttrTableView extends TableView {
+    constructor(node, defaultCellMinWidth) {
+        super(node, defaultCellMinWidth);
+        this.applyHtmlAttrs(node);
+    }
+    applyHtmlAttrs(node) {
+        const htmlClass = node.attrs.htmlClass;
+        const htmlId = node.attrs.htmlId;
+        this.table.className = htmlClass ?? '';
+        if (htmlId)
+            this.table.id = htmlId;
+        else
+            this.table.removeAttribute('id');
+    }
+    update(node) {
+        const updated = super.update(node);
+        if (updated)
+            this.applyHtmlAttrs(node);
+        return updated;
+    }
+}
 /**
  * prosemirror-tables wiring: cell selections, fix-tables normalization, and
  * draggable column resizing (widths persist as `data-colwidth`). The CSS
@@ -6,6 +34,9 @@ import { tableEditing, columnResizing } from 'prosemirror-tables';
  * is inlined in nile-wysiwyg-editor.css.ts.
  */
 export function tablePlugins() {
-    return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];
+    return [
+        columnResizing({ View: HtmlAttrTableView }),
+        tableEditing({ allowTableNodeSelection: true }),
+    ];
 }
 //# sourceMappingURL=tables.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/tables.js.map

@@ -1 +1 @@
-{"version":3,"file":"tables.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/tables.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAElE;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,CAAC,cAAc,EAAE,EAAE,YAAY,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7E,CAAC","sourcesContent":["import { Plugin } from 'prosemirror-state';\nimport { tableEditing, columnResizing } from 'prosemirror-tables';\n\n/**\n * prosemirror-tables wiring: cell selections, fix-tables normalization, and\n * draggable column resizing (widths persist as `data-colwidth`). The CSS\n * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)\n * is inlined in nile-wysiwyg-editor.css.ts.\n */\nexport function tablePlugins(): Plugin[] {\n  return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];\n}\n"]}
+{"version":3,"file":"tables.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/tables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;;;;;GAMG;AACH,MAAM,iBAAkB,SAAQ,SAAS;IACvC,YAAY,IAAY,EAAE,mBAA2B;QACnD,KAAK,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEO,cAAc,CAAC,IAAY;QACjC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAA0B,CAAC;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAuB,CAAC;QAClD,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE,CAAC;QACvC,IAAI,MAAM;YAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC;;YAC9B,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,MAAM,CAAC,IAAY;QACjB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,OAAO;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACvC,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO;QACL,cAAc,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC;QAC3C,YAAY,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;KAChD,CAAC;AACJ,CAAC","sourcesContent":["import { Plugin } from 'prosemirror-state';\nimport { Node as PMNode } from 'prosemirror-model';\nimport { tableEditing, columnResizing, TableView } from 'prosemirror-tables';\n\n/**\n * TableView that also reflects the author's `class`/`id` onto the inner\n * `<table>` element (the base TableView leaves it bare and puts its own class on\n * the wrapper div). The attributes round-trip via the schema's toDOM on export;\n * this makes `table.grid …` style rules match in the live editor too. Passed to\n * `columnResizing` as its `View`, so column resizing keeps working.\n */\nclass HtmlAttrTableView extends TableView {\n  constructor(node: PMNode, defaultCellMinWidth: number) {\n    super(node, defaultCellMinWidth);\n    this.applyHtmlAttrs(node);\n  }\n\n  private applyHtmlAttrs(node: PMNode): void {\n    const htmlClass = node.attrs.htmlClass as string | null;\n    const htmlId = node.attrs.htmlId as string | null;\n    this.table.className = htmlClass ?? '';\n    if (htmlId) this.table.id = htmlId;\n    else this.table.removeAttribute('id');\n  }\n\n  update(node: PMNode): boolean {\n    const updated = super.update(node);\n    if (updated) this.applyHtmlAttrs(node);\n    return updated;\n  }\n}\n\n/**\n * prosemirror-tables wiring: cell selections, fix-tables normalization, and\n * draggable column resizing (widths persist as `data-colwidth`). The CSS\n * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)\n * is inlined in nile-wysiwyg-editor.css.ts.\n */\nexport function tablePlugins(): Plugin[] {\n  return [\n    columnResizing({ View: HtmlAttrTableView }),\n    tableEditing({ allowTableNodeSelection: true }),\n  ];\n}\n"]}

package/dist/src/nile-wysiwyg-editor/engine/pm.test.js

@@ -36,10 +36,26 @@ describe('sanitizeHtml', () => {
     it('unwraps unknown elements but keeps their content', () => {
         expect(sanitizeHtml('<article><p>kept</p></article>')).to.equal('<p>kept</p>');
     });
-    it('drops iframes, styles and forms with content', () => {
-        const out = sanitizeHtml('<iframe src="x"></iframe><style>p{}</style><form><input></form><p>ok</p>');
+    it('drops non-https iframes and forms with content', () => {
+        const out = sanitizeHtml('<iframe src="x"></iframe><form><input></form><p>ok</p>');
         expect(out).to.equal('<p>ok</p>');
     });
+    it('keeps <style> blocks and sanitizes their CSS', () => {
+        const out = sanitizeHtml('<style>@import url("http://evil/x.css"); p{color:red} a{behavior:url(x.htc)} ' +
+            'b{width:expression(alert(1))} c{background:url(http://evil/x.png)}</style><p>ok</p>');
+        expect(out).to.include('<style>');
+        expect(out).to.include('color:red');
+        expect(out).to.include('<p>ok</p>');
+        expect(out).to.not.match(/@import/i);
+        expect(out).to.not.match(/expression\s*\(/i);
+        expect(out).to.not.match(/behavior\s*:/i);
+        expect(out).to.not.match(/url\(\s*['"]?http/i);
+    });
+    it('keeps safe data-image and #fragment url() in <style>', () => {
+        const out = sanitizeHtml('<style>a{background:url(data:image/png;base64,AAAA)} b{clip-path:url(#f)}</style>');
+        expect(out).to.include('url(data:image/png');
+        expect(out).to.include('url(#f)');
+    });
 });
 describe('serializer round-trip', () => {
     const cases = [
@@ -67,6 +83,18 @@ describe('serializer round-trip', () => {
         const doc = htmlToDoc(defaultSchema, '<p><span style="font-weight: 700">x</span></p>');
         expect(docToHtml(doc)).to.include('<strong>');
     });
+    it('round-trips an author <style> block through the schema', () => {
+        const doc = htmlToDoc(defaultSchema, '<style>p{color:red}</style><p>hi</p>');
+        expect(doc.firstChild.type.name).to.equal('styleBlock');
+        const out = docToHtml(doc);
+        expect(out).to.include('<style>');
+        expect(out).to.match(/color:\s*red/i);
+        expect(out).to.include('<p>hi</p>');
+        // Malicious CSS is neutralized on the round-trip, not just at the surface.
+        const evil = docToHtml(htmlToDoc(defaultSchema, '<style>@import url(http://evil);x{color:blue}</style><p>ok</p>'));
+        expect(evil).to.include('<style>');
+        expect(evil).to.not.match(/@import/i);
+    });
     it('detects empty documents', () => {
         expect(isDocEmpty(htmlToDoc(defaultSchema, ''))).to.equal(true);
         expect(isDocEmpty(htmlToDoc(defaultSchema, '<p></p>'))).to.equal(true);
@@ -385,17 +413,30 @@ describe('embeds', () => {
         });
         expect(toEmbedUrl('https://www.loom.com/share/abcdef0123456789abcdef0123456789').provider).to.equal('loom');
     });
-    it('rejects non-provider and non-https URLs', () => {
-        expect(toEmbedUrl('https://evil.example.com/embed/x')).to.equal(null);
+    it('accepts any https URL as a generic embed, rejects non-https', () => {
+        expect(toEmbedUrl('https://example.com/player/x')).to.deep.equal({
+            src: 'https://example.com/player/x',
+            provider: 'generic',
+        });
+        // Lookalike hosts are no longer canonicalized as a provider, just generic.
+        expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x').provider).to.equal('generic');
+        // Non-https is still refused.
         expect(toEmbedUrl('http://www.youtube.com/watch?v=dQw4w9WgXcQ')).to.equal(null);
         expect(toEmbedUrl('javascript:alert(1)')).to.equal(null);
-        expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x')).to.equal(null);
-        expect(isAllowedEmbedSrc('https://evil.com/embed/x')).to.equal(false);
+        expect(isAllowedEmbedSrc('https://example.com/player/x')).to.equal(true);
+        expect(isAllowedEmbedSrc('http://example.com/x')).to.equal(false);
     });
-    it('keeps allowlisted iframes through sanitization, drops the rest', () => {
+    it('keeps any https iframe through sanitization but force-sandboxes it', () => {
         const good = sanitizeHtml('<div data-embed-provider="youtube"><iframe src="https://www.youtube-nocookie.com/embed/abc123xyz"></iframe></div>');
         expect(good).to.include('youtube-nocookie.com/embed');
-        const evil = sanitizeHtml('<iframe src="https://evil.example.com/steal"></iframe><p>ok</p>');
+        expect(good).to.include('sandbox=');
+        // A non-provider https iframe is kept, but sandboxed and cannot navigate the top.
+        const generic = sanitizeHtml('<iframe src="https://example.com/player"></iframe><p>ok</p>');
+        expect(generic).to.include('example.com/player');
+        expect(generic).to.include('sandbox=');
+        expect(generic).to.not.include('allow-top-navigation');
+        // Non-https iframes are still dropped entirely.
+        const evil = sanitizeHtml('<iframe src="http://evil.example.com/steal"></iframe><p>ok</p>');
         expect(evil).to.equal('<p>ok</p>');
     });
     it('round-trips embed nodes', () => {