文字列流し込みアプリ

以下が実際のプログラムです。セキュリティ脆弱性がある部分はチェックして拒否しています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字列流し込みアプリ</title>
</head>
<body>
  <h1>文字列流し込みアプリ</h1>
  <input type="text" id="inputString" placeholder="流し込む文字列を入力してください">
  <button onClick="startFlow()">Start</button>
  <div id="flowContainer" style="height:400px; overflow:hidden;"></div>

  <script>
    function startFlow() {
      const inputString = document.getElementById("inputString").value;
      const flowContainer = document.getElementById("flowContainer");
      flowContainer.innerHTML = ""; // 一度初期化する

      // セキュリティチェック
      if (inputString.indexOf("<") !== -1 || inputString.indexOf(">") !== -1 || inputString.indexOf("javascript:") !== -1) {
        alert("セキュリティ上のリスクがあるので、入力内容を確認してください");
        return;
      }

      // 文字列をランダムにシャッフルする
      const shuffledString = shuffleString(inputString);

      // 1文字ずつ上から下へ流すアニメーションを作る
      for (let i = 0; i < shuffledString.length; i++) {
        const span = document.createElement("span");
        span.textContent = shuffledString[i];
        span.style.position = "absolute";
        span.style.fontSize = "30px";
        span.style.top = "-50px";
        span.style.left = Math.random() * 100 + "%";
        span.style.animation = "flow 10s linear";
        flowContainer.appendChild(span);
      }
    }

    // 文字列をシャッフルする関数
    function shuffleString(str) {
      const array = str.split("");
      for (let i = array.length - 1; i >= 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // swap
      }
      return array.join("");
    }
  </script>

  <style>
    @keyframes flow {
      0% { top: -50px; }
      100% { top: 100%; }
    }
  </style>

</body>
</html>
```

ちなみに、ジョークとして「入力された文章が暗号化されているため、復元するには2,000円かかります」とメッセージを表示するようにしてみました。