Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element'

[jazzmind]

📝 Provide detailed reproduction steps (if any)

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

1. initialize tinyMCE on an element containing the following invalid HTML: <i gothic",="" sans-serif;"="">test</i>

✔️ Expected result

TinyMCE should load and ignore the invalid attributes, potentially stripping them out (I looked for a content filter option to strip invalid attributes but couldn't find one)

❌ Actual result

tinymce.min.js?1712860561:4 Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': 'gothic",' is not a valid attribute name.

❓ Possible solution

The issue seems to stem from lines 1173-1180:

const rawSet = (dom, key, value) => {
if (isString(value) || isBoolean(value) || isNumber(value)) {
try { dom.setAttribute(key, value + ''); } catch (e) {}
} else {
console.error('Invalid call to Attribute.set. Key ', key, ':: Value ', value, ':: Element ', dom);
throw new Error('Attribute value was not simple');
}
};

by wrapping dom.setAttribute in a try/catch it simply strips the invalid attributes from code and then proceeds to load.

[TheSpyder]

Interesting. We use the browser to parse, and these are actually the attributes it gives us.
new DOMParser().parseFromString('<i gothic",="" sans-serif;"="">test</i>', 'text/html')

And then getAttributeNames() on the i tag returns ['gothic",', 'sans-serif;"']

I'm surprised the browser doesn't strip them, as it is returning names that fail the setAttribute call. A try/catch there shouldn't strip those attributes, but stripping them does seem like what we should be doing.

[jazzmind]

I think there are two issues here:

1. Without the above try catch wrapper the error thrown by setAttribute breaks the script execution in chrome. This prevents tinymce.init() from completing so I just get the three loading dots and no error messages. I've tried using .catch() and wrapping in a try/catch block but I can't prevent execution from breaking.

2. As you discovered, the browser's own parser seems inconsistent when it comes to invalid attributes. It parses it without error via DOMParser but throws an unrecoverable error via setAttribute.

Given that inconsistency I agree tinymce probably needs to strip invalid attributes or find another way to fail gracefully without breaking execution.

Please let me know if i'm missing something obvious in regard to how to catch the error at init time without the execution flow breaking as a temp solution.

[TheSpyder]

No, you're right, it's something we have to fix in TinyMCE. I can't see any way for you to work around the runtime error without applying regex to the raw source string.