chore(architecture): re-structure files and folders #63
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| parseButton.addEventListener("click", () => { | ||
| const jsonData = textArea.value | ||
| const interactiveDemo = document.getElementById("interactive-demo") | ||
| interactiveDemo.setAttribute("data", jsonData) |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 18 days ago
To fix the problem, we should ensure that any user input from the textarea is properly escaped or sanitized before being set as the value of the data attribute. Since the expected input is JSON, we should first validate that the input is valid JSON before passing it to the component. If the input is not valid JSON, we should not update the attribute and instead show an error. This prevents malicious input from being interpreted as HTML or script. The fix should be applied in the <script> block in src/demo/index.html, specifically in the event listener for the "Parse JSON" button (lines 72–76).
Steps:
- Parse the input as JSON using
JSON.parse. - If parsing succeeds, set the attribute to the stringified JSON (which is guaranteed to be safe).
- If parsing fails, show an error and do not update the attribute.
No external libraries are needed; we can use the built-in JSON.parse and JSON.stringify.
| @@ -74,3 +74,9 @@ | ||
| const interactiveDemo = document.getElementById("interactive-demo") | ||
| interactiveDemo.setAttribute("data", jsonData) | ||
| try { | ||
| const parsed = JSON.parse(jsonData) | ||
| // Use JSON.stringify to ensure safe serialization | ||
| interactiveDemo.setAttribute("data", JSON.stringify(parsed)) | ||
| } catch (e) { | ||
| alert("Invalid JSON. Please enter valid JSON data.") | ||
| } | ||
| }) |
| const contentData = this.getContentData() | ||
| if (contentData) { | ||
| this.clearContent() // Clear content after reading | ||
| this.setAttribute("data", contentData) // Set as attribute for future use |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 18 days ago
To fix the problem, we should ensure that any text content read from the DOM and set as an attribute is properly escaped or sanitized, especially if it could later be interpreted as HTML. Since the data attribute is intended to hold JSON, we should ensure that the text content is valid JSON before setting it as the attribute. If the text content is not valid JSON, we should not set it as the data attribute, or we should escape it appropriately.
The best fix is to validate that contentData is valid JSON before setting it as the data attribute. If it is not valid JSON, we should not set it, or we should set a safe default (e.g., "{}"). This prevents any malicious HTML or script from being injected via the text content.
Changes to make:
- In the
datagetter, before settingcontentDataas thedataattribute, check if it is valid JSON. - If it is valid JSON, set it as the attribute; otherwise, set a safe default (e.g.,
"{}"). - Optionally, log a warning if invalid JSON is detected.
No new imports are needed, as JSON parsing is built-in.
| @@ -230,5 +230,14 @@ | ||
| this.clearContent() // Clear content after reading | ||
| this.setAttribute("data", contentData) // Set as attribute for future use | ||
| // Only set as attribute if valid JSON, otherwise set to "{}" | ||
| try { | ||
| JSON.parse(contentData) | ||
| this.setAttribute("data", contentData) | ||
| return contentData | ||
| } catch (e) { | ||
| console.warn("Invalid JSON in element content, using default '{}'", e) | ||
| this.setAttribute("data", "{}") | ||
| return "{}" | ||
| } | ||
| } | ||
| return contentData || "{}" | ||
| return "{}" | ||
| } |
| jsonData.innerHTML = ` | ||
| <div class="error-container"> | ||
| Invalid JSON data | ||
| <details> | ||
| <summary>Raw data:</summary> | ||
| <pre >${this.data}</pre> | ||
| <p>Error: ${result.error || "Unknown error"}</p> | ||
| </details> | ||
| </div> | ||
| ` |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 18 days ago
To fix this vulnerability, we must ensure that any untrusted data inserted into innerHTML is properly escaped so that HTML meta-characters are not interpreted as markup. The best way to do this is to escape the data before interpolation, converting <, >, &, ", and ' to their corresponding HTML entities. This can be done by introducing a utility function (e.g., escapeHtml) within the file to perform the escaping. The fix should be applied specifically to the interpolation of ${this.data} on line 438, ensuring that only the escaped version of the data is inserted into the HTML template. The rest of the functionality should remain unchanged.
Required changes:
- Add an
escapeHtmlfunction to the file. - Use
escapeHtml(this.data)instead of${this.data}in the error template on line 438.
| @@ -437,3 +437,3 @@ | ||
| <summary>Raw data:</summary> | ||
| <pre >${this.data}</pre> | ||
| <pre >${escapeHtml(this.data)}</pre> | ||
| <p>Error: ${result.error || "Unknown error"}</p> | ||
| @@ -458 +458,11 @@ | ||
| } | ||
|
|
||
| // Utility function to escape HTML special characters | ||
| function escapeHtml(str: string): string { | ||
| return str | ||
| .replace(/&/g, "&") | ||
| .replace(/</g, "<") | ||
| .replace(/>/g, ">") | ||
| .replace(/"/g, """) | ||
| .replace(/'/g, "'"); | ||
| } |
No description provided.