Refactor header CSS and HTML #1417
Conversation
HEIGE-PCloud
commented
Dec 30, 2024
•
HEIGE-PCloud
commented
- Fix theme switch and theme select
- Searchbox
- Fix auto toc
- Check categories-card, author-card, series-card, card-item, copyright, icp
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| <button class="tw-relative" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }}> | ||
| {{- .Language.LanguageName -}} | ||
| {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }} | ||
| <select class="tw-absolute tw-top-0 tw-left-0 tw-opacity-0 tw-w-full tw-h-full" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }} id="language-select-desktop" onchange="location = this.value;"> |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix AI about 1 month ago
To fix the problem, we need to ensure that the value taken from the select element is properly sanitized before being used to set the location property. One way to achieve this is by using a whitelist of allowed URLs or by validating the URL format before redirecting.
The best way to fix this without changing existing functionality is to introduce a function that validates the URL before setting the location property. This function will check if the URL is within the allowed list of URLs or matches a specific pattern.
| @@ -46,3 +46,3 @@ | ||
| {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }} | ||
| <select class="tw-absolute tw-top-0 tw-left-0 tw-opacity-0 tw-w-full tw-h-full" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }} id="language-select-desktop" onchange="location = this.value;"> | ||
| <select class="tw-absolute tw-top-0 tw-left-0 tw-opacity-0 tw-w-full tw-h-full" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }} id="language-select-desktop" onchange="validateAndRedirect(this.value);"> | ||
| {{- if eq .Kind "404" -}} | ||
| @@ -97,2 +97,17 @@ | ||
| </div> | ||
| <script> | ||
| function validateAndRedirect(url) { | ||
| const allowedUrls = [ | ||
| // Add allowed URLs here | ||
| {{ range .AllTranslations -}} | ||
| "{{ .RelPermalink }}", | ||
| {{- end }} | ||
| ]; | ||
| if (allowedUrls.includes(url)) { | ||
| location = url; | ||
| } else { | ||
| console.error("Invalid URL:", url); | ||
| } | ||
| } | ||
| </script> | ||
| </header> |
| {{- .Language.LanguageName -}} | ||
| {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }} | ||
| <select class="language-select" title="{{ T " selectLanguage" }}" onchange="location = this.value;"> | ||
| <select class="tw-absolute tw-w-full tw-h-full tw-left-0 tw-top-0 tw-opacity-0" title="{{ T " selectLanguage" }}" onchange="location = this.value;"> |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix AI about 1 month ago
To fix the problem, we need to ensure that the value used in location = this.value is properly sanitized and validated to prevent XSS attacks. One way to achieve this is by using a whitelist of allowed URLs or by encoding the value before using it. In this case, we will use a whitelist approach to ensure that only predefined URLs can be used.
- Create a whitelist of allowed URLs.
- Check if the selected value is in the whitelist before changing the location.
- Update the
onchangeevent handler to include this validation.
| @@ -212,3 +212,3 @@ | ||
| {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }} | ||
| <select class="tw-absolute tw-w-full tw-h-full tw-left-0 tw-top-0 tw-opacity-0" title="{{ T " selectLanguage" }}" onchange="location = this.value;"> | ||
| <select class="tw-absolute tw-w-full tw-h-full tw-left-0 tw-top-0 tw-opacity-0" title="{{ T " selectLanguage" }}" onchange="changeLanguage(this.value);"> | ||
| {{- if eq .Kind "404" -}} | ||
| @@ -234 +234,18 @@ | ||
| </header> | ||
| <script> | ||
| function changeLanguage(value) { | ||
| var allowedUrls = [ | ||
| {{- range .Sites -}} | ||
| "{{ printf "%v/404.html" .LanguagePrefix }}", | ||
| {{- end -}} | ||
| {{- range .AllTranslations -}} | ||
| "{{ .RelPermalink }}", | ||
| {{- end -}} | ||
| ]; | ||
| if (allowedUrls.includes(value)) { | ||
| location = value; | ||
| } else { | ||
| console.error("Invalid URL selected"); | ||
| } | ||
| } | ||
| </script> |
