From 71270e75967c2e2d89beedb618e88e5dc48d4478 Mon Sep 17 00:00:00 2001 From: Andrew S <17580512+blunket@users.noreply.github.com> Date: Tue, 23 Jun 2026 10:21:39 -0500 Subject: [PATCH 1/4] Rephrase security section for hidden inputs I found the phrasing "pretty much any reputable server-side framework" to be opinionated in a slightly negative way, so I replaced that phrasing, then I reorganized the entire section and attempted to make it sound more neutral and professional in general. --- files/en-us/web/html/reference/elements/input/hidden/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/html/reference/elements/input/hidden/index.md b/files/en-us/web/html/reference/elements/input/hidden/index.md index f0e01cd5dec9718..b959f275b8c19cb 100644 --- a/files/en-us/web/html/reference/elements/input/hidden/index.md +++ b/files/en-us/web/html/reference/elements/input/hidden/index.md @@ -45,9 +45,9 @@ You can see a full example of what this might look like in the [Examples](#examp ### Improving website security -Hidden inputs are also used to store and submit security tokens or _secrets_, for the purposes of improving website security. The basic idea is that if a user is filling in a sensitive form, such as a form on their banking website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request. +Hidden inputs may also be used to store and submit security tokens (or _secrets_) for the purposes of improving website security. For example, this technique can help prevent a type of attack known as a [Cross Site Request Forgery (CSRF)](/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#cross-site_request_forgery_csrf). Many server-side frameworks use hidden secrets to prevent such attacks. -This would stop a malicious user from creating a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. This kind of attack is called a [Cross Site Request Forgery (CSRF)](/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#cross-site_request_forgery_csrf); pretty much any reputable server-side framework uses hidden secrets to prevent such attacks. +The basic idea is that if a user is filling in a sensitive form, such as a form on a banking website to transfer money, the data within the hidden input would prove both that they are who they say they are and that they are using the correct form to submit the transfer request. This would stop malicious users or bots from submitting a fake version of the form. > [!NOTE] > Placing the secret in a hidden input doesn't inherently make it secure. The key's composition and encoding would do that. The value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. You need to use well-designed secrets to actually secure your website. From 56fb19f05dd4410d80995d9b99d442348961456b Mon Sep 17 00:00:00 2001 From: Andrew S <17580512+blunket@users.noreply.github.com> Date: Thu, 25 Jun 2026 09:18:05 -0500 Subject: [PATCH 2/4] Security section directs to CSRF page Also removed any notes throughout the page saying that the field cannot be edited. --- .../html/reference/elements/input/hidden/index.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/html/reference/elements/input/hidden/index.md b/files/en-us/web/html/reference/elements/input/hidden/index.md index b959f275b8c19cb..4c1b0f95027bde8 100644 --- a/files/en-us/web/html/reference/elements/input/hidden/index.md +++ b/files/en-us/web/html/reference/elements/input/hidden/index.md @@ -7,14 +7,14 @@ browser-compat: html.elements.input.type_hidden sidebar: htmlsidebar --- -{{HTMLElement("input")}} elements of type **`hidden`** let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content. +{{HTMLElement("input")}} elements of type **`hidden`** allow web developers to include data in a form that is not visually accessible to users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, but are still submitted as any other form input. While the data is not presented to users in the rendered content, it is still accessible in the HTML output and is editable to users using tools such as their [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools). > [!NOTE] > The {{domxref("Element/input_event", "input")}} and {{domxref("HTMLElement/change_event", "change")}} events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g., `hiddenInput.focus()`). ## Value -The {{HTMLElement("input")}} element's [`value`](/en-US/docs/Web/HTML/Reference/Elements/input#value) attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools. +The {{HTMLElement("input")}} element's [`value`](/en-US/docs/Web/HTML/Reference/Elements/input#value) attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This value is not presented to the user via the user interface. > [!WARNING] > While the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. Do not rely on `hidden` inputs as a form of security. @@ -29,7 +29,7 @@ This is actually one of the common attributes, but it has a special meaning avai ## Using hidden inputs -As mentioned above, hidden inputs can be used anywhere that you want to include data the user can't see or edit along with the form when it's submitted to the server. Let's look at some examples that illustrate its use. +As mentioned above, hidden inputs can be used anywhere that you want to include data the user can't see along with the form when it's submitted to the server. Let's look at some examples that illustrate its use. ### Tracking edited content @@ -45,12 +45,10 @@ You can see a full example of what this might look like in the [Examples](#examp ### Improving website security -Hidden inputs may also be used to store and submit security tokens (or _secrets_) for the purposes of improving website security. For example, this technique can help prevent a type of attack known as a [Cross Site Request Forgery (CSRF)](/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#cross-site_request_forgery_csrf). Many server-side frameworks use hidden secrets to prevent such attacks. - -The basic idea is that if a user is filling in a sensitive form, such as a form on a banking website to transfer money, the data within the hidden input would prove both that they are who they say they are and that they are using the correct form to submit the transfer request. This would stop malicious users or bots from submitting a fake version of the form. +One common use of hidden input fields is to store Cross-Site Request Forgery (CSRF) tokens, which help protect websites against [CSRF attacks](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/CSRF). > [!NOTE] -> Placing the secret in a hidden input doesn't inherently make it secure. The key's composition and encoding would do that. The value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. You need to use well-designed secrets to actually secure your website. +> Data placed in a hidden input is not inherently secured. Its value is still observable by the end user. You need to use well-designed secrets to actually secure your website. ## Validation From 204cc3fb26d062091b0cb63d133788265443c8ff Mon Sep 17 00:00:00 2001 From: Andrew S <17580512+blunket@users.noreply.github.com> Date: Thu, 25 Jun 2026 09:19:48 -0500 Subject: [PATCH 3/4] Update files/en-us/web/html/reference/elements/input/hidden/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/html/reference/elements/input/hidden/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/reference/elements/input/hidden/index.md b/files/en-us/web/html/reference/elements/input/hidden/index.md index 4c1b0f95027bde8..226b683f1363158 100644 --- a/files/en-us/web/html/reference/elements/input/hidden/index.md +++ b/files/en-us/web/html/reference/elements/input/hidden/index.md @@ -45,7 +45,7 @@ You can see a full example of what this might look like in the [Examples](#examp ### Improving website security -One common use of hidden input fields is to store Cross-Site Request Forgery (CSRF) tokens, which help protect websites against [CSRF attacks](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/CSRF). +One common use of hidden input fields is to store Cross-Site Request Forgery (CSRF) tokens, which help protect websites against [CSRF attacks](/en-US/docs/Web/Security/Attacks/CSRF). > [!NOTE] > Data placed in a hidden input is not inherently secured. Its value is still observable by the end user. You need to use well-designed secrets to actually secure your website. From 956eb0799c27800ece423a2d03528ddf68a5b0a6 Mon Sep 17 00:00:00 2001 From: Andrew S <17580512+blunket@users.noreply.github.com> Date: Thu, 25 Jun 2026 09:20:14 -0500 Subject: [PATCH 4/4] Update files/en-us/web/html/reference/elements/input/hidden/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/html/reference/elements/input/hidden/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/reference/elements/input/hidden/index.md b/files/en-us/web/html/reference/elements/input/hidden/index.md index 226b683f1363158..1daff163632cb1a 100644 --- a/files/en-us/web/html/reference/elements/input/hidden/index.md +++ b/files/en-us/web/html/reference/elements/input/hidden/index.md @@ -7,7 +7,7 @@ browser-compat: html.elements.input.type_hidden sidebar: htmlsidebar --- -{{HTMLElement("input")}} elements of type **`hidden`** allow web developers to include data in a form that is not visually accessible to users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, but are still submitted as any other form input. While the data is not presented to users in the rendered content, it is still accessible in the HTML output and is editable to users using tools such as their [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools). +{{HTMLElement("input")}} elements of type **`hidden`** allow web developers to include data in a form that is not visually accessible to users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, but are still submitted as any other form input. While the data is not presented to users in the rendered content, it is still accessible in the HTML output and is editable to users using tools such as their [browser's developer tools](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools). > [!NOTE] > The {{domxref("Element/input_event", "input")}} and {{domxref("HTMLElement/change_event", "change")}} events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g., `hiddenInput.focus()`).