BUG: Ampersand is not escaped in attribute value #6603
Description
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome v142.0.7392.0 (canary)
Reproducible demo link
https://jsfiddle.net/xce183nm/1/
Describe the bug
How to reproduce the bug?
- Create an editor instance and load HTML code that contains character references in attribute value.
const editor = grapesjs.init({ components: '<body><p title="< &amp; >"></p></body>', });
- Get HTML code.
const result = editor.getHtml();
What is the expected behavior?
Symbols in attribute value are escaped with character references. The title attribute value of the p element is parsed as < & >.
<body><p title="< &amp; >"></p></body>What is the current behavior?
Symbols in attribute value are not escaped. The title attribute value of the p element is parsed as < & >.
<body><p title="< & >"></p></body>We have to escape ampersand to keep round-trip conversion between HTML parsing and serializing.
In addition, I think it is better to escape less-than and greater-than since:
- Latest browsers escape less-than and greater-than in attribute value (e.g.
const p = document.createElement('p'); p.title = '< & >'; p.outerHTML;outputs'<p title="< &amp; >"></p>'), and - There are many programs that process HTML code with rough regexp pattern like
<[^>]+>. Escaping less-than and greater than improves interoperability with those programs.
Code of Conduct
- I agree to follow this project's Code of Conduct