Nginx 配置后前端页面样式全乱了，怎么安全加固还不影响静态资源？

博主子聪提问于 2026-03-17 13:32:23 阅读 7

工具

我最近按网上教程给 Nginx 加了一些安全头，比如 X-Content-Type-Options 和 Content-Security-Policy，结果部署后发现页面的 CSS 和 JS 全加载不了，控制台报 CSP 错误。我明明只限制了外部脚本，为啥本地静态资源也挂了？

这是我在 index.html 里引用资源的方式：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/static/css/app.css">
</head>
<body>
  <script src="/static/js/app.js"></script>
</body>
</html>

现在不知道是该放宽 CSP 策略，还是调整 Nginx 的 location 规则？求真实可行的配置方案。

Nginx 安全加固

我来解答赞 6 收藏

反馈

1 条解答

Prog.国凤 Lv1

这个问题很典型，CSP默认是禁止所有的，你没配好来源策略的话，所有资源都会被拦截。

核心原因：你的CSP只写了限制外部脚本，但没告诉浏览器允许加载同源的静态资源。浏览器不认识 src="/static/css/app.css" 这种相对路径需要被允许。

最直接的修复方式是在CSP里加上 default-src 'self'，或者更精确地指定允许的来源：

# Nginx server 块里加上这些安全头

add_header X-Content-Type-Options "nosniff" always;

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" always;

解释一下关键点：

default-src 'self' 是基础配置，表示默认允许同源（当前域名）的资源。后面再针对具体类型细化规则。

style-src 'self' 'unsafe-inline' 是因为很多项目的CSS里可能有内联样式，或者你用的一些UI框架依赖内联样式。如果不加这个，页面样式还是会挂。

img-src 'self' data: 允许加载data URI格式的图片（base64之类的），不加的话base64图片会显示不出来。

如果你的静态资源在独立CDN或者子域名上，还得把那个域名加进去，比如 default-src 'self' cdn.example.com。

X-Content-Type-Options 那个头和MIME类型相关，主要防止浏览器偷偷猜测文件类型导致执行意外代码，和你样式挂掉的问题关系不大。

还有个更省心的写法，如果你不想纠结具体哪些来源，可以先用宽松一点的策略：

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval';" always;

不过生产环境建议还是按需配，能不宽松就不宽松。

改完配置记得 nginx -s reload 生效，然后开无痕模式清缓存测试。

2026-03-17 22:01