live-server
live-server copied to clipboard
tapio
Handling Content-Security-Policy (CSP)
Before submitting an issue, please, see https://github.com/tapio/live-server#troubleshooting
Issue description
When the page includes a CSP header like <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'">, the injected script is not allowed to run.
It's hard or impossible to allow the script by simply modifying the meta tag, but it can be handled in live-server by modifying the CSP dynamically.
I've solved this in a fork, published as @1j01/live-server.
I'm guessing this would be considered too niche to bother including and maintaining, so I'm opening this issue mainly so other people can find this solution if searching for it. But if interested, I could open a PR.
(I dropped the event stream (es) approach since it made it easier to operate on the whole file content, and I don't see this as much of a problem since it was already synchronously reading the file into memory. But it could use some restructuring.)
Software details
- Command line used for launching
live-server: - OS:
- Browser (if browser related): all modern browsers
- Node.js version:
live-serverversion: 1.2.1
IMHO, a way better solution would be to inject the below tag in the head of the page, and proxy that script from within liveserver itself instead:
<script src="live-server-refreshCSS.js"
type="module"
integrity="sha...."
crossorigin="anonymous"
></script>
That way no changes to any CSP should be needed at all.
- Accompany that with an automated Subresource integrity (SRI) :wink:
@TriMoon If you mean putting the script before the CSP meta tag, that does work to load the script, bypassing the CSP, however the script also needs to connect to the server with a WebSocket, which is controlled by CSP's connect-src directive.
As for subresource integrity, I'm already generating a hash in order to specifically allow the injected script's content without allowing other JS.
As far as I know subresource integrity is meaningless for a resource that will be served by the same server generating the hash.
But by using a hash of the script in the CSP, I am able to mostly maintain the strictness of the CSP.
If you mean putting the script before the CSP meta tag
no, just anywhere inside <head>...</head where scripts are normally loaded.
however the script also needs to connect to the server with a WebSocket, which is controlled by CSP's
connect-srcdirective.
True, but you could put the domain of your server in there just for connect-src, that domain would normally not used when not developing :wink:
As for subresource integrity, I'm already generating a hash in order to specifically allow the injected script's content without allowing other JS.
And THAT should be done automatically by Live-Server, and added to the inserted tag :wink:
As far as I know subresource integrity is meaningless for a resource that will be served by the same server generating the hash. But by using a hash of the script in the CSP, I am able to mostly maintain the strictness of the CSP.
It's meaningless when not using remote scripts outside your documents own domain indeed. SRI is meant for web authors to make sure they use an unaltered resource that is outside their own control.