動画IDを入力してYoutubeの動画を表示する

記事の作成日　：　2020/03/01

Youtubeには他のサイトでYoutubeの動画を再生できるようなサービスがあります。
今回は動画IDを入力して動画を見れるようにします。ついでに Iframeを使います。

全く関係のない話
文章を見やすくするために全体の行間を広くしました。
以前より詰め詰めではなくなりました。

以前
CSSの可能性も無限大
でもアニメーションの着火タイミングが分らない
だから私は、Javascript。(逃げた)

今
CSSの可能性も無限大
でもアニメーションの着火タイミングが分らない
だから私は、Javascript。(逃げた)

先にサンプル

動画ID(v = ??)：
[ここでは処理されたHTMLを確認できます]

仕組み

仕組みは単純明解。入力された文字を代入しているだけ。

Youtubeの　Iframe 専用のURL

Iframeを使用する場合は、次のようなコードになります。 
<iframe src='https://www.youtube.com/embed/ ここに動画ID '></iframe>
innerHTMLを使って<iframe>自体を書き込むのですが、ちょっと問題があります。 問題というのはセキュリティーに関するもので、
何の対策もせずにinnerHTMLで代入してしまうのは危険です。
例えば、 
<script>
    // 更新ボタンが押されたら実行されるよ
    function update() {
        // テキストボックスから　動画のIDであろう文字列 を取得する。
        var vid = document.getElementById("video_id").value;

        // 下のinnerHTML で使う
        var video = document.getElementById("video");

        // 書き込む
        video.innerHTML = "<iframe frameborder='0' width='100%' height='360px' src='https://www.youtube.com/embed/" + vid + "'></iframe>";
    }
</script>
<!-- テキストボックス -->
動画ID(v = ??)：<input id="video_id" type="url">
<!-- 更新ボタン -->
<input onclick="update()" type="button" value="更新する">
<!-- innerHTMLで書き出される場所 -->
<div id="video"></div>
上記の場合、テキストボックスに

のようなコードを実行されると、　”ここに悪意のあるコードを書き込まれる危険性あり”　が表示されてしまいます。
表示だけではなく、スクリプトも実行できてしまいます。

クロスサイトスクリプティング - Wikipedia

innerHTMLはHTMLとしてそのまま書き込みます。 
return " <a href=' "+ link +" '>リンク</a> "
linkに '></a> @ <a href='を代入することによって最終的には、 
<a href='  '></a> @ <a href=' '>リンク</a>
となり、＠　が表示されます。
これを避けるには エスケープと呼ばれる処理を行う必要があります。

エスケープ処理の変換表の一部

処理前 処理後
< &lt;
> &gt;
" &quot;
' &#39;
サンプルでは、エスケープ処理はせずに、許可されていない文字を使ったら削除するという処理をしているのでエスケープ処理は参考程度に。

コード

<script>
    function secureCheck(req) { // 指定された文字列に悪意のあるコード実行させないための処理だよ
        var allow = "[a-z,A-Z,0-9,_,-]"; // 許可される文字（正規表現を使ってる）
        var len = req.length - 1;
        var typedtc = "",　// あなたは文字列だっ（これをしておかないと undefined が入っちゃう）
            safe = "",
            i = 0;

        for (i = 0; i <= len; i++) {
            typedtc = req[i].match(allow);  // match は合っているならば そのまま返ってくる。　不一致ならば　null が返ってくる。
            if (typedtc != null) {
                safe += typedtc; // null じゃなかったら増やしていく
            }
        }

        return safe; // 出力する
    }

    function update() {
        var output;
        var elem = document.getElementById("video_id");
        var video = document.getElementById("video");

        output = secureCheck(elem.value);

        if (output == "") {
            return
        } // 空白だったらキャンセル

        video.innerHTML = "<iframe frameborder='0' width='100%' height='360px' src='https://www.youtube.com/embed/" + output + "'></iframe>";
    }
</script>
<!-- テキストボックス -->
動画ID(v = ??)：<input id="video_id" type="url">
<!-- 更新ボタン -->
<input onclick="update()" type="button" value="更新する">
<!-- innerHTMLで書き出される場所 -->
<div id="video"></div>

＜＜前　：　ランダム独り言
＞＞次　：　文字列関連の説明（操作）