42
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSAdvent Calendar 2018

Day 14

マウスカーソルを操ってめちゃくちゃイライラさせるUXを作ってみた

Last updated at Posted at 2018-12-14

この記事は、CSS Advent Calendar 2018 - Qiitaの14日目の記事です。

成果物

ezgif-4-10179e34aa8f.gif

CodePen - Mouse Cursor Jamming

"CLICK ME!"ボタンに近づけば近くほどマウスカーソルがあらぶります。それだけ。
もちろんスマホはカーソルが表示されないため非対応(?)

どうやって実装しているか

マウスカーソルの位置を変更することはブラウザではできません。
そもそもそれができたらセキュリティ的に怖いことになります。

今回実装したのは擬似的にマウスカーソルをいじっているように見せかけているだけです。

やっていることはこれ↓だけ

  1. ブラウザ上でマウスカーソルの表示を消す
  2. (消えている)マウスカーソルの位置を取得
  3. カーソルの位置あたりにこちらで用意したカーソルの画像を表示する
  4. カーソルの画像の位置をよしなに動かす

まず、ブラウザ上では以下のコードでマウスカーソルを消すことができます。ちなみにcursor: url(...)で独自のカーソルに変えられます。

<div class="target">...<div>
<style>
.target {
  cursor: none
}
</style>

また、ブラウザ上ではマウスカーソルの位置を取得できます。

viewElement.addEventListener('mousemove', (mouse) => {
  console.log(mouse.pageX, mouse.pageY)
  ...
})

これでやりたいようにできます。

コード全体

See the Pen Mouse Cursor Jamming by いーふとイチオカ🔰(@redshoga) (@redshoga) on CodePen.

余談

なんでこれを作ろうと思ったかというと、以前どっかの怪しいサイトでやられたからです。

その時は「マウスがジャックされた!!」って思ったんですが、なんやこれマウスカーソル非表示にしてる↑みたいにしてるだけやんけ!ってすぐ気がつきました。

ただあまりリテラシーのない人とかがウェブサイトに入って「ウィルスにかかりました!ほらマウスカーソルが乗っ取られてるでしょ!」みたいな言われたら、パニクってなにするかさせられるかわからない。だから、cursorプロパティでカーソルいじれるってある種の脆弱性だと思います。

そんなこともあって**cursorプロパティは廃止にした方がいいと思うんです。**(もしくはnoneやurlの設定をできないようにする)

おわりおしり

42
13
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?