USWDS - File Input: Replace inline javascript to meet content security policy (CSP) standards

[jeffpw-goog]

Summary

Fixed the file input component to meet content security policy standards. Inline Javascript is forbidden by typical content security policies (CSPs), and this replaces several inline onerror handlers in the file input component with addEventListener to avoid that violation.

Breaking change

This is not a breaking change.

Related issue

Closes #5990

Related pull requests

None

Preview link

None

Problem statement

The USWDS library should be compatible with sites that apply a content security policy (CSP). Currently the file input component uses onerror inline event handlers, which are prohibited by CSP (source), so the component does not work correctly under a CSP.

Solution

• Replace onerror with calls to addEventListener.
• Add a helper method setPreviewFallback to remove code duplication
• Update file extension parsing logic to parse the file extension at the end of the filename rather than anywhere in the filename
• Use a switch case instead of if/else for the file extension cases for readability

Major changes

None

Testing and review

Steps to test:

1. Run npm start
2. Open http://localhost:6006/?path=/story/components-form-inputs-file-input--default
3. Create a text file and upload it to the file input component with the following filenames. In each case confirm that the expected preview icon is shown.
   • file.txt (or any extension not in the list below)
   • file.pdf
   • file.doc
   • file.pages
   • file.xls
   • file.numbers
   • file.mov
   • file.mp4

Steps to test with a CSP policy:

You can skip steps 1-3 by checking out git@github.com:jeffpw-goog/uswds-sandbox.git

1. Clone uswds-sandbox
2. Update src/_includes/head.html:
   • Add <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-mynonce' 'strict-dynamic' https:" />
   • Add nonce="mynonce" to the <link rel="preload" ... as="script"> tag
3. Update src/_layouts/default.html:
   • Add nonce="mynonce" to the <script> tag
   • Add a file input component to the body (I copied from https://designsystem.digital.gov/components/file-input/)
4. Run npm install "https://github.com/jeffpw-goog/uswds/tree/file-input-csp" --save
5. Run npm install && npm init && npm start
6. Load http://localhost:8080 in your browser
7. Repeat the test cases from above