Why does dynamically generating an SVG using HTMLObjectElement lead to a Cross-Origin error?

Question

Consider the following JavaScript snippet:

const app = document.getElementById(\'root\');
const svg = `

Answer 1

because the object tag defines an embedded object within the HTML document, it's not part of the document itself, and therefore must respect the CORS like a frame

Same-origin policy

here clearly states that the content of the object tag is considered an external resource

The HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.