在现代 Web 开发中，有时我们希望网页仅能访问自己的网站资源，而不能随意请求外部域名或 IP。这种需求在内网管理系统、企业门户或对安全要求较高的应用中尤其常见。本文将详细介绍如何在 前端层面实现这一目标。
1. 概念
“禁止网页访问其他域名或 IP”，指的是限制网页中的脚本、AJAX 请求、图片、样式和其他资源，只能从指定的域名加载。
在前端，常见的做法是利用 浏览器安全机制，通过策略告诉浏览器允许加载哪些资源，从而阻止页面加载或请求不在白名单的域名。
2. 原理
前端限制主要依赖浏览器的 Content Security Policy（CSP） 。
CSP 是一种浏览器安全策略，它可以控制网页可以加载和执行的内容来源。例如：
default-src 'self'：默认只允许从当前域加载资源connect-src 'self'：限制 AJAX/fetch/WebSocket 只能连接本域img-src 'self'：图片只能从本域加载script-src 'self'：JavaScript 脚本只能从本域加载style-src 'self'：CSS 样式只能从本域加载
当页面尝试加载不在白名单的资源时，浏览器会直接阻止并在控制台报错。
3. 实践方法
3.1 HTML <meta> 标签方式
在 HTML <head> 中添加以下标签：
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
connect-src 'self';
img-src 'self';
script-src 'self';
style-src 'self';
frame-ancestors 'none';">
逐项解析：
default-src 'self'→ 默认所有资源只能从本域加载connect-src 'self'→ AJAX/fetch/WebSocket 只能访问本站img-src 'self'→ 图片只能从本站加载script-src 'self'→ JS 脚本只能从本站加载style-src 'self'→ CSS 样式只能从本站加载frame-ancestors 'none'→ 禁止本网页被嵌入 iframe
3.2 实践示例
假设你有一个内网管理系统，只允许访问自己服务器的 API 和资源：
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
connect-src 'self' https://api.company.local;
img-src 'self';
script-src 'self';
style-src 'self';">
说明：
https://api.company.local是允许访问的 API 白名单- 其他域名的 AJAX 请求或脚本、图片加载都会被浏览器阻止
4. 拓展和优化
-
允许安全 CDN：如果必须加载第三方库，可以在 CSP 白名单中加入 CDN 域名
script-src 'self' https://cdn.jsdelivr.net; -
调试：浏览器控制台会显示 CSP 拦截信息，便于调整策略
-
iframe 限制：使用
frame-ancestors 'none'防止网页被嵌入外部站点
5. 潜在问题与注意事项
- CSP 只对浏览器有效，用户仍可通过控制台手动发起请求
- 过于严格的 CSP 可能导致网页功能异常，如字体或第三方库加载失败
- 对于更高安全要求，可结合后端防火墙或网络层封锁 IP
6. 总结
在前端层面，Content Security Policy（CSP） 是控制网页访问域名和 IP 的最佳实践。通过合理配置 CSP，开发者可以：
- 限制网页资源和请求来源
- 防止跨站脚本（XSS）或恶意请求
- 提升应用安全性
推荐使用以下最小安全 CSP 配置：
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
connect-src 'self';
img-src 'self';
script-src 'self';
style-src 'self';
frame-ancestors 'none';">
结合白名单策略和调试，可在保持功能的同时，大幅提高网页安全性。
本文部分内容借助 AI 辅助生成，并由作者整理审核。
