Webpack Support for Content Security Policy using hashes

Open
#3,967 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
electron, typescript, webpack
Domain
build-system, security

Research direction

Start by reviewing Electron Forge's Webpack integration and the csp-html-webpack-plugin referenced in the proposal, then examine how session.defaultSession.webRequest.onHeadersReceived is used with the custom protocol. Done should be defined as generating and applying script hashes that allow the reported policy to remove 'unsafe-inline'.

Written by the indexing model from the issue text.

Description

Pre-flight checklist
  • I have read the contribution documentation for this project.
  • I agree to follow the code of conduct that this project uses.
  • I have searched the issue tracker for a feature request that matches the one I want to file, without success.
Problem description

I am working on an Electron app that uses Electron-Forge and Webpack. It is a React app that used Styled-Components. Due to Styled-Components being deprecated there will be work to move away from it. However, in the meantime there is need for it to be supported.

I added a content-security policy for electron using the:

session.defaultSession.webRequest.onHeadersReceived

I am using a custom protocol as outlined in Electron Security. My current content-security policy is default-src ${CUSTOM_PROTOCOL}: 'unsafe-inline'.

I would like the ability to not have to unsafe-inline. My understanding is that to remove it I would need to use either a nonce or a hash. It seems that a nonce is likely not a good approach for styled-components or webpack. It seems that using a hash and dynamic-strict would be the only potential avenue to improving CSP.

I am requesting a feature that allows for the adding a CSP with hash of the underlying scripts. This should allow me to improve my CSP.

Proposed solution

There is an existing webpack component that should allow for CSP to be added with script hashes. https://github.com/slackhq/csp-html-webpack-plugin

Just not clear if the repository is supported enough to be used in Electron-Forge or better to implement directly

Alternatives considered

Nonce seems to not be supported by styled-components

Additional information
"@electron-forge/cli": "^7.7.0",
"electron": "37.1.0",

Please let me know if my understanding of content-security policy is correct. This is a new area for me and just trying to ensure I am following best practices.

Dominant language
TypeScript
Stars
7.1k
Forks
642
Avg merge
2d 8h
Merged PRs (30d)
35

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from electron/forge

All issues in electron/forge

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.