Potential fix for code scanning alert no. 1821: DOM text reinterpreted as HTML

[ajay-dhangar]

Potential fix for https://github.com/codeharborhub/codeharborhub.github.io/security/code-scanning/1821

General approach: For a live code editor where executing HTML/JS is desired, the right fix is not to escape the content (that would defeat the editor) but to execute it in a constrained environment. The main mitigation is to sandbox the iframe and, ideally, give it a separate origin (srcdoc or blob URL) so code inside cannot access the main page’s cookies, localStorage, or DOM. We should avoid document.write on a same-origin contentDocument and instead rely on srcDoc plus the sandbox attribute (and only the minimal necessary sandbox flags).

Concrete best fix here without changing functionality:

• Replace the pattern of:
  • obtaining const document = iframe.contentDocument,
  • building documentContents as a string,
  • and calling document.open()/write()/close()
• With:
  • building the same HTML string as documentContents,
  • assigning it to iframe.srcdoc (or iframeRef.current!.srcdoc in TSX),
  • and adding a sandbox attribute on the <iframe> element that allows scripts but isolates them: e.g. sandbox="allow-scripts" (optionally allow-same-origin if truly needed, but avoiding it is more secure).

This keeps the visible behavior (user’s HTML/CSS/JS renders and runs) but isolates it inside a sandboxed iframe where it cannot reach out to the parent window or sensitive APIs tied to the origin.

Specific changes in src/pages/LiveEditor/BasicEditor.tsx:

1. In the useEffect, remove use of iframe.contentDocument and document.write, and instead set iframe.srcdoc = documentContents;.
2. Optionally, to avoid script execution before content is set, keep the null check and early return as is.
3. On the <iframe> JSX element, add a sandbox attribute (string) such as sandbox="allow-scripts" so the editor still runs JavaScript but is isolated.

No new libraries are required; we only use standard DOM APIs and JSX attributes.

---

Suggested fixes powered by Copilot Autofix. Review carefully before merging.

[github-actions]

Great job, @ajay-dhangar! 🎉 Thank you for submitting your pull request to CodeHarborHub. We appreciate your contribution and enthusiasm! Our team will review it soon. If you have any questions or need further assistance, feel free to reach out. Thanks for contributing!

[deepsource-io]

Here's the code health analysis summary for commits feb6494..4305941. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	❌ Failure	❗ 1 occurence introduced 🎯 2 occurences resolved	View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[ajay-dhangar]

👍

[github-actions]

⚡️ Lighthouse Report for the Deploy Preview of this PR 🚀

🔗 Site: CodeHarborHub | Live Site

URL 🌐	Performance	Accessibility	Best Practices	SEO	📊
/	🔴 28	🟡 77	🟡 57	🟢 100	📄
/docs	🟡 52	🟡 87	🟡 75	🟢 100	📄
/courses	🟡 55	🟡 86	🟢 96	🟢 100	📄
/showcase	🟡 52	🟡 87	🟡 57	🟡 86	📄
/community	🟡 58	🟡 86	🟢 96	🟢 100	📄