Skip to content

Instantly share code, notes, and snippets.

@dionisioviei
Last active August 7, 2023 20:43
Show Gist options
  • Save dionisioviei/b7698621159eaa08833faad0c2a56ccf to your computer and use it in GitHub Desktop.
Save dionisioviei/b7698621159eaa08833faad0c2a56ccf to your computer and use it in GitHub Desktop.
CSP Content tag Policy example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; media-src 'self' data: blob:;"
/>
<title>My electron app</title>
</head>
<body>
<div id="my-electron-app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
@dionisioviei
Copy link
Author

in this particularly case its allowing for unsafe-eval script execution, unsafe-inline css stylization, connect to any wss server and loading media content of any blob type. For more info:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#using_csp

@sibelius
Copy link

sibelius commented Aug 7, 2023

it is still causing this

Refused to connect to 'ws:<URL>' because it violates the following Content Security Policy directive: "connect-src 'self' wss:".

@dionisioviei
Copy link
Author

i guess its because is only allowing for WSS (secure websocket, with ssl certificate) and not WS, try adding or changing to ws:

    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws:; media-src 'self' data: blob:;"
    />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment