HTMLでコピペできそうでできない要素を作る

歌詞サイト内で湘南乃風の睡蓮花の歌詞がだんだん大きくなっていた「作詞XSSとか楽しすぎるものをみたけど…」 - Togetter

うたまっぷといえばコピペ禁止、コピペ禁止といえば最近こういう嫌がらせを考えていたので、やってみました。

↑をマウスで選択してコピペしてみてください。うまく範囲選択できないし、できたとしても無意味な文字列になります

仕組み

テキストをランダムに並び替える
ランダムに並び替えた文字を, 元の位置に来るように flex の order 属性を指定

フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN

コード

React でさっくり書いた

function Text() {
  const text = "YOU-CANNOT-COPY-THIS-TEXT";
  const chars = text.split("");

  const textOrders = chars.map(_ => Math.floor(Math.random() * 1000));
  const textOrdersSorted = textOrders.slice().sort();
  const idxMap = textOrdersSorted.map(v => {
    return textOrders.findIndex(n => n === v);
  });

  const chars = idxMap.map((to, original) => {
    return <div style={{ order: to }}>{chars[to]}</div>;
  });
  return (
    <>
      <div>
        <div style={{ display: "flex", flexDirection: "row" }}>{chars}</div>
      </div>
    </>
  );
}

const el = document.querySelector(".root");
ReactDOM.render(<Text />, el);

実行環境

https://markdown-code-runner.netlify.com/MQAgsghgTg1gJgewO4DsQGEFwKYgEoCuKK2UAUGQAbUAuAzmQGZEDGNAlgmgCrYAeNABQBKEAG8yIECy50aIGv3kBeEACIAmgHkAqgFp0AQQByxrdwNaAChr3cAEgEkAynYCiADW5qA3JOmy8iwAFtB0IKqKAgB0dAAOADbsQmpqwn7+MihyCkpaUDhQ4aohYdEAthBxggD6EQB84BA0wdGMCQgIUIKQLdFQECiI5SIgAFQgAIwADLPC6ZmBuQL5hXTOXYpwEcs0q6R0sUks2CKxmyIZUlk57HB8kHE7UXsFBxtQWxVVgoIAbgAaEAkJCOe6iZSNCRSKRQbA0AhQNAvfZFNrsIaOIb8QRoSHAiLKVR-BZSAC+pIC2XkIPQoSKOzuDyq32q7Aa0npdAA2uwALoLRbUkDYBLFEBMx6s340BBArrsADmGIgCQhUP8sPhiLQAB44Ow-iA5ABPBLYZRiMQgLqFABcCgQIDJZPqYlKRW5sr5ZN1AHoDX96n5yZS4QikSBBJqQLr6jGpPrDfGYanY4HjTQzRarSADfEEhATQ61O1+GogWW+AARdhwticFAlqDINTO11iUV0X0B5MJ2O9oMx-0pkALMkUG7yUU7RAsAjlbAoGjRACOBFIJucouwbC6gjU-U6NDSfjw2AgbGrWjA-SXhUEut4AhAfvqQNFC2olDIQA

だるくてマルチバイト対応してないので、コードポイントで分割してください。

謝罪文などでこれが来たらいい感じに読者の反感を買えると思います。悪用禁止！！！！！！！！！！！！！！！