React组件如何防止点击劫持绕过确认弹窗？

// 组件里加这个hook

useEffect(() => {

  if (window.self !== window.top) {

    document.body.innerHTML = '别想嵌套我';

  }

}, []);



// CSS里加这个

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.01); // 近乎透明但能拦截点击

}

function ConfirmButton({ onDelete }) {

  const [showModal, setShowModal] = React.useState(false);

  const [timestamp, setTimestamp] = React.useState(null);



  // 检查是否被iframe嵌套

  React.useEffect(() => {

    if (window.top !== window.self) {

      console.warn("页面被iframe嵌套了！");

      // 可以选择禁用按钮或者提示用户

    }

  }, []);



  const handleClick = (e) => {

    e.stopPropagation();

    setTimestamp(Date.now());

    setShowModal(true);

  };



  const handleConfirm = () => {

    // 确保确认操作在合理时间内完成

    if (Date.now() - timestamp < 5000) {

      onDelete();

    } else {

      console.warn("操作超时");

    }

    setShowModal(false);

  };



  return (

    <>

      删除

      {showModal && (

        


          
确认删除？


          确定

           setShowModal(false)}>取消

        


      )}

    

  );

}