javascript - React APP で HTML スクリプトを DOM に追加する

Question

ユーザーが他のサービス スクリプトを埋め込み、react.js を使用して実行されるマーケットプレイスで実行できるようにする機能に取り組んでいます。

下の画像は、ユーザーがスクリプトを追加した Textarea を示しています (充実させるためだけに)

ウィンドウ ロード イベント (attachEvent、addEventListener など) を使用する特定のスクリプトで問題が発生しています。

ここでの問題は、ページが読み込まれた後にスクリプトが実行され、window.onload が呼び出されなかったということです。

スクリプトを受け取り、スクリプト タグをテキストとして抽出し、有効な HTML スクリプト ノードに変換します。

以下のコードはプロセスを説明しています

1. リスト項目

function htmlTextToHtmlNode(htmlText) {
    const el = document.createElement('dev')
    el.innerHTML = htmlText
    return el.firstElementChild
}

const convertScriptsTextToDom = scriptTag => {
    try {
        const matchRegex = /<script[\s\S]*?>[\s\S]*?<\/script>/gi
        const isValidScriptTag = matchRegex.test(scriptTag);

        if (!isValidScriptTag)
            throw new Error('Invalid script tag')

        const scripts = scriptTag.match(/<script[\s\S]*?>[\s\S]*?<\/script>/gi);

        const scriptsNodes = scripts.map(htmlTextToHtmlNode);
        return scriptsNodes

    } catch (err) {
        console.error(err);
        return []
    }
}

function appendNodeToHead(element) {
    let tag = document.createElement('script');
    tag.defer = element.defer ? element.defer : true;
    tag.async = element.async ? element.async : true;

    if (element.src) tag.src = element.src

    tag.type = element.type ? element.type : "text/javascript"
    tag.innerHTML = element.innerHTML

    const body = document.getElementsByTagName('body')[0];
    body.appendChild(tag);
}


export default (scriptTag) => {
    const Nodes = convertScriptsTextToDom(scriptTag) 
    if (Array.isArray(Nodes) && Nodes.length) Nodes.forEach(appendNodeToHead)
}

何かご意見は？