From bbe53d94de7cc2917206949eb5e58dcc0b341666 Mon Sep 17 00:00:00 2001 From: Ben Croker <57572400+bencroker@users.noreply.github.com> Date: Mon, 16 Nov 2020 12:27:42 +0100 Subject: [PATCH 1/4] Added hx-vals to docs --- www/docs.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/www/docs.md b/www/docs.md index ae641466..283c0f57 100644 --- a/www/docs.md +++ b/www/docs.md @@ -374,11 +374,10 @@ differently. Note that htmx fires a `htmx:xhr:progress` event periodically based on the standard `progress` event during upload, which you can hook into to show the progress of the upload. -#### [Variables](#variables) +#### [Extra Values](#extra-values) -You can also include dynamically computed variables in the parameters of a request by using the -[hx-vars](/attributes/hx-vars) attribute. This attributes allows you to use name-expression pairs to include additional -computed variables in a request. +You can include extra values in a request using the [hx-vals](/attributes/hx-vals) (name-expression pairs in JSON format) and +[hx-vars](/attributes/hx-vars) attributes (comma-separated name-expression pairs that are dynamically computed). ## [Boosting](#boosting) From dad856dca06026c477503fe17dd77ab35792c5a1 Mon Sep 17 00:00:00 2001 From: Ben Croker <57572400+bencroker@users.noreply.github.com> Date: Mon, 16 Nov 2020 12:40:30 +0100 Subject: [PATCH 2/4] Added Security Considerations --- www/attributes/hx-vars.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/www/attributes/hx-vars.md b/www/attributes/hx-vars.md index 0022c12b..405e29a4 100644 --- a/www/attributes/hx-vars.md +++ b/www/attributes/hx-vars.md @@ -8,14 +8,18 @@ title: htmx - hx-vars The `hx-vars` attribute allows you to dynamically add to the parameters that will be submitted with an AJAX request. The value of this attribute is a comma separated list of `name`:`` values, the same as the internal -syntax of javascript [Object Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) +syntax of javascript [Object Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals). ```html
Get Some HTML, Including A Dynamic Value in the Request
``` +### Security Considerations + +* The expressions in `hx-vars` are dynamically computed which allows you to add JavaScript code that will be executed. Be careful to **never** trust user input in your expressions as this may lead to a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/] vulnerability. If you are dealing with user input such as query strings or user-generated content, consider using [hx-vals](/attributes/hx-vals) which is a safer alternative. + ### Notes * `hx-vars` is inherited and can be placed on a parent element. * A child declaration of a variable overrides a parent declaration. -* Input values with the same name override variable declarations. +* Input values with the same name will be overridden by variable declarations. From 1d42f1ddeb4841a0f5e8f24ba7f1c05398aa9d3f Mon Sep 17 00:00:00 2001 From: Ben Croker <57572400+bencroker@users.noreply.github.com> Date: Mon, 16 Nov 2020 12:48:20 +0100 Subject: [PATCH 3/4] Fixed link --- www/attributes/hx-vars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/attributes/hx-vars.md b/www/attributes/hx-vars.md index 405e29a4..8d1b2940 100644 --- a/www/attributes/hx-vars.md +++ b/www/attributes/hx-vars.md @@ -16,7 +16,7 @@ syntax of javascript [Object Literals](https://developer.mozilla.org/en-US/docs/ ### Security Considerations -* The expressions in `hx-vars` are dynamically computed which allows you to add JavaScript code that will be executed. Be careful to **never** trust user input in your expressions as this may lead to a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/] vulnerability. If you are dealing with user input such as query strings or user-generated content, consider using [hx-vals](/attributes/hx-vals) which is a safer alternative. +* The expressions in `hx-vars` are dynamically computed which allows you to add JavaScript code that will be executed. Be careful to **never** trust user input in your expressions as this may lead to a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability. If you are dealing with user input such as query strings or user-generated content, consider using [hx-vals](/attributes/hx-vals) which is a safer alternative. ### Notes From 469ca864389ca8dae3eee6bdebf7a080623cc0b5 Mon Sep 17 00:00:00 2001 From: Ben Croker <57572400+bencroker@users.noreply.github.com> Date: Mon, 16 Nov 2020 12:55:35 +0100 Subject: [PATCH 4/4] Create hx-vals.md --- www/attributes/hx-vals.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 www/attributes/hx-vals.md diff --git a/www/attributes/hx-vals.md b/www/attributes/hx-vals.md new file mode 100644 index 00000000..fe777bca --- /dev/null +++ b/www/attributes/hx-vals.md @@ -0,0 +1,24 @@ +--- +layout: layout.njk +title: htmx - hx-vals +--- + +## `hx-vals` + +The `hx-vals` attribute allows you to safely add to the parameters that will be submitted with an AJAX request. + +The value of this attribute is a list of name-expression values in [JSON (JavaScript Object Notation)](https://www.json.org/json-en.html) format. + +```html +
Get Some HTML, Including A Value in the Request
+``` + +### Security Considerations + +* The value of `hx-vals` must be valid [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON). It is **not** dynamically computed, making it a safer alternative to [hx-vars](/attributes/hx-vars), especially when dealing with user input such as query strings or user-generated content, which could otherwise introduce a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability. + +### Notes + +* `hx-vals` is inherited and can be placed on a parent element. +* A child declaration of a variable overrides a parent declaration. +* Input values with the same name will be overridden by variable declarations.