Content Security Policy (CSP) blocks icons #276

rahulsain · 2023-02-08T07:48:13Z

all these url are blocked on this site

I want to enable csp for these site

using express at server end to display build/index.js file

<html>
<body>
<!--StartFragment--><ol class="children body issue-kind-page-error expanded" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; list-style-type: none; padding-left: calc(var(--issue-indent) + 43px); border-bottom: 1px solid var(--color-details-hairline-light); padding-top: 6px; position: relative; padding-bottom: 26px; padding-right: 8px; display: block; color: rgb(232, 234, 237); font-family: &quot;Segoe UI&quot;, Tahoma, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><ol class="children expanded affected-resources" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; list-style-type: none; padding: 3px 0px 0px; position: relative; user-select: text; display: block;"><ol class="children expanded" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; list-style-type: none; padding: 6px 0px 9px 5px; display: block; background: var(--color-background-elevation-0); margin-bottom: 10px;"><li role="treeitem" tabindex="0" class="selected" aria-selected="true" style="box-sizing: border-box; min-width: 0px; min-height: 16px; outline-width: 0px; text-overflow: ellipsis; white-space: normal; position: relative; display: flex; align-items: center;">

https://avatars.githubusercontent.com/u/8597527?v=4 | blocked | img-src | /#/opensource:0
-- | -- | -- | --
https://avatars.githubusercontent.com/u/122800653?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/22775683?u=90d6436363c5c9612792b43373056542c3ddc308&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/50570677?u=b531884e4b04fc5db2cacb83c0e988869597b0f0&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/27850350?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/81609539?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/55050487?u=e4ead4a550f14c9e11dd0d9abd9845c00e72d3fa&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/44137933?u=4719acdc2f83be19b1aa44e7afef5b89eda7efbb&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/52865452?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/84700473?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/11988517?u=922cb2f3dd938590479e0c75a46637096bb929e3&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/6295529?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/42269590?u=88c4366ebb380a6b1069281b14cbce486948d269&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/83873422?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/54946784?u=6973b854a7d1ec2e907a3032477c9221279b9d43&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/29686102?u=353b4f196bcd86ad2670c809d53716af3665f8a4&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/76569239?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/20985098?u=90952fb8d3ff9ce664056b06cf8e8d82e4e9a4d7&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/7676016?u=edef312cd68007860bc7240e68783dd46bca70b8&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/2511871?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/84680094?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/74976752?u=07506c93670c5f92a1105ae75a4f9f100f685b6f&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/51539518?u=68bb7d8233d7ac1527b1befd0e2824d1d199449e&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/69780029?u=9137a568a5081bc545e6a0fa09063c8ce188337b&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/84324304?u=00a519131cf90a82c49dad5c68a5e19329277d08&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/46284927?u=e8a3244cdcd4accd0b33418aad6bac9f28885dae&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/29441243?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/65719674?u=711aba77e75c0dc130f6d43d7a6eca813a080111&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/65156106?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/15955558?u=2814956da1d002e5113d25214fb6696015c0504d&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/23451923?u=905ae9c0b391091028fccbb8ce493319ee4b2e63&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/89447707?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/74893780?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/26673203?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/45781711?u=b5e10145fd1aa2f3239183f69f736af760eb315e&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/75072193?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/71871134?u=165326cf9a533c877dc142e45b409be8f910b234&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/31106921?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/10453269?u=ed14457c63f32814a67ba9d8d05d921d5232d4a8&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/71976099?u=19053dd9508106679fdfddc3e0f719040c765bf5&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/46952316?u=e5e66dbd126eb6ee5994ff85c937222f91e9b75f&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/20818641?u=61bc67130b65c97babe5c6903ee72e2bfab97be0&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/61532731?u=f97fc4003d99756954a38e454b3be4eaf1c48ea8&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/24905013?u=1bde134f472edc3b100e2e35232725a7f486758b&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/37934494?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/66555099?u=0d61cde88ee47512a7da003eb6b2cb7ab62720e2&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/55914177?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/6743411?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/25274012?v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/45002009?u=c82496090e9f58f178bc1096a5338a4a2f9d5107&v=4 | blocked | img-src | /#/opensource:0
https://avatars.githubusercontent.com/u/17507675?u=dbf1be05b5be3f60bc179b991340dd84e72d4712&v=4 | blocked | img-src | /#/opensource:0
https://api.iconify.design/octicon.js?icons=git-merge,git-pull-request,issue-opened,issue-closed | blocked | script-src-elem | iconify.min.js:367

</li></ol></ol><li role="treeitem" class="always-parent link-wrapper" style="box-sizing: border-box; min-width: 0px; min-height: 16px; margin-top: 15px; user-select: text; text-overflow: ellipsis; white-space: normal; position: relative; display: flex; align-items: center;"><span class="tree-element-title" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"></span><ul class="link-list" style="box-sizing: border-box; min-width: 0px; min-height: 0px; list-style-type: none; list-style-position: inside; padding-inline-start: 0px;"><li style="box-sizing: border-box; min-width: 0px; min-height: 16px; text-overflow: ellipsis; white-space: normal; position: relative; display: flex; align-items: center;"><x-link class="link devtools-link" tabindex="0" role="link" target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/security/csp#source_allowlists" title="https://developers.google.com/web/fundamentals/security/csp#source_allowlists" style="box-sizing: border-box; min-width: 0px; min-height: 0px; cursor: pointer; text-decoration: underline; color: var(--color-link); outline-offset: 2px; font-size: 14px; padding-top: 4px; display: inline;"><devtools-icon class="link-icon" style="display: inline-block; white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px; vertical-align: sub; margin-right: 0.5ch;"><div class="icon-basic" style="width: 16px; height: 16px; display: block; -webkit-mask-image: url(&quot;devtools://devtools/bundled/devtools-frontend/front_end/Images/link_icon.svg&quot;); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 99%; background-color: var(--icon-color, var(--color-link));"></div></devtools-icon>Learn more: Content Security Policy - Source Allowlists</x-link></li></ul></li></ol><!--EndFragment-->
</body>
</html>

The text was updated successfully, but these errors were encountered:

dhruvkrishnavaid · 2023-07-10T08:53:55Z

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

rahulsain · 2023-07-11T11:46:05Z

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 · 2023-07-16T06:14:01Z

In the index.html, try this:

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

rahulsain · 2023-07-16T08:42:12Z

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 · 2023-07-16T08:51:04Z

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

rahulsain · 2023-07-16T08:54:08Z

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 · 2023-07-16T09:05:37Z

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 · 2023-07-16T09:13:28Z

same issue

https://algodextrous.me/#/opensource

dhruvkrishnavaid · 2023-07-20T11:44:49Z

@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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content Security Policy (CSP) blocks icons #276

Content Security Policy (CSP) blocks icons #276

rahulsain commented Feb 8, 2023

dhruvkrishnavaid commented Jul 10, 2023

rahulsain commented Jul 11, 2023

dhruvkrishnavaid commented Jul 16, 2023

rahulsain commented Jul 16, 2023 •

edited

Loading

dhruvkrishnavaid commented Jul 16, 2023

rahulsain commented Jul 16, 2023

dhruvkrishnavaid commented Jul 16, 2023 •

edited

Loading

rahulsain commented Jul 16, 2023

dhruvkrishnavaid commented Jul 20, 2023

Content Security Policy (CSP) blocks icons #276

Content Security Policy (CSP) blocks icons #276

Comments

rahulsain commented Feb 8, 2023

dhruvkrishnavaid commented Jul 10, 2023

rahulsain commented Jul 11, 2023

dhruvkrishnavaid commented Jul 16, 2023

rahulsain commented Jul 16, 2023 • edited Loading

dhruvkrishnavaid commented Jul 16, 2023

rahulsain commented Jul 16, 2023

dhruvkrishnavaid commented Jul 16, 2023 • edited Loading

rahulsain commented Jul 16, 2023

dhruvkrishnavaid commented Jul 20, 2023

rahulsain commented Jul 16, 2023 •

edited

Loading

dhruvkrishnavaid commented Jul 16, 2023 •

edited

Loading