Content Security Policy (CSP) blocks icons about masterportfolio

[rahulsain]

Upload your code to a GitHub repo and share the link here. It will be much easier to debug :)

https://github.com/rahulsain/backend

will send you collab access, file is in frontend folder, npm version 14.0.0

[dhruvkrishnavaid]

Install and save cors: npm i cors
Then import it and use it in main file: app.use(cors())

[rahulsain]

Install and save cors: npm i cors Then import it and use it in main file: app.use(cors())

// enabling CORS for all requests
app.use(cors());

already using it

[dhruvkrishnavaid]

In the index.html, try this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *;"

[rahulsain]

still not resolved using
<meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://avatars.githubusercontent.com/; script-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://pagead2.googlesyndication.com/; style-src * data: blob: 'unsafe-inline' 'unsafe-eval';">

[dhruvkrishnavaid]

Upload your code to a GitHub repo and share the link here. It will be much easier to debug :)

[dhruvkrishnavaid]

still not resolved using
<meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://avatars.githubusercontent.com/; script-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://pagead2.googlesyndication.com/; style-src * data: blob: 'unsafe-inline' 'unsafe-eval';">

Just a random guess. Putting the 'self' source at the last might work?

Screenshot_20230716_142936_Chrome.jpg

As in the screenshot attached, the browser is not able to detect any other sources of img-src and script-src, putting the URIs before 'self' might work.

You may use this tool to evaluate your CSP.

[rahulsain]

same issue

https://algodextrous.me/#/opensource

[dhruvkrishnavaid]

@rahulsain, I have tried it on my codespace, and its working like a charm.

After a bit of tweaking, I've found that the problem is actually with the build process of your repository. It does not build the frontend, that's why the changes in the index.html file are not being shown.

You may add a Github action that is triggered on push to main which includes the following commands:

cd frontend
npm ci
npm run build --if-present

It will prepare a fresh build of the frontend on each push, ensuring that the latest changes are being reflected.

If you'd like to test it on your machine then just cd frontend and npm start to take a quick look at the final result.

You should close this issue now as this is not related to the project.