如何在Node.js Express(TypeScript)API中移除Content Security Policy？

问题 #

我正在用Node.js结合Express与TypeScript构建Web API，目标是调用psn-api模块获取Playstation Network已登录用户的信息。但调用模块中调用外部API的函数时，出现错误：

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

我尝试过设置多种响应头配置，但都没效果，想问是不是需要在Node中配置禁用该安全策略？

相关代码 #

import express from 'express';
import { exchangeCodeForAccessToken, exchangeNpssoForCode,getUserTrophyProfileSummary } from "psn-api";

const app = express()
const port = 3000

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

const myNpsso = "userToken";

app.get('/trophySummary', (req, res) => {
  var result = getUserTrophySummary();
  res.send(result)
})

async function getUserTrophySummary(){
  // We'll exchange your NPSSO for a special access code.
const accessCode = await exchangeNpssoForCode(myNpsso);

// We can use the access code to get your access token and refresh token.
const authorization = await exchangeCodeForAccessToken(accessCode);

return getUserTrophyProfileSummary(authorization,"me");
} 

尝试过的响应头配置 #

res.setHeader(
    'Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'"
  );

解答 #

先理清问题根源 #

这个CSP错误不是你的API服务导致的，而是浏览器自身的安全策略：当你直接在浏览器地址栏访问API接口（比如localhost:3000/trophySummary）时，浏览器会自动请求favicon.ico网站图标，但你的API返回的是纯文本/JSON数据，没有配置CSP允许加载这个图标，所以浏览器抛出了错误。

你的API本身是给后端服务或前端页面调用的，不是直接给浏览器打开用的，所以这个错误本质上不影响API的核心功能。

解决方法（按需选择） #

1. 直接忽略：如果只是测试API，这个错误不影响接口逻辑，完全可以不管。
2. 添加favicon文件：在项目根目录创建public文件夹，放入一个favicon.ico文件，然后用Express静态文件中间件托管：

import express from 'express';
const app = express();
// 托管静态文件，让浏览器能获取到favicon.ico
app.use(express.static('public'));

3. 全局配置CSP响应头：如果一定要消除错误，可以在Express全局设置CSP，允许加载本地图标（包括data协议的默认图标）：

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; img-src 'self' data:;"
  );
  next();
});

⚠️ 别直接禁用CSP，这会降低安全性。而且CSP是浏览器端的安全策略，Node服务端只需要正确设置响应头即可，不需要禁用。

额外修复API代码的异步问题 #

你的/trophySummary接口有个异步逻辑错误：getUserTrophySummary是异步函数，直接赋值给result会返回Promise对象而非实际数据，需要改成异步处理：

app.get('/trophySummary', async (req, res) => {
  try {
    const result = await getUserTrophySummary();
    res.json(result); // 用res.json返回JSON格式，比res.send更适配API场景
  } catch (err) {
    res.status(500).json({ error: err.message }); // 捕获并返回错误信息，方便调试
  }
})

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