Блог

Как твои дела?

У меня есть некоторые проблемы с CSP в ExpressJS. Если я буду использовать только шлем, этого не произойдет. Однако, когда я использовал пакет cors со шлемом, браузер выдал ошибку о шрифте. Я не понимаю этой проблемы.

NodeJS версии 14.16.1 экспресс версии 4.17.1 шлем версии 4.6.0 cors версии 2.8.5

Я не понимаю этой проблемы

Я прочитал документ о cors и csp. Итак, я написал код о csp с помощью шлема.

 app.use(  helmet.contentSecurityPolicy({  useDefaults: true,  directives: {  "script-src": ["'unsafe-eval'"], //development mode should allow 'unsafe-eval' because eval function  "img-src": ["'self'", "data:", "https:"],  "frame-src": "https://www.youtube.com/",  "font-src": ["'self'", "data:", "https:"],  "style-src": [  "'self'",  "'unsafe-inline'",  "https://cdnjs.cloudflare.com",  ],  },  }), );  

 @import url("https://fonts.googleapis.com/css2?family=Noto Sans KR:wght@100;300;400;500;700;900amp;display=swap");  @font-face {  font-family: "Material Icons";  font-style: normal;  font-weight: 400;  src: url(https://fonts.gstatic.com/s/materialicons/v107/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)  format("woff2"); }  

Это не было проблемой. Но проблема в том, что когда я написал код о cors, браузер выдал ошибку, как на изображении выше.

 const whitelist = ["http://localhost:4000", "https://fonts.googleapis.com", "https://fonts.googleapis.com"];  export const corsOptions = {  origin: (origin, callback) =gt; {  if (whitelist.indexOf(origin) !== -1) {  callback(null, true);  } else {  callback(new Error());  }  }, };  app.use(cors(corsOptions));  

Я не понимаю этой проблемы. Я не могу найти решение.

Как я могу решить эту проблему?

========== полный код ==== = == =

 import express from "express"; import morgan from "morgan"; import rootRouter from "./router/root.router"; import worshipRouter from "./router/worship.router"; import noticeRouter from "./router/notice.router"; import api from "./router/api.router"; import userRouter from "./router/user.router"; import session from "express-session"; import cookieParser from "cookie-parser"; import MongoStore from "connect-mongo"; import helmet from "helmet"; import { locals, preUrl, corsOptions, csrfProtection } from "./middleWare"; import documentsRouter from "./router/documents.router"; import blogRouter from "./router/blog.router"; import permissionsPolicy from "permissions-policy"; import cors from "cors";  const app = express();  app.use((req, res, next) =gt; {  if (req.get("X-Forwarded-Proto") == "https" || req.hostname == "localhost") {  next();  } else if (  req.get("X-Forwarded-Proto") != "https" amp;amp;  req.get("X-Forwarded-Port") != "443"  ) {  res.redirect(`https://${req.hostname}${req.url}`);  } });  app.use(helmet()); app.use(  helmet.contentSecurityPolicy({  useDefaults: true,  directives: {  "script-src": ["'unsafe-eval'", process.env.URL], //development mode should allow 'unsafe-eval' because eval function  "img-src": ["'self'", "data:", "https:"],  "frame-src": "https://www.youtube.com/",  "font-src": ["'self'", "data:", "https:"],  "style-src": [  "'self'",  "'unsafe-inline'",  "https://cdnjs.cloudflare.com",  ],  },  }), ); app.use(  helmet.hsts({  maxAge: 31536000,  preload: true,  }), ); app.use(helmet.xssFilter()); app.use(  permissionsPolicy({  features: {  fullscreen: ["self", '"https://www.youtube.com"'],  displayCapture: ["self"],  autoplay: [],  camera: [],  },  }), );  const whitelist = ["http://localhost:4000"];  export const corsOptions = {  origin: (origin, callback) =gt; {  if (whitelist.indexOf(origin) !== -1) {  callback(null, true);  } else {  callback(new Error());  }  }, };  app.use(cors(corsOptions));  app.use(morgan("dev")); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser()); app.use(  session({  secret: process.env.SESSION_SECRET,  resave: false,  saveUninitialized: false,  expires: 1000 * 60 * 60 * 24,  httpOnly: true,  secure: true,  store: MongoStore.create({  mongoUrl: process.env.MONGO_URL,  }),  }), );  app.use(csrfProtection); app.use(function (err, req, res, next) {  if (err.code !== "EBADCSRFTOKEN") return next(err);  res.status(403).json({ error: "session has expired or tampered with" }); });  app.set("views", process.cwd()   "/src/views"); app.set("view engine", "pug");  app.use("/static", express.static("client")); app.use("/favicon", express.static("favicon")); app.use("/uploads", express.static("uploads"));  app.use((req, res, next) =gt; {  req.sessionStore.all((error, sessions) =gt; {  next();  }); });  app.use(locals); app.use("/", rootRouter); app.use("/notice", noticeRouter); app.use("/documents", documentsRouter); app.use("/blog", blogRouter);  app.use("/user", userRouter);  app.use("/api", api);  export default app;