KPC
Kevin Powell - Community•7d ago
Faker

Content security policy and default-src

Hello, I'm currently using express to serve my html files from a static directory but it seem my index.html web page isn't being served; I have the error cannot get \ and in the console, this error: Refused to connect to http://localhost:8080/ because it violates the following Content Security Policy directive (connect-src) here is my code: 
import express from "express";
import { readFileSync } from "fs";
import { getProperties } from "properties-file";
import path from "path";
import { cwd } from "process";
import cors from "cors";

const allowedOrigins = ["http://localhost:8080"];
const corsOptions = { origin: allowedOrigins };

const configurationPath = path.join(
  `${cwd()}`,
  "Lesson-Product-Page-Back-end",
  "configurations",
  "configurations.properties"
);

const app = express();
const port = getProperties(readFileSync(configurationPath)).port;

app.use(cors(corsOptions));

// Serve static files
app.use(express.static(../Lesson-Product-Page"));

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});
import express from "express";
import { readFileSync } from "fs";
import { getProperties } from "properties-file";
import path from "path";
import { cwd } from "process";
import cors from "cors";

const allowedOrigins = ["http://localhost:8080"];
const corsOptions = { origin: allowedOrigins };

const configurationPath = path.join(
  `${cwd()}`,
  "Lesson-Product-Page-Back-end",
  "configurations",
  "configurations.properties"
);

const app = express();
const port = getProperties(readFileSync(configurationPath)).port;

app.use(cors(corsOptions));

// Serve static files
app.use(express.static(../Lesson-Product-Page"));

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});
I did google about what CSP is, from what I've understood it's a response header that is include for security purpose like preventing XSS attacks by preventing malicious scripts from being loaded in our websites from external resrouce (please feel free to add anything if I'm missing important points). Now from what I've seen on google, they were suggesting to modify helmet configuration settings, from what I've read helmet is just some configurations that adhere to the web security standards. So was wondering how should I proceed to overcome this error pls, I don't really understand why I'm getting this in the first place because everything is still local on my machine .
5 Replies
Faker
FakerOP•7d ago
It seem my static file path was incorrect, I make use of path.join() and it's now working, I would really appreciate if someone can explain what might have happened though
13eck
13eck•6d ago
cannot get \ makes it look look you’re on a Windows machine. The web uses Unix separator (/) and Windows doesn’t (it uses \). That’s what path.join() does, converts to local.
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
https://nodejs.org/docs/latest-v22.x/api/path.html#pathjoinpaths
Faker
FakerOP•6d ago
yeah I see when we say it normalizes the resulting path, what do we mean by that, like for the web to access the resouce we would expect it to now be in UNIX format? by the way, do you know why we obtain the CSP error?
13eck
13eck•6d ago
"Normalization" is when it resolves relative paths to absolute. So if, for example, there is . or .. in the path name it removes them and makes it a full path. . being the terminal shortcut for "this current folder" and .. being the shortcut for "the parent folder of the current folder". I have no idea about that, sorry.
Faker
FakerOP•6d ago
yep I see no worries !! it works now so I will not bother about that

Did you find this page helpful?