Blocked from accessing SVG document rendered with data URI: accessing a cross-origin frame error

Question

The goal is to access and edit a SVG document rendered via an iFrame with a Base64 data URI.

Accessing the SVG document yields a cross-origin error, even though the iFrame is rendered locally via a data URI.

What's the right way to access a SVG document rendered via an iFrame with a data URI?

jquery.min.js:2 Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame. at new w.fn.init (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:25204) at w (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:896) at getSVGElemTest (http://localhost:3000/javascripts/editorView.js?1552693529:231:18) at :1:1

Code

function getSVGElemTest() {
   var svgElem = $("#svgTest iframe")[0].contentWindow).find("svg").first();

   return svgElem;
}

HTML

<div id="svgTest">
<iframe src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzguNTMzIDQzOC41MzMiIHN0eWxlPSItLWhwLWNvbG9yLTN5TmhTQWhpLTE6dXJsKFwjY29sb3ItM3lOaFNBaGktMSk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIiBkYXRhLWhwLWNvbG9yLXByZXBhcmVkPSJ0cnVlIj48bGluZWFyR3JhZGllbnQgaWQ9ImNvbG9yLTN5TmhTQWhpLTEiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMjQxLDM5LDE3KSIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9InJnYigyNDUsMTc1LDI1KSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48Zz48Zz4KCTxwYXRoIGQ9Ik00MDkuMTMzLDEwOS4yMDNjLTE5LjYwOC0zMy41OTItNDYuMjA1LTYwLjE4OS03OS43OTgtNzkuNzk2QzI5NS43MzYsOS44MDEsMjU5LjA1OCwwLDIxOS4yNzMsMCAgIGMtMzkuNzgxLDAtNzYuNDcsOS44MDEtMTEwLjA2MywyOS40MDdjLTMzLjU5NSwxOS42MDQtNjAuMTkyLDQ2LjIwMS03OS44LDc5Ljc5NkM5LjgwMSwxNDIuOCwwLDE3OS40ODksMCwyMTkuMjY3ICAgYzAsMzkuNzgsOS44MDQsNzYuNDYzLDI5LjQwNywxMTAuMDYyYzE5LjYwNywzMy41OTIsNDYuMjA0LDYwLjE4OSw3OS43OTksNzkuNzk4YzMzLjU5NywxOS42MDUsNzAuMjgzLDI5LjQwNywxMTAuMDYzLDI5LjQwNyAgIHM3Ni40Ny05LjgwMiwxMTAuMDY1LTI5LjQwN2MzMy41OTMtMTkuNjAyLDYwLjE4OS00Ni4yMDYsNzkuNzk1LTc5Ljc5OGMxOS42MDMtMzMuNTk2LDI5LjQwMy03MC4yODQsMjkuNDAzLTExMC4wNjIgICBDNDM4LjUzMywxNzkuNDg1LDQyOC43MzIsMTQyLjc5NSw0MDkuMTMzLDEwOS4yMDN6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjZmZmZmZmIiBmaWxsPSIjZmZmZmZmIiBzdHlsZT0iZmlsbDogdmFyKC0taHAtY29sb3ItM3lOaFNBaGktMSk7Ii8+CjwvZz48L2c+IDwvc3ZnPg=="></iframe>
</div>

Update for @Kaiido's answer:

const svgElem = DesignBox.find("svg").first();
const imageType = "image/svg+xml";
const blob = new Blob([svgElem[0]], { type: imageType });
const url = URL.createObjectURL(blob);
const svgIframe = document.createElement("iframe");
svgIframe.src = url;

ColorClassProxyBox.append(svgIframe);

Answer 1

Yes data URLs documents are considered different origin. You can use a blob URL to achieve the same, without this restriction.

const blob = new Blob([markup], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);