偽セキュリティ警告(サポート詐欺)画面

警告画面を表示

<h1 id="title">偽セキュリティ警告(サポート詐欺)画面</h1>
<p><button id="btn">警告画面を表示</button></p>
<div id="tel">
  まずはお電話下さい<br>
  📞 000-1234-5678<br>
  <a href="#">お問い合わせフォーム</a>
</div>
<audio id="warning">
  <source src="warning.mp3" type="audio/mpeg">
</audio>

#btn {
  font-size: 2em;
  cursor: pointer;
}

#tel {
  display: none;
  position: absolute;
  top: 1em;
  right: 1em;
  width: fit-content;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #000;
  background: #FFF;
  font-size: 2em;
  text-align: center;
  cursor: pointer;
}

const title = document.getElementById('title')
const btn = document.getElementById('btn')
const tel = document.getElementById('tel')
const warning = document.getElementById('warning')

function disableKeyboard(event) {
  event.preventDefault()
}

function fullScreen() {
  document.documentElement.requestFullscreen()
}

document.addEventListener('contextmenu', function(event) {
  event.preventDefault()
})

btn.addEventListener('click', () => {
  title.textContent = '問題が発生したので、お金を払って下さい！'
  document.addEventListener('keydown', disableKeyboard)
  fullScreen()
  tel.style.display = 'block'
  warning.play()
})

tel.addEventListener('click', (event) => {
  warning.play()
  event.preventDefault()
})

元記事を表示する