为什么JavaScript调用alert()会显示IP？如何修改为自定义提示前缀？

现象原因 #

原生alert()属于浏览器内置的系统级弹窗，为了避免恶意页面伪装成系统/官方通知欺诈用户，浏览器会强制在弹窗上标注页面的访问来源（域名或IP地址），该规则属于浏览器的底层安全策略，无法通过JavaScript修改原生alert的前缀内容，你看到的IP地址是当前页面的访问源，属于浏览器的正常行为。

自定义提示实现方案 #

如果需要使用「此页面提示」这类自定义前缀，需要放弃原生alert()，改用HTML+CSS+JavaScript实现模拟弹窗，完全自主控制弹窗的所有展示内容，示例代码如下：

HTML结构 #

<button id="hover-me">Move the cursor over here</button>

<!-- 自定义弹窗容器 -->
<div id="custom-alert" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: 300px; z-index: 9999;">
  <div style="padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 500;">此页面提示</div>
  <div id="alert-content" style="padding: 16px;"></div>
  <div style="padding: 8px 16px; border-top: 1px solid #eee; text-align: right;">
    <button id="alert-close" style="padding: 4px 12px; border: none; background: #1677ff; color: #fff; border-radius: 2px; cursor: pointer;">确定</button>
  </div>
</div>

<!-- 遮罩层，避免弹窗出现时操作页面其他内容 -->
<div id="alert-mask" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.1); z-index: 9998;"></div>

JavaScript逻辑 #

// 封装自定义弹窗方法
function customAlert(msg) {
  document.getElementById('alert-content').textContent = msg;
  document.getElementById('custom-alert').style.display = 'block';
  document.getElementById('alert-mask').style.display = 'block';
}

// 绑定关闭事件
document.getElementById('alert-close').addEventListener('click', () => {
  document.getElementById('custom-alert').style.display = 'none';
  document.getElementById('alert-mask').style.display = 'none';
})

// 替换原有逻辑中的alert
document.getElementById("hover-me").onmouseover = function() {
  customAlert("You hovered me");
};

以上模拟弹窗的样式、前缀文本都可以根据需求自由调整，不会出现浏览器强制添加的IP标识。

内容的提问来源于stack exchange，提问作者user17291070