{"id":22886765,"url":"https://github.com/evolutionjobs/html-editor","last_synced_at":"2025-03-31T19:12:27.288Z","repository":{"id":101027648,"uuid":"111707174","full_name":"EvolutionJobs/html-editor","owner":"EvolutionJobs","description":"Sandboxed HTML editor","archived":false,"fork":false,"pushed_at":"2018-02-12T16:30:20.000Z","size":217,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T23:28:48.090Z","etag":null,"topics":["polymer","rich-text-editor","sandbox","web-component"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EvolutionJobs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-22T16:22:32.000Z","updated_at":"2017-11-23T16:54:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"e72bdbfe-650d-4050-a6ab-955f5b681b3e","html_url":"https://github.com/EvolutionJobs/html-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvolutionJobs%2Fhtml-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvolutionJobs%2Fhtml-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvolutionJobs%2Fhtml-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvolutionJobs%2Fhtml-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvolutionJobs","download_url":"https://codeload.github.com/EvolutionJobs/html-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246523874,"owners_count":20791444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["polymer","rich-text-editor","sandbox","web-component"],"created_at":"2024-12-13T20:27:43.979Z","updated_at":"2025-03-31T19:12:27.263Z","avatar_url":"https://github.com/EvolutionJobs.png","language":"HTML","readme":"# `\u003chtml-editor\u003e`\n\nThis is a web-component, lightweight, bare bones HTML editor that wraps the HTML in an `\u003ciframe sandbox\u003e` so that malicious scripts embedded in the HTML cannot execute in your page.\n\n## Why another rich text editor?\n\nI have a couple of restrictions:\n\n* Must be compatible with web components and shadow DOM. \n* Must handle a wide variety of possibly dodgy HTML.\n* Should work when imported as a module or asychronously brought into the page.\n* Should be open source.\n\nUnfortunately those rule out every HTML editor component I've been able to find. Shadow DOM means libraries that rely on `document...` methods (like the otherwise excellent [Quill](https://github.com/quilljs/quill)) can't work. Those that do work are too easy to inject `\u003cscript\u003e` tags into, or need loading with the initial page, or rely on Regex to find XSS.\n\n## How does it protect against XSS?\n\nLike most HTML editors this uses `contenteditable` on the body of a new page in an `\u003ciframe\u003e` and [`document.execCommand`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) to provide functions like _Bold_ and _Italic_.\n\nWhere this differs is that the `\u003ciframe\u003e` is flagged with the [`sandbox=\"allow-scripts\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) attribute. This allows scripts to run inside the `\u003ciframe\u003e`, but in their own unique origin - they can't execute anything in the context of the page that contains it, they can't POST, they can't resend cookies (no CSRF), they can't display dialogs, and they can't get out of the frame.\n\nThe problem with this `sandbox` is that it isn't easy for the parent page and the frame to communicate any more. So this uses [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) is used to send content and commands.\n\nSo when a _Bold_ command is executed the wrapper component uses `postMessage` to sent that to the `\u003ciframe\u003e`, and then in that page it picks up the message and calls `document.execCommand`. When the user inputs changes to the `contenteditable` body that uses `postMessage` to sent the changed HTML back up to the containing page.\n\n## How do I use it?\n\nThis component consists of two web components:\n\n* `\u003csandbox-editor\u003e` stand alone HTML editor sandbox with no UI\n* `\u003chtml-editor\u003e` Polymer 2 UI, which depends on HTML imports and further Polymer components.\n\n### `\u003csandbox-editor\u003e`\n\nInclude the script in your page:\n\n    \u003cscript type=\"module\" src=\"{path}/html-editor/sandbox-editor.js\"\u003e\u003c/script\u003e\n    \nInclude the tag in your HTML:\n\n    \u003csandbox-editor content={{HTML content to edit}}\u003e\u003c/sandbox-editor\u003e\n    \nThe `content` attribute (it can also be set as a property) holds the HTML to set. `content-changed` fires when the user updates the HTML. This is compatible with [Polymer's `notify` properties](https://www.polymer-project.org/2.0/docs/devguide/properties), so you can use its two-way binding.\n\nTo execute commands against the editor call `editorAction`:\n\n    const sandbox = parentElement.querySelector('sandbox-editor');\n    sandbox.editorAction('bold'); // make the current selection bold\n    sandbox.editorAction('backColor', '#fdb5fb'); // make the background pink\n\nFor an example of this see the [source of `\u003chtml-editor\u003e`](html-editor.html)\n\nFinally, `\u003csandbox-editor\u003e` fires an event when the body inside the editor gains focus. This appears as the `focused` property and fires `focused-changed` when it changes.\n\n### `\u003chtml-editor\u003e`\n\nInclude the HTML import:\n\n    \u003clink rel=\"import\" href=\"{path}/html-editor/html-editor.html\" /\u003e\n\nInclude the tag in your HTML:\n\n    \u003chtml-editor content={{HTML content to edit}}\u003e\u003c/html-editor\u003e\n\nThe `content` attribute (it can also be set as a property) holds the HTML to set, Polymer two-way databinding is supported.\n\n![screen shot](demo/html-editor.png)\n\nYou can add your own buttons if you want in the `slot`:\n\n    \u003chtml-editor content={{HTML content to edit}}\u003e\n        \u003cbutton on-tap=\"_actionBold\"\u003eMaek Kustom Blod!\u003c/button\u003e\n    \u003c/html-editor\u003e\n\n`\u003chtml-editor\u003e` only shows the toolbar while the `\u003csandbox-editor\u003e` or some other control in the shadow DOM has focus.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevolutionjobs%2Fhtml-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevolutionjobs%2Fhtml-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevolutionjobs%2Fhtml-editor/lists"}