trix_embed 0.0.2 → 0.0.4

data/app/javascript/forms.js

@@ -0,0 +1,134 @@
+import { trixEditorTagName } from './media'
+import { createURLObject } from './urls'
+
+let _patch
+let _observer
+
+const protectedForms = new Set()
+const trixEmbedSelector = `${trixEditorTagName}[data-controller~="trix-embed"]`
+
+function makeKey(form) {
+  let { method, action } = form || {}
+  action = createURLObject(action)?.pathname || action
+  return `${method}:${action}`.trim().toLowerCase()
+}
+
+function protect(form, input) {
+  if (!form) return
+  const key = makeKey(form)
+  protectedForms.add({ key, form, input })
+}
+
+function shouldSubmit(form) {
+  const key = makeKey(form)
+  const list = [...protectedForms].filter(f => f.key === key)
+
+  // form is not protected
+  if (!list.length) return true
+
+  // form contains a trix-embed and it's currently pasting
+  if (form.trixEmbedPasting) return false
+
+  // form contains a trix-embed and it's not currently pasting
+  if (form.querySelector(trixEmbedSelector)) return true
+
+  // form is protected but does not contain a trix-embed
+  // prevent submit if any of the following conditions are true
+  //
+  // - the form data includes a protected key
+  // - the form action includes a protected querystring key
+  //
+  const data = new FormData(form)
+  const params = createURLObject(form.action)?.searchParams || new URLSearchParams()
+  const inputs = list.map(item => item.input)
+  const checks = inputs.map(input => {
+    if (input.name) {
+      if (data.has(input.name)) return false
+      if (params.has(input.name)) return false
+    }
+
+    if (input.id) {
+      if (data.has(input.id)) return false
+      if (params.has(input.id)) return false
+    }
+
+    return true
+  })
+  if (checks.includes(false)) return false
+  return true
+}
+
+function submit(event) {
+  if (shouldSubmit(event.target)) return
+  event.preventDefault()
+}
+
+function monitor(form) {
+  form.removeEventListener('submit', submit, true)
+  form.addEventListener('submit', submit, true)
+}
+
+function patch() {
+  if (_patch) return
+
+  const orig = Document.prototype.createElement
+
+  _patch = {
+    value: function () {
+      const element = orig.apply(this, arguments)
+
+      try {
+        const tagName = String(arguments[0]).toUpperCase()
+        if (tagName === 'FORM') monitor(element)
+      } catch {}
+
+      return element
+    },
+    configurable: false
+  }
+
+  Object.defineProperty(Document.prototype, 'createElement', _patch)
+}
+
+function observe(attempt = 0) {
+  if (!document.body && attempt < 10) return setTimeout(() => observe(attempt + 1), 50)
+
+  if (_observer) return
+
+  _observer = new MutationObserver(mutations =>
+    mutations.forEach(mutation =>
+      mutation.addedNodes.forEach(node => {
+        if (node instanceof HTMLFormElement) monitor(node)
+      })
+    )
+  )
+
+  _observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  })
+}
+
+addEventListener('load', () => observe())
+patch()
+observe()
+
+// monitor all forms
+document.querySelectorAll('form').forEach(form => monitor(form))
+
+// TODO: protect XHR POST requests
+// addEventListener('readystatechange', event => {
+//   const xhr = event.target
+//   if (xhr instanceof XMLHttpRequest && xhr.readyState === 1) {
+//     // if (should not submit)
+//     // xhr.send = xhr.abort
+//   }
+// })
+
+// TODO: protect fetch POST requests
+// addEventListener('fetch', event => {
+//   // if (should not submit)
+//   // event.preventDefault()
+// })
+
+export { protect as protectForm }

data/app/javascript/guard.js

@@ -1,64 +1,46 @@
-const submitGuards = {}
+import { protectForm } from './forms'
 
 export default class Guard {
   constructor(controller) {
     this.controller = controller
-    controller.element.addEventListener('trix-file-accept', event => event.preventDefault())
   }
 
-  protectSubmit = event => {
-    const form = this.controller.formElement
-    const f = event.target.closest('form')
-    if (f && f.action === form.action && f.method === form.method && f !== form) event.preventDefault()
+  preventAttachments() {
+    this.editor?.removeAttribute('data-direct-upload-url')
+    this.editor?.removeAttribute('data-blob-url-template')
+    this.editor?.addEventListener('trix-file-accept', event => event.preventDefault(), true)
+    this.toolbar?.querySelector('[data-trix-button-group="file-tools"]')?.remove()
   }
 
-  protect() {
-    if (!this.controller.formElement) return
-    const form = this.controller.formElement
-    const input = this.controller.inputElement
-    const key = `${form.method}${form.action}`
+  async preventLinks() {
+    const allowed = await this.controller.allowedLinkHosts
+    const blocked = await this.controller.blockedLinkHosts
+    if (!blocked.length && allowed.includes('*')) return
+    this.toolbar?.querySelector('[data-trix-action="link"]')?.remove()
+  }
 
-    document.removeEventListener('submit', handlers[key], true)
-    handlers[key] = this.protectSubmit.bind(this)
-    document.addEventListener('submit', handlers[key], true)
+  protect(attempt = 0) {
+    if (!this.toolbar && attempt < 10) return setTimeout(() => this.protect(attempt + 1), 25)
 
-    const observer = new MutationObserver((mutations, observer) => {
-      mutations.forEach(mutation => {
-        const { addedNodes, target, type } = mutation
+    this.preventAttachments()
+    this.preventLinks()
 
-        switch (type) {
-          case 'attributes':
-            if (target.closest('form')?.action === form.action)
-              if (target.id === input.id || target.name === input.name) target.remove()
-            break
-          case 'childList':
-            addedNodes.forEach(node => {
-              if (node.nodeType === Node.ELEMENT_NODE) {
-                if (node.tagName.match(/^form$/i) && node.action === form.action) node.remove()
-                if (target.closest('form')?.action === form.action)
-                  if (node.id === input.id || node.name === input.name) node.remove()
-              }
-            })
-            break
-        }
-      })
-    })
+    if (this.form) protectForm(this.form, this.input)
+  }
 
-    observer.observe(document.body, {
-      attributeFilter: ['id', 'name'],
-      attributes: true,
-      childList: true,
-      subtree: true
-    })
+  get editor() {
+    return this.controller.element
   }
 
-  cleanup() {
-    const trix = this.controller.element
-    const input = this.controller.inputElement
-    const toolbar = this.controller.toolbarElement
+  get toolbar() {
+    return this.controller.toolbarElement
+  }
+
+  get form() {
+    return this.controller.formElement
+  }
 
-    input?.remove()
-    toolbar?.remove()
-    trix?.remove()
+  get input() {
+    return this.controller.inputElement
   }
 }

data/app/javascript/index.js

@@ -1,6 +1,9 @@
+import metadata from './metadata'
 import { generateKey, encryptValues, generateKeyAndEncryptValues } from './encryption'
 import { getTrixEmbedControllerClass } from './controller'
 
+let initialized = false
+
 const defaultOptions = {
   application: null,
   Controller: null,
@@ -8,15 +11,18 @@ const defaultOptions = {
 }
 
 function initialize(options = defaultOptions) {
+  if (initialized) return
   const { application, Controller, Trix } = options
   application.register('trix-embed', getTrixEmbedControllerClass({ Controller, Trix }))
+  initialized = true
 }
 
 self.TrixEmbed = {
-  initialize,
-  generateKey,
+  ...metadata,
   encryptValues,
-  generateKeyAndEncryptValues
+  generateKey,
+  generateKeyAndEncryptValues,
+  initialize
 }
 
 export default self.TrixEmbed

data/app/javascript/media.js

@@ -1,4 +1,10 @@
-import { createURL } from './urls'
+import { createURLObject } from './urls'
+
+// Matches server side configuration
+// SEE: lib/trix_embed/engine.rb
+export const trixEmbedMediaTypes = {
+  attachment: 'trix-embed/attachment'
+}
 
 const audioMediaTypes = {
   mp3: 'audio/mpeg', // MP3 audio format
@@ -74,6 +80,10 @@ const tagsWithSrcAttribute = [
   'use' // SVG: Reuse shapes from other documents
 ]
 
+// TODO: move to schema.js
+export const trixEditorTagName = 'trix-editor'
+export const trixAttachmentTagName = 'action-text-attachment'
+
 export const mediaTags = tagsWithHrefAttribute.concat(tagsWithSrcAttribute)
 
 export function isAudio(url) {
@@ -91,7 +101,7 @@ export function isVideo(url) {
 export function getMediaType(value) {
   let url
 
-  createURL(value, u => (url = u))
+  url = createURLObject(value)
   if (!url) return null
 
   const index = url.pathname.lastIndexOf('.')

data/app/javascript/metadata.js

@@ -0,0 +1,4 @@
+// This file is auto-generated by bin/build.mjs
+export default {
+  version: '0.0.4'
+}

data/app/javascript/renderer.js

@@ -1,6 +1,95 @@
-import { createURL, extractURLHosts } from './urls'
-import { isImage, getMediaType } from './media'
-import { getTemplate } from './templates'
+import { createURLObject, extractURLHosts } from './urls'
+import { isImage, getMediaType, trixAttachmentTagName, trixEmbedMediaTypes } from './media'
+import templates from './templates'
+
+// Matches server side configuration
+// SEE: TrixEmbed::Attachment::ALLOWED_TAGS (app/models/trix_embed/attachment.rb)
+const ALLOWED_TAGS = [
+  trixAttachmentTagName,
+  'a',
+  'abbr',
+  'acronym',
+  'address',
+  'b',
+  'big',
+  'blockquote',
+  'br',
+  'cite',
+  'code',
+  'dd',
+  'del',
+  'dfn',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'figcaption',
+  'figure',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ins',
+  'kbd',
+  'li',
+  'ol',
+  'p',
+  'pre',
+  'samp',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'sup',
+  'time',
+  'tt',
+  'ul',
+  'var'
+]
+
+// Matches server side configuration
+// SEE: TrixEmbed::Attachment::ALLOWED_ATTRIBUTES (app/models/trix_embed/attachment.rb)
+const ALLOWED_ATTRIBUTES = [
+  'abbr',
+  'allow',
+  'allowfullscreen',
+  'allowpaymentrequest',
+  'alt',
+  'caption',
+  'cite',
+  'content-type',
+  'credentialless',
+  'csp',
+  'data-trix-embed',
+  'data-trix-embed-error',
+  'data-trix-embed-prohibited',
+  'data-trix-embed-warning',
+  'datetime',
+  'filename',
+  'filesize',
+  'height',
+  'href',
+  'lang',
+  'loading',
+  'name',
+  'presentation',
+  'previewable',
+  'referrerpolicy',
+  'sandbox',
+  'sgid',
+  'src',
+  'srcdoc',
+  'title',
+  'url',
+  'width',
+  'xml:lang'
+]
 
 export default class Renderer {
   // Constructs a new Renderer instance
@@ -11,50 +100,40 @@ export default class Renderer {
     this.initializeTempates()
   }
 
-  initializeTempates() {
-    const templates = ['error', 'exception', 'header', 'iframe', 'image']
-    templates.forEach(name => this.initializeTemplate(name))
+  sanitize(html) {
+    const template = document.createElement('template')
+    template.innerHTML = `<div>${html}</div>`
+    const element = template.content.firstElementChild
+    const all = [element].concat([...element.querySelectorAll('*')])
+    all.forEach(el => {
+      if (ALLOWED_TAGS.includes(el.tagName.toLowerCase())) {
+        ;[...el.attributes].forEach(attr => {
+          if (!ALLOWED_ATTRIBUTES.includes(attr.name.toLowerCase())) el.removeAttribute(attr.name)
+        })
+      } else {
+        el.remove()
+      }
+    })
+    return element.innerHTML
   }
 
-  initializeTemplate(name) {
-    let template
-
-    if (this.controller[`has${name.charAt(0).toUpperCase() + name.slice(1)}TemplateValue`])
-      template = document.getElementById(this.controller[`${name}TemplateValue`])
-
-    this[`${name}Template`] = template || getTemplate(name)
+  initializeTempates() {
+    this.templates = templates
+    Object.keys(templates).forEach(name => this.initializeTemplate(name))
   }
 
-  // Renders an embed header
-  //
-  // @param {String} html - HTML
-  // @returns {String} HTML
-  //
-  renderHeader(html) {
-    const header = this.headerTemplate.content.firstElementChild.cloneNode(true)
-    const h1 = header.tagName.match(/h1/i) ? header : header.querySelector('h1')
-    h1.innerHTML = html
-    return header.outerHTML
+  initializeTemplate(name) {
+    const property = `${name}TemplateValue`
+    const id = this.controller[property]
+    const template = id ? document.getElementById(id)?.innerHTML?.trim() : null
+    this.controller[property] = null
+    if (template) this.templates[name] = template
+    return this.templates[name]
   }
 
-  // TODO: Add templates for links
-  // Renders a list of URLs as a list of HTML links i.e. anchor tags <a>
-  //
-  // @param {String[]} urls - list of URLs
-  // @returns {String[]} list of individual HTML links
-  //
-  renderLinks(urls = ['https://example.com', 'https://test.com']) {
-    urls = urls
-      .filter(url => {
-        let ok = false
-        createURL(url, u => (ok = true))
-        return ok
-      })
-      .sort()
-
-    if (!urls.length) return
-    const links = urls.map(url => `<li><a href='${url}'>${url}</a></li>`)
-    return `<ul>${links.join('')}</ul><br>`
+  render(templateName, params = {}) {
+    const template = this.templates[templateName]
+    return template.replace(/{{(.*?)}}/g, (_, key) => key.split('.').reduce((obj, k) => obj[k], params))
   }
 
   // TOOO: add support for audio and video
@@ -64,19 +143,8 @@ export default class Renderer {
   // @returns {String} HTML
   //
   renderEmbed(url = 'https://example.com') {
-    let embed
-
-    if (isImage(url)) {
-      embed = this.imageTemplate.content.firstElementChild.cloneNode(true)
-      const img = embed.tagName.match(/img/i) ? embed : embed.querySelector('img')
-      img.src = url
-    } else {
-      embed = this.iframeTemplate.content.firstElementChild.cloneNode(true)
-      const iframe = embed.tagName.match(/iframe/i) ? embed : embed.querySelector('iframe')
-      iframe.src = url
-    }
-
-    return embed.outerHTML
+    const html = isImage(url) ? this.render('image', { src: url }) : this.render('iframe', { src: url })
+    return this.sanitize(html)
   }
 
   // Renders a list of URLs as HTML embeds i.e. iframes or media tags (img, video, audio etc.)
@@ -95,33 +163,43 @@ export default class Renderer {
   // @param {String[]} allowedHosts - list of allowed hosts
   // @returns {String} HTML
   //
-  renderErrors(urls = ['https://example.com', 'https://test.com'], allowedHosts = []) {
+  renderWarnings(urls = ['https://example.com', 'https://test.com'], allowedHosts = [], blockedHosts = []) {
     if (!urls?.length) return
 
-    const element = this.errorTemplate.content.firstElementChild.cloneNode(true)
-    const prohibitedHostsElement = element.querySelector('[data-list="prohibited-hosts"]')
-    const allowedHostsElement = element.querySelector('[data-list="allowed-hosts"]')
-
-    if (prohibitedHostsElement) {
-      const hosts = extractURLHosts(urls).sort()
-      if (hosts.length) prohibitedHostsElement.innerHTML = hosts.map(host => `<li>${host}</li>`).join('')
-    }
-
-    if (allowedHostsElement && allowedHosts.length)
-      allowedHostsElement.innerHTML = allowedHosts.map(host => `<li>${host}</li>`).join('')
-
-    return element.outerHTML
+    allowedHosts = [...allowedHosts].sort()
+    if (allowedHosts.includes('*')) allowedHosts = ['All']
+
+    blockedHosts = [...new Set([...blockedHosts, ...extractURLHosts(urls)])].sort()
+    if (blockedHosts.includes('*')) blockedHosts = ['All']
+
+    return this.render('warning', {
+      header: 'Copy/Paste Warning',
+      subheader: 'Content includes links or media from restricted protocols or prohibited hosts.',
+      prohibited: {
+        header: 'Prohibited Hosts',
+        hosts: blockedHosts.length
+          ? blockedHosts.map(host => `<li>${host}</li>`).join('')
+          : '<li>Not configured</li>'
+      },
+      allowed: {
+        header: 'Allowed Hosts',
+        hosts: allowedHosts.length
+          ? allowedHosts.map(host => `<li>${host}</li>`).join('')
+          : '<li>Not configured</li>'
+      }
+    })
   }
 
-  // Renders an exception
+  // Renders a JavaScript error
   //
-  // @param {String[]} ex - The exception
+  // @param {Error} error - The error or exception
   // @returns {String} HTML
   //
-  renderException(ex) {
-    const element = this.exceptionTemplate.content.firstElementChild.cloneNode(true)
-    const code = element.querySelector('code')
-    code.innerHTML = ex.message
-    return element.outerHTML
+  renderError(error) {
+    return this.render('error', {
+      header: 'Unhandled Exception!',
+      subheader: 'Report this problem to a software engineer.',
+      error: error
+    })
   }
 }

data/app/javascript/store.js

@@ -1,7 +1,19 @@
+import { createURLObject } from './urls'
+
 export default class Store {
   constructor(controller) {
+    const identifiers = [
+      location.pathname,
+      createURLObject(controller.formElement?.action)?.pathname,
+      controller.element.closest('[id]')?.id
+    ]
+
     this.controller = controller
-    this.base = this.obfuscate([location.pathname, this.controller.element.closest('[id]')?.id].join('/'))
+    this.identifier = identifiers
+      .filter(i => i && i.length)
+      .join('/')
+      .replace(/\/{2,}/g, '/')
+    this.base = this.obfuscate(this.identifier)
   }
 
   split(list) {

data/app/javascript/templates.js

@@ -1,36 +1,53 @@
-const defaults = {
-  header: `<h1></h1>`,
-  iframe: `<iframe></iframe>`,
-  image: `<img></img>`,
+export default {
+  // inline templates ........................................................................................
+  link: `<a href='{{url}}'>{{label}}</a>`,
 
+  embedded: `
+    <span>
+      <strong>{{label}}</strong>
+      <span>{{description}}</span>
+      <del>{{url}}</del>
+    </span>
+  `,
+
+  prohibited: `
+    <span>
+      <strong>{{label}}</strong>
+      <span>{{description}}</span>
+      <del>{{url}}</del>
+    </span>
+  `,
+
+  // attachment templates ....................................................................................
   error: `
-    <div>
-      <h1>Copy/Paste Info</h1>
-      <h3>The pasted content includes media from unsupported hosts.</h3>
-
-      <h2>Prohibited Hosts / Domains</h2>
-      <ul data-list="prohibited-hosts">
-        <li>Media is only supported from allowed hosts.</li>
-      </ul>
-
-      <h2>Allowed Hosts / Domains</h2>
-      <ul data-list="allowed-hosts">
-        <li>Allowed hosts not configured.</li>
-      </ul>
+    <div data-trix-embed data-trix-embed-error>
+      <h1>{{header}}</h1>
+      <pre><code>{{error.stack}}</code></pre>
     </div>
   `,
 
-  exception: `
-    <div style='background-color:lightyellow; color:red; border:solid 1px red; padding:20px;'>
-      <h1>Unhandled Exception!</h1>
-      <p>Show a programmer the message below.</p>
-      <pre style="background-color:darkslategray; color:whitesmoke; padding:10px;"><code></code></pre>
+  iframe: `
+    <div data-trix-embed>
+      <iframe src='{{src}}' loading='lazy' referrerpolicy='no-referrer' scrolling='no'></iframe>
     </div>
-  `
-}
+  `,
 
-export function getTemplate(name) {
-  const template = document.createElement('template')
-  template.innerHTML = defaults[name]
-  return template
+  image: `
+    <div data-trix-embed>
+      <img src='{{src}}' loading='lazy'></img>
+    </div>
+  `,
+
+  warning: `
+    <div data-trix-embed data-trix-embed-warning>
+      <h1>{{header}}</h1>
+      <h3>{{subheader}}</h3>
+
+      <h2>{{prohibited.header}}</h2>
+      <ul>{{prohibited.hosts}}</ul>
+
+      <h2>{{allowed.header}}</h2>
+      <ul>{{allowed.hosts}}</ul>
+    </div>
+  `
 }