security options

• can disable a single elt1ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var btn = make('<button hx-disable hx-get="/test">Initial</button>')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Initial')

• can disable a parent elt0ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var div = make('<div hx-disable><button id="b1" hx-get="/test">Initial</button></div>')
  var btn = byId('b1')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Initial')

• can disable a child elt1ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var div = make('<div><button id="b1" hx-disable hx-get="/test">Initial</button></div>')
  var btn = byId('b1')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Initial')

• can disable a single elt dynamically7ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var btn = make('<button id="b1" hx-get="/test">Initial</button>')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  this.server.respondWith('GET', '/test', 'Clicked a second time')
  btn.setAttribute('hx-disable', '')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')

• can disable a single elt dynamically & enable it back2ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var btn = make('<button id="b1" hx-get="/test">Initial</button>')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  this.server.respondWith('GET', '/test', 'Clicked a second time')
  btn.setAttribute('hx-disable', '')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  btn.removeAttribute('hx-disable')
  htmx.process(btn)
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked a second time')

• can disable a single a tag dynamically & enable it back with boost11ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var btn = make('<a id="b1" hx-boost="true" href="/test" hx-target="this">Initial</button>')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  this.server.respondWith('GET', '/test', 'Clicked a second time')
  btn.setAttribute('hx-disable', '')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  btn.removeAttribute('hx-disable')
  htmx.process(btn)
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked a second time')

• can disable a single parent elt dynamically1ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var div = make('<div><button id="b1" hx-get="/test">Initial</button></div>')
  var btn = byId('b1')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  this.server.respondWith('GET', '/test', 'Clicked a second time')
  div.setAttribute('hx-disable', '')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')

• can disable a single parent elt dynamically & enable it back2ms ‣

  this.server.respondWith('GET', '/test', 'Clicked!')
  var div = make('<div><button id="b1" hx-get="/test">Initial</button></div>')
  var btn = byId('b1')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  this.server.respondWith('GET', '/test', 'Clicked a second time')
  div.setAttribute('hx-disable', '')
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked!')
  div.removeAttribute('hx-disable')
  htmx.process(div)
  btn.click()
  this.server.respond()
  btn.innerHTML.should.equal('Clicked a second time')

• can make egress cross site requests when htmx.config.selfRequestsOnly is disabled80ms ‣

  this.timeout(4000)
  htmx.config.selfRequestsOnly = false
  // should trigger send error, rather than reject
  var listener = htmx.on('htmx:sendError', function() {
    htmx.config.selfRequestsOnly = true
    htmx.off('htmx:sendError', listener)
    done()
  })
  this.server.restore() // use real xhrs
  // will 404, but should respond
  var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
  btn.click()

• can make a real local data uri request when selfRequestOnly false31ms ‣

  htmx.config.selfRequestsOnly = false
  var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
    if (evt.detail.sameHost === false && evt.detail.url.protocol !== 'data:') {
      evt.preventDefault()
    }
  })
  this.server.restore() // use real xhrs
  var btn = make('<button hx-get="data:,foo">Initial</button>')
  btn.click()
  htmx.config.selfRequestsOnly = true
  setTimeout(function() {
    htmx.off('htmx:validateUrl', pathVerifier)
    btn.innerHTML.should.equal('foo')
    done()
  }, 30)

• can disable hx-on on a single elt0ms ‣

  var btn = make("<button hx-disable hx-on:click='window.foo = true'>Foo</button>")
  btn.click()
  should.equal(window.foo, undefined)
  delete window.foo

• can disable hx-on on a parent elt0ms ‣

  var div = make("<div hx-disable><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>")
  var btn = byId('b1')
  btn.click()
  should.equal(window.foo, undefined)
  delete window.foo

• can disable hx-on on a single elt dynamically0ms ‣

  var btn = make("<button hx-on:click='window.foo = true'>Foo</button>")
  btn.click()
  should.equal(window.foo, true)
  delete window.foo
  btn.setAttribute('hx-disable', '')
  btn.click()
  should.equal(window.foo, undefined)
  delete window.foo

• can disable hx-on on a parent elt dynamically0ms ‣

  var div = make("<div><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>")
  var btn = byId('b1')
  btn.click()
  should.equal(window.foo, true)
  delete window.foo
  div.setAttribute('hx-disable', '')
  btn.click()
  should.equal(window.foo, undefined)
  delete window.foo

• can't make egress cross site requests when htmx.config.selfRequestsOnly is true0ms ‣

  this.timeout(4000)
  // should trigger send error, rather than reject
  var listener = htmx.on('htmx:invalidPath', function() {
    htmx.off('htmx:invalidPath', listener)
    done()
  })
  this.server.restore() // use real xhrs
  // will 404, but should respond
  var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
  btn.click()

• can cancel egress request based on htmx:validateUrl event1ms ‣

  this.timeout(4000)
  htmx.config.selfRequestsOnly = false
  // should trigger send error, rather than reject
  var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
    evt.preventDefault()
  })
  var listener = htmx.on('htmx:invalidPath', function() {
    htmx.off('htmx:invalidPath', listener)
    htmx.off('htmx:validateUrl', pathVerifier)
    done()
  })
  this.server.restore() // use real xhrs
  // will 404, but should respond
  var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
  btn.click()
  htmx.config.selfRequestsOnly = true

• can cancel egress request based on htmx:validateUrl event, sameHost is false1ms ‣

  this.timeout(4000)
  htmx.config.selfRequestsOnly = false
  // should trigger send error, rather than reject
  var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
    if (evt.detail.sameHost === false) {
      evt.preventDefault()
    }
  })
  var listener = htmx.on('htmx:invalidPath', function() {
    htmx.off('htmx:validateUrl', pathVerifier)
    htmx.off('htmx:invalidPath', listener)
    done()
  })
  this.server.restore() // use real xhrs
  // will 404, but should respond
  var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
  btn.click()
  htmx.config.selfRequestsOnly = true

• can cancel egress request based on htmx:validateUrl event and then allow a request62ms ‣

  htmx.config.selfRequestsOnly = false
  var requestCount = 0
  var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
    requestCount = requestCount + 1
    if (requestCount === 1) {
      evt.preventDefault()
    }
  })
  this.server.restore() // use real xhrs
  var btn = make('<button hx-get="data:,foo">Initial</button>')
  btn.click()
  setTimeout(function() {
    btn.innerHTML.should.not.equal('foo')
    btn.click()
    setTimeout(function() {
      htmx.off('htmx:validateUrl', pathVerifier)
      htmx.config.selfRequestsOnly = true
      btn.innerHTML.should.equal('foo')
      done()
    }, 30)
  }, 30)

• can disable script tag support with htmx.config.allowScriptTags2ms ‣

  var globalWasCalled = false
  window.callGlobal = function() {
    globalWasCalled = true
  }
  try {
    htmx.config.allowScriptTags = false
    this.server.respondWith('GET', '/test', '<div><script>callGlobal()</script></div>')
    var div = make("<div hx-get='/test'></div>")
    div.click()
    this.server.respond()
    globalWasCalled.should.equal(false)
  } finally {
    htmx.config.allowScriptTags = true
    delete window.callGlobal
  }