trix_embed 0.0.2 → 0.0.4

data/app/javascript/controller.js

@@ -1,180 +1,290 @@
+import { sample, shuffle } from './enumerable'
 import { generateKey, encryptValues, decryptValues } from './encryption'
-import { extractURLsFromElement, validateURL } from './urls'
-import { getMediaType, mediaTags } from './media'
+import {
+  createURLObject,
+  createURLTextNodeTreeWalker,
+  extractURLs,
+  extractURLFromElement,
+  validateURL
+} from './urls'
+import { getMediaType, mediaTags, trixAttachmentTagName, trixEmbedMediaTypes } from './media'
 import Guard from './guard'
 import Store from './store'
 import Renderer from './renderer'
 
-const defaultOptions = {
-  Controller: null,
-  Trix: null
-}
-
-export function getTrixEmbedControllerClass(options = defaultOptions) {
+export function getTrixEmbedControllerClass(options = { Controller: null, Trix: null }) {
   const { Controller, Trix } = options
   return class extends Controller {
     static values = {
       // templates
-      validTemplate: String, // dom id of template to use for valid embeds
-      errorTemplate: String, // dom id of template to use for invalid embeds
-      headerTemplate: String, // dom id of template to use for embed headers
-      iframeTemplate: String, // dom id of template to use for iframe embeds
-      imageTemplate: String, // dom id of template to use for image embeds
+      embeddedTemplate: String, // dom id of template to use for EMBEDDED MEDIA info
+      errorTemplate: String, // dom id of template to use for UNEXPECTED ERRORS
+      iframeTemplate: String, // dom id of template to use for IFRAME EMBEDS
+      imageTemplate: String, // dom id of template to use for IMAGE EMBEDS
+      linkTemplate: String, // dom id of template to use for ALLOWED LINKS
+      prohibitedTemplate: String, // dom id of template to use for PROHIBITED URLS
+      warningTemplate: String, // dom id of template to use when invalid embeds are detected
 
       // security related values
-      hosts: Array, // list of hosts/domains that embeds are allowed from
+      allowedLinkHosts: Array, // list of hosts/domains that links are allowed from
+      blockedLinkHosts: Array, // list of hosts/domains that links are NOT allowed from
+      allowedMediaHosts: Array, // list of hosts/domains that media is allowed from
+      blockedMediaHosts: Array, // list of hosts/domains that media is NOT allowed from
       paranoid: { type: Boolean, default: true } // guard against attacks
     }
 
-    async connect() {
+    connect() {
+      this.onPaste = this.paste.bind(this)
+      this.element.addEventListener('trix-paste', this.onPaste, true)
+
+      // forget config when navigating away
+      this.onBeforeFetchResponse = this.beforeFetchResponse.bind(this)
+      addEventListener('turbo:before-fetch-response', this.onBeforeFetchResponse, true)
+
+      // forget config when navigating away
+      this.onBeforeUnload = this.forgetConfig.bind(this)
+      addEventListener('beforeunload', this.onBeforeUnload, true)
+
       this.store = new Store(this)
       this.guard = new Guard(this)
-      await this.rememberConfig()
-      if (this.paranoid) this.guard.protect()
-      this.toolbarElement.querySelector('[data-trix-button-group="file-tools"]')?.remove()
-      window.addEventListener('beforeunload', () => this.disconnect()) // TODO: this may not be necessary
+
+      if (this.key) return // already configured
+
+      this.rememberConfig().then(() => {
+        if (this.paranoid) this.guard.protect()
+      })
+    }
+
+    reconnect() {
+      const value = this.element.getAttribute('data-controller') || ''
+      const values = new Set(value.split(' '))
+      values.add('trix-embed')
+      this.element.setAttribute('data-controller', [...values].join(' ').trim())
     }
 
     disconnect() {
-      if (this.paranoid) this.guard.cleanup()
-      this.forgetConfig()
+      this.element.removeEventListener('trix-paste', this.onPaste, true)
+      removeEventListener('turbo:before-fetch-response', this.onBeforeFetchResponse, true)
+      removeEventListener('beforeunload', this.onBeforeUnload, true)
+      this.reconnect() // can't get rid of this controller after it's been connected
+    }
+
+    beforeFetchResponse(event) {
+      try {
+        const editors = event.target.querySelectorAll('trix-editor')
+        if (editors.includes(this.element)) this.forgetConfig()
+      } catch {}
     }
 
     async paste(event) {
-      const { html, string, range } = event.paste
-      let content = html || string || ''
-      const pastedTemplate = this.buildPastedTemplate(content)
-      const pastedElement = pastedTemplate.content.firstElementChild
-      const sanitizedPastedElement = this.sanitizePastedElement(pastedElement)
-      const sanitizedPastedContent = sanitizedPastedElement.innerHTML.trim()
-      const pastedURLs = extractURLsFromElement(pastedElement)
-
-      // no URLs were pasted, let Trix handle it ...............................................................
-      if (!pastedURLs.length) return
-
-      event.preventDefault()
-      this.editor.setSelectedRange(range)
-      const hosts = await this.hosts
-      const renderer = new Renderer(this)
+      if (this.formElement) this.formElement.trixEmbedPasting = true
 
       try {
-        // Media URLs (images, videos, audio etc.)
-        const mediaURLs = pastedURLs.filter(url => getMediaType(url))
-        Array.from(pastedTemplate.content.firstElementChild.querySelectorAll('iframe')).forEach(frame => {
-          if (!mediaURLs.includes(frame.src)) mediaURLs.push(frame.src)
-        })
-        const validMediaURLs = mediaURLs.filter(url => validateURL(url, hosts))
-        const invalidMediaURLs = mediaURLs.filter(url => !validMediaURLs.includes(url))
-
-        // Standard URLs (non-media resources i.e. web pages etc.)
-        const standardURLs = pastedURLs.filter(url => !mediaURLs.includes(url))
-        const validStandardURLs = standardURLs.filter(url => validateURL(url, hosts))
-        const invalidStandardURLs = standardURLs.filter(url => !validStandardURLs.includes(url))
+        const { html, string, range } = event.paste
+        let content = html || string || ''
+        const pastedElement = this.createTemplateElement(content)
+        const pastedURLs = extractURLs(pastedElement)
+
+        // no URLs were pasted, let Trix handle it .............................................................
+        if (!pastedURLs.length) return
+
+        event.preventDefault()
+        this.editor.setSelectedRange(range)
+        const renderer = new Renderer(this)
+
+        try {
+          // Media URLs (images, videos, audio etc.)
+          const allowedMediaHosts = await this.allowedMediaHosts
+          const blockedMediaHosts = await this.blockedMediaHosts
+          let mediaURLs = new Set(pastedURLs.filter(url => getMediaType(url)))
+          const iframes = [...pastedElement.querySelectorAll('iframe')]
+          iframes.forEach(frame => mediaURLs.add(frame.src))
+          mediaURLs = [...mediaURLs]
+          const validMediaURLs = mediaURLs.filter(url =>
+            validateURL(url, allowedMediaHosts, blockedMediaHosts)
+          )
+          const invalidMediaURLs = mediaURLs.filter(url => !validMediaURLs.includes(url))
+
+          // Link URLs (non-media resources i.e. web pages etc.)
+          const allowedLinkHosts = await this.allowedLinkHosts
+          const blockedLinkHosts = await this.blockedLinkHosts
+          const linkURLs = pastedURLs.filter(url => !mediaURLs.includes(url))
+          const validLinkURLs = linkURLs.filter(url => validateURL(url, allowedLinkHosts, blockedLinkHosts))
+          const invalidLinkURLs = linkURLs.filter(url => !validLinkURLs.includes(url))
+
+          // 1. render warnings ................................................................................
+          if (invalidMediaURLs.length || invalidLinkURLs.length) {
+            const invalidURLs = [...new Set([...invalidMediaURLs, ...invalidLinkURLs])]
+            const allowedHosts = [...new Set([...allowedMediaHosts, ...allowedLinkHosts])].filter(
+              host => !this.reservedDomains.includes(host)
+            )
+            const blockedHosts = [...new Set([...blockedMediaHosts, ...blockedLinkHosts])].filter(
+              host => !this.reservedDomains.includes(host)
+            )
+            console.log('allowedHosts', allowedHosts)
+            console.log('blockedHosts', blockedHosts)
+            await this.insert(renderer.renderWarnings(invalidURLs, allowedHosts, blockedHosts))
+          }
+
+          // 2. render valid media urls (i.e. embeds) ..........................................................
+          if (validMediaURLs.length) await this.insert(renderer.renderEmbeds(validMediaURLs))
+
+          // 3. exit early if there is only 1 URL and it's a valid media URL (i.e. a single embed) .............
+          if (pastedURLs.length === 1 && validMediaURLs.length === 1) return
+
+          // 4. render the pasted content as  HTML .............................................................
+          const sanitizedPastedElement = this.sanitizePastedElement(pastedElement, {
+            renderer,
+            validMediaURLs,
+            validLinkURLs
+          })
+          const sanitizedPastedContent = sanitizedPastedElement.innerHTML.trim()
+          if (sanitizedPastedContent.length)
+            await this.insert(sanitizedPastedContent, { disposition: 'inline' })
+        } catch (e) {
+          this.insert(renderer.renderError(e))
+        }
+      } finally {
+        if (this.formElement) delete this.formElement.trixEmbedPasting
+      }
+    }
 
-        let urls
+    createTemplateElement(content) {
+      const template = document.createElement('template')
+      template.innerHTML = `<div>${content.trim()}</div>`
+      return template.content.firstElementChild
+    }
 
-        // 1. render invalid media urls ..........................................................................
-        urls = invalidMediaURLs
-        if (urls.length) await this.insert(renderer.renderErrors(urls, hosts.sort()))
+    extractLabelFromElement(el, options = { default: null }) {
+      let value = el.title
+      if (value && value.length) return value
 
-        // 2. render invalid standard urls .......................................................................
-        urls = invalidStandardURLs
-        if (urls.length) {
-          await this.insert(renderer.renderHeader('Pasted URLs'))
-          await this.insert(renderer.renderLinks(urls), { disposition: 'inline' })
-        }
+      value = el.textContent.trim()
+      if (value && value.length) return value
 
-        // 3. render valid media urls ............................................................................
-        urls = validMediaURLs
-        if (urls.length) {
-          if (urls.length > 1) await this.insert(renderer.renderHeader('Embedded Media'))
-          await this.insert(renderer.renderEmbeds(urls))
-        }
+      return options.default
+    }
 
-        // 4. render valid standard urls .........................................................................
-        urls = validStandardURLs
-        if (urls.length) await this.insert(renderer.renderEmbeds(validStandardURLs))
+    sanitizePastedElement(element, options = { renderer: null, validMediaURLs: [], validLinkURLs: [] }) {
+      const { renderer, validMediaURLs, validLinkURLs } = options
 
-        // exit early if there is only one valid URL and it is the same as the pasted content
-        if (validMediaURLs[0] === sanitizedPastedContent || validStandardURLs[0] === sanitizedPastedContent)
-          return this.editor.insertLineBreak()
+      element = element.cloneNode(true)
 
-        // 5. render the pasted content as sanitized HTML ........................................................
-        if (sanitizedPastedContent.length) {
-          await this.insert(renderer.renderHeader('Pasted Content', sanitizedPastedContent))
-          this.editor.insertLineBreak()
-          this.insert(sanitizedPastedContent, { disposition: 'inline' })
-        }
-      } catch (ex) {
-        this.insert(renderer.renderException(ex))
+      // sanitize text nodes
+      const walker = createURLTextNodeTreeWalker(element)
+      const textNodes = []
+      let textNode
+      while ((textNode = walker.nextNode())) {
+        textNode.replacements = textNode.replacements || new Set()
+        textNodes.push(textNode)
+
+        const words = textNode.nodeValue.split(/\s+/)
+        const matches = words.filter(word => word.startsWith('http'))
+
+        matches.forEach(match => {
+          const url = createURLObject(match)?.href
+          const replacement =
+            validLinkURLs.includes(url) || validLinkURLs.includes(url)
+              ? renderer.render('link', { url, label: url })
+              : renderer.render('prohibited', { url, label: 'Prohibited URL:', description: '' })
+          textNode.replacements.add({ match, replacement })
+        })
       }
-    }
+      textNodes.forEach(node => {
+        if (!node.replacements.size) return
+        let content = node.nodeValue
+        // sort by length to replace the most specific matches first
+        const replacements = [...node.replacements].sort((a, b) => b.match.length - a.match.length)
+        replacements.forEach(entry => (content = content.replaceAll(entry.match, entry.replacement)))
+        node.replaceWith(this.createTemplateElement(content))
+      })
 
-    buildPastedTemplate(content) {
-      const template = document.createElement('template')
-      template.innerHTML = `<div>${content.trim()}</div>`
-      return template
-    }
+      // sanitize anchor tags
+      element.querySelectorAll('a').forEach(el => {
+        const url = extractURLFromElement(el)
+        const label = this.extractLabelFromElement(el, { default: url })
+        const replacement = validLinkURLs.includes(url)
+          ? renderer.render('link', { url, label })
+          : renderer.render('prohibited', { url, label: 'Prohibited Link:', description: `(${label})` })
+        el.replaceWith(this.createTemplateElement(replacement))
+      })
 
-    sanitizePastedElement(element) {
-      element = element.cloneNode(true)
-      element.querySelectorAll(mediaTags.join(', ')).forEach(tag => tag.remove())
+      // sanitize media tags
+      element.querySelectorAll(mediaTags.join(', ')).forEach(el => {
+        const url = extractURLFromElement(el)
+        const label = this.extractLabelFromElement(el, { default: url })
 
-      const tags = element.querySelectorAll('*')
-      const newlines = element.innerHTML.match(/\r\n|\n|\r/g) || []
+        const replacement = validMediaURLs.includes(url)
+          ? renderer.render('embedded', { url, label: 'Allowed Media:', description: '(Embedded Above)' })
+          : renderer.render('prohibited', { url, label: 'Prohibited Media:', description: '' })
 
-      // replace newlines with <br> if there are <= 10% tags to newlines
-      if ((newlines.length ? tags.length / newlines.length : 0) <= 0.1)
-        element.innerHTML = element.innerHTML.replaceAll(/\r\n|\n|\r/g, '<br>')
+        el.replaceWith(this.createTemplateElement(replacement))
+      })
+
+      // sanitize newlines (best effort)
+      element.innerHTML.replaceAll(/(\n|\r|\f|\v)+/g, '<br>')
 
       return element
     }
 
-    insertAttachment(content, options = { delay: 0 }) {
+    createAttachment(content) {
+      return new Trix.Attachment({ content, contentType: trixEmbedMediaTypes.attachment })
+    }
+
+    insertNewlines(count = 1, options = { delay: 1 }) {
       const { delay } = options
       return new Promise(resolve => {
         setTimeout(() => {
-          const attachment = new Trix.Attachment({ content, contentType: 'application/vnd.trix-embed' })
-          this.editor.insertAttachment(attachment)
+          for (let i = 0; i < count; i++) this.editor.insertLineBreak()
           resolve()
         }, delay)
       })
     }
 
-    insertHTML(content, options = { delay: 0 }) {
+    insertAttachment(content, options = { delay: 1 }) {
+      const { delay } = options
+      return new Promise(resolve => {
+        setTimeout(() => {
+          this.editor.insertAttachment(this.createAttachment(content))
+          this.insertNewlines(1, { delay: delay }).finally(resolve)
+        }, delay)
+      })
+    }
+
+    insertHTML(content, options = { delay: 1 }) {
       const { delay } = options
       return new Promise(resolve => {
         setTimeout(() => {
           this.editor.insertHTML(content)
-          // shenanigans to ensure that Trix considers this block of content closed
-          this.editor.moveCursorInDirection('forward')
-          this.editor.insertLineBreak()
-          this.editor.moveCursorInDirection('backward')
-          resolve()
+          this.insertNewlines(1, { delay }).finally(resolve)
         }, delay)
       })
     }
 
-    insert(content, options = { delay: 0, disposition: 'attachment' }) {
-      const { delay, disposition } = options
+    insert(content, options = { delay: 1, disposition: 'attachment' }) {
+      let { delay, disposition } = options
 
       if (content?.length) {
         return new Promise(resolve => {
           setTimeout(() => {
             if (typeof content === 'string') {
-              if (disposition === 'inline') return this.insertHTML(content, { delay }).then(resolve)
-              else return this.insertAttachment(content, { delay }).then(resolve)
+              return disposition === 'inline'
+                ? this.insertHTML(content, { delay })
+                    .catch(e => this.renderError(e))
+                    .finally(resolve)
+                : this.insertAttachment(content, { delay })
+                    .catch(e => this.renderError(e))
+                    .finally(resolve)
             }
 
             if (Array.isArray(content)) {
-              if (disposition === 'inline')
-                return content
-                  .reduce((p, c, i) => p.then(this.insertHTML(c, { delay })), Promise.resolve())
-                  .then(resolve)
-              else
-                return content
-                  .reduce((p, c, i) => p.then(this.insertAttachment(c, { delay })), Promise.resolve())
-                  .then(resolve)
+              const promises =
+                disposition === 'inline'
+                  ? content.map(c => this.insertHTML(c, { delay: delay + 1 }))
+                  : content.map(c => this.insertAttachment(c, { delay: delay + 1 }))
+              return Promise.all(promises)
+                .catch(e => this.renderError(e))
+                .finally(resolve)
             }
 
             resolve()
@@ -185,27 +295,31 @@ export function getTrixEmbedControllerClass(options = defaultOptions) {
       return Promise.resolve()
     }
 
-    // Returns the Trix editor
-    //
-    // @returns {TrixEditor}
-    //
     get editor() {
       return this.element.editor
     }
 
     get toolbarElement() {
-      const sibling = this.element.previousElementSibling
-      return sibling?.tagName.match(/trix-toolbar/i) ? sibling : null
-    }
+      const id = this.element.getAttribute('toolbar')
+      let toolbar = id ? document.getElementById(id) : null
 
-    get inputElement() {
-      return document.getElementById(this.element.getAttribute('input'))
+      if (!toolbar) {
+        const sibling = this.element.previousElementSibling
+        toolbar = sibling?.tagName.match(/trix-toolbar/i) ? sibling : null
+      }
+
+      return toolbar
     }
 
     get formElement() {
       return this.element.closest('form')
     }
 
+    get inputElement() {
+      const id = this.element.getAttribute('input')
+      return id ? this.formElement?.querySelector(`#${id}`) : null
+    }
+
     get paranoid() {
       return !!this.store.read('paranoid')
     }
@@ -213,42 +327,126 @@ export function getTrixEmbedControllerClass(options = defaultOptions) {
     get key() {
       try {
         return JSON.parse(this.store.read('key'))[2]
-      } catch {}
-    }
-
-    get hosts() {
-      try {
-        return decryptValues(this.key, JSON.parse(this.store.read('hosts')))
       } catch {
-        return []
+        return null
       }
     }
 
+    get hostsValueDescriptors() {
+      return Object.values(this.valueDescriptorMap).filter(descriptor =>
+        descriptor.name.endsWith('HostsValue')
+      )
+    }
+
     get reservedDomains() {
-      return ['example.com', 'test.com', 'invalid.com', 'example.cat', 'nic.example', 'example.co.uk']
+      return [
+        'embed.example',
+        'embed.invalid',
+        'embed.local',
+        'embed.localhost',
+        'embed.test',
+        'trix.embed.example',
+        'trix.embed.invalid',
+        'trix.embed.local',
+        'trix.embed.localhost',
+        'trix.embed.test',
+        'trix.example',
+        'trix.invalid',
+        'trix.local',
+        'trix.localhost',
+        'trix.test',
+        'www.embed.example',
+        'www.embed.invalid',
+        'www.embed.local',
+        'www.embed.localhost',
+        'www.embed.test',
+        'www.trix.example',
+        'www.trix.invalid',
+        'www.trix.local',
+        'www.trix.localhost',
+        'www.trix.test'
+      ]
     }
 
-    async rememberConfig() {
-      const key = await generateKey()
-      const fakes = await encryptValues(key, this.reservedDomains)
-      const hosts = await encryptValues(key, this.hostsValue)
+    rememberConfig() {
+      return new Promise(async resolve => {
+        let fakes
 
-      this.store.write('key', JSON.stringify([fakes[0], fakes[1], key, fakes[2]]))
-      this.element.removeAttribute('data-trix-embed-key-value')
+        // encryption key
+        const key = await generateKey()
+        fakes = await encryptValues(key, sample(this.reservedDomains, 3))
+        this.store.write('key', JSON.stringify([fakes[0], fakes[1], key, fakes[2]]))
 
-      this.store.write('hosts', JSON.stringify(hosts))
-      this.element.removeAttribute('data-trix-embed-hosts-value')
+        // paranoid
+        if (this.paranoidValue !== false) {
+          fakes = await encryptValues(key, sample(this.reservedDomains, 4))
+          this.store.write('paranoid', JSON.stringify(fakes))
+        }
+        this.element.removeAttribute('data-trix-embed-paranoid-value')
+
+        // host lists
+        //
+        // - allowedLinkHosts
+        // - blockedLinkHosts
+        // - allowedMediaHosts
+        // - blockedMediaHosts
+        // - etc.
+        //
+        this.hostsValueDescriptors.forEach(async descriptor => {
+          const { name } = descriptor
+          const property = name.slice(0, name.lastIndexOf('Value'))
+
+          let value = this[name]
+
+          // ensure minimum length to help with security-through-obscurity
+          if (value.length < 4) value = value.concat(sample(this.reservedDomains, 4 - value.length))
+
+          // store the property value
+          this.store.write(property, JSON.stringify(await encryptValues(key, value)))
+
+          // create the property getter (returns a promise)
+          if (!this.hasOwnProperty(property)) {
+            Object.defineProperty(this, property, {
+              get: async () => {
+                try {
+                  const hosts = await decryptValues(this.key, JSON.parse(this.store.read(property)))
+                  return hosts.filter(host => !this.reservedDomains.includes(host))
+                } catch (error) {
+                  console.error(`Failed to get '${property}'!`, error)
+                  return []
+                }
+              }
+            })
+          }
+
+          // cleanup the dom
+          this.element.removeAttribute(`data-trix-embed-${descriptor.key}`)
+        })
 
-      if (this.paranoidValue !== false) {
-        this.store.write('paranoid', JSON.stringify(fakes.slice(3)))
-        this.element.removeAttribute('data-trix-embed-paranoid')
-      }
+        // more security-through-obscurity
+        fakes = await encryptValues(key, sample(this.reservedDomains, 4))
+        this.store.write('securityHosts', fakes)
+        fakes = await encryptValues(key, sample(this.reservedDomains, 4))
+        this.store.write('obscurityHosts', fakes)
+
+        resolve()
+      })
     }
 
     forgetConfig() {
-      this.store.remove('key')
-      this.store.remove('hosts')
-      this.store.remove('paranoid')
+      try {
+        this.store?.remove('key')
+        this.store?.remove('paranoid')
+
+        this.hostsValueDescriptors.forEach(async descriptor => {
+          const { name } = descriptor
+          const property = name.slice(0, name.lastIndexOf('Value'))
+          this.store?.remove(property)
+        })
+
+        this.store?.remove('securityHosts')
+        this.store?.remove('obscurityHosts')
+      } catch {}
     }
   }
 }

data/app/javascript/enumerable.js

@@ -0,0 +1,19 @@
+const random = cap => Math.floor(Math.random() * cap)
+
+export const sample = (object, count = null) => {
+  const array = [...object]
+  if (count === 'all') count = array.length
+  const cap = array.length
+  const result = []
+  const indexes = new Set()
+  while (result.length < count) {
+    let i = random(cap)
+    while (indexes.has(i)) i = random(cap)
+    indexes.add(i)
+    result.push(array[i])
+  }
+
+  return typeof count === 'number' ? result : result[0]
+}
+
+export const shuffle = object => sample(object, 'all')