Add website to showcase user context

[pujagani]

User description

Thanks for contributing to Selenium!
A PR well described will help maintainers to quickly review and merge it

Before submitting your PR, please check our contributing guidelines.
Avoid large PRs, help reviewers by making them as simple and short as possible.

Motivation and Context

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I have read the contributing document.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

---

PR Type

Enhancement, Documentation

---

Description

• Added a new HTML page to demonstrate cookie-based user context.

• Implemented JavaScript functions for setting and applying themes using cookies.

• Included interactive buttons to change themes and reset them.

• Provided instructions on testing shared cookie behavior across tabs and contexts.

---

Changes walkthrough 📝

	Relevant files
Enhancement	cookie-background.html Add cookie-based theme demonstration HTML page                      web/cookie-background.html Created a new HTML file for cookie-based theme demonstration. Added JavaScript functions to manage cookies and apply themes. Included buttons for theme selection and reset functionality. Added instructions for testing cookie behavior across contexts. +34/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 Security concerns SameSite=None setting: The cookie is set with 'SameSite=None' which allows the cookie to be sent in cross-site requests. While it's also marked as 'Secure' (which is good), using 'SameSite=None' could potentially expose the cookie to CSRF attacks if this page is embedded in other sites. Consider using 'SameSite=Lax' instead unless cross-site requests are specifically needed for this demonstration.

⚡ Recommended focus areas for review Missing Cookie Expiration The cookie is set without an expiration date, which makes it a session cookie that will be deleted when the browser is closed. Consider adding an expiration time if the theme should persist across browser sessions. document.cookie = "theme=" + theme + "; path=/; SameSite=None; Secure" Error Handling The getCookie function doesn't handle cases where the cookie name exists but has no value, or when the regex match fails in unexpected ways. Consider adding more robust error handling. function getCookie(name) { let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')) return match ? match[2] : null }

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Escape RegExp special characters The current RegExp for cookie matching doesn't properly escape special characters in the cookie name, which could lead to unexpected behavior if the name contains RegExp special characters. web/cookie-background.html [13-16] function getCookie(name) { - let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')) + let match = document.cookie.match(new RegExp('(^| )' + name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '=([^;]+)')) return match ? match[2] : null } Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The current implementation is vulnerable to RegExp injection if the cookie name contains special characters, which could cause the function to fail or behave unexpectedly. Properly escaping these characters is an important security and reliability fix.	Medium
General	Add cookie expiration date The cookie is set with SameSite=None without specifying an expiration date, making it a session cookie that will be deleted when the browser closes. Add an expiration date to make the theme preference persistent. web/cookie-background.html [9] -document.cookie = "theme=" + theme + "; path=/; SameSite=None; Secure" +document.cookie = "theme=" + theme + "; path=/; SameSite=None; Secure; max-age=31536000" Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding a max-age attribute to the cookie makes the theme preference persistent across browser sessions, significantly improving user experience by remembering their theme choice even after closing the browser.	Medium
Learned best practice	Add parameter validation to prevent potential errors when function arguments are null or undefined The setTheme function doesn't validate if the theme parameter is null or undefined before using it to set a cookie. This could lead to unexpected behavior if the function is called without a parameter or with a null value. Add a null check or provide a default value. web/cookie-background.html [8-11] function setTheme(theme) { + if (theme === null || theme === undefined) { + theme = "white"; // Default value if theme is null or undefined + } document.cookie = "theme=" + theme + "; path=/; SameSite=None; Secure" applyTheme() } Apply this suggestion Suggestion importance[1-10]: 6	Low
More