switch to a white list for attribute swizzling

fixes https://github.com/bigskysoftware/htmx/issues/195
This commit is contained in:
carson 2020-09-14 07:28:41 -06:00
parent b657c0ad41
commit 4b4a480f9c
2 changed files with 12 additions and 11 deletions

View File

@ -41,6 +41,7 @@ return (function () {
requestClass:'htmx-request', requestClass:'htmx-request',
settlingClass:'htmx-settling', settlingClass:'htmx-settling',
swappingClass:'htmx-swapping', swappingClass:'htmx-swapping',
attributesToSwizzle:["class", "style", "width", "height"]
}, },
parseInterval:parseInterval, parseInterval:parseInterval,
_:internalEval, _:internalEval,
@ -380,8 +381,13 @@ return (function () {
} }
function shouldSwizzleAttribute(name) { function shouldSwizzleAttribute(name) {
return !(name === "id" || name === "value" || name.indexOf("@") >= 0); var attributesToSwizzle = htmx.config.attributesToSwizzle;
for (var i = 0; i < attributesToSwizzle.length; i++) {
if (name === attributesToSwizzle[i]) {
return true;
}
}
return false;
} }
function cloneAttributes(mergeTo, mergeFrom) { function cloneAttributes(mergeTo, mergeFrom) {
@ -392,12 +398,7 @@ return (function () {
}); });
forEach(mergeFrom.attributes, function (attr) { forEach(mergeFrom.attributes, function (attr) {
if (shouldSwizzleAttribute(attr.name)) { if (shouldSwizzleAttribute(attr.name)) {
try { mergeTo.setAttribute(attr.name, attr.value);
mergeTo.setAttribute(attr.name, attr.value);
} catch (e) {
// log bad attributes, should be added to the shouldSwizzleAttribute function when reported
logError("Could not set attribute with name '" + attr.name + "'");
}
} }
}); });
} }

View File

@ -353,13 +353,13 @@ describe("Core htmx AJAX Tests", function(){
it('properly settles attributes on interior elements', function(done) it('properly settles attributes on interior elements', function(done)
{ {
this.server.respondWith("GET", "/test", "<div hx-get='/test'><div foo='bar' id='d1'></div></div>"); this.server.respondWith("GET", "/test", "<div hx-get='/test'><div width='bar' id='d1'></div></div>");
var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1'></div></div>"); var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1'></div></div>");
div.click(); div.click();
this.server.respond(); this.server.respond();
should.equal(byId("d1").getAttribute("foo"), null); should.equal(byId("d1").getAttribute("width"), null);
setTimeout(function () { setTimeout(function () {
should.equal(byId("d1").getAttribute("foo"), "bar"); should.equal(byId("d1").getAttribute("width"), "bar");
done(); done();
}, 20); }, 20);
}); });