Заблокирован от доступа к документу SVG, отображаемому с использованием URI данных: доступ к ошибке кадра перекрестного источника

Question

Цель состоит в том, чтобы получить доступ и отредактировать документ SVG, визуализированный через iFrame с URI данных Base64.

Доступ к документу SVG приводит к ошибке перекрестного источника, даже если iFrame визуализируется локально через данныеURI.

Как правильно обращаться к документу SVG, отображаемому через iFrame с URI данных?

jquery.min.js: 2 Uncaught DOMException: заблокирован фрейм с источником"http://localhost:3000" от доступа к фрейму перекрестного происхождения. На новом w.fn.init (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:25204) на w (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:896) на getSVGElemTest (http://localhost:3000/javascripts/editorView.js?1552693529:231:18) на: 1: 1

Код

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>

Обновление ответа @ Kaiido:

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

Да. URL-адреса данных документов считаются различными источниками . Вы можете использовать BLOB-URL для достижения того же самого, без этого ограничения.

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