Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: CSP Improvements #9847

Merged
merged 4 commits into from
Mar 17, 2021
Merged

ui: CSP Improvements #9847

merged 4 commits into from
Mar 17, 2021

Conversation

johncowen
Copy link
Contributor

This PR allows folks to set a stricter CSP policy for the UI. Mainly by configuring ember-auto-import to not require unsafe-eval and by re-arranging things so we no longer need to use inline scripts for some of our stranger requirements (pre vendor polyfills and CodeMirror syntax highlight loading).

We also set our development-time CSP to the strictest policy we can currently use so we are nudged if anything doesn't adhere to policy.

More details in the commit messages.

There are still some minor (inline CSS related) improvements we can still make here, but we now support the strictest JS related CSP available:

default-src 'self' img-src 'self' data: ; style-src 'self' 'unsafe-inline'

Removal of the unsafe-inline for style/CSS is likely to be PRed at a later date

John Cowen added 3 commits March 8, 2021 14:02
We used to have inline scripts in index.html in order to support embers
filepath fingerprinting and our configurable rootURL.

Instead of using inline scripts we use application/json plus a JSON blob
to create a fake filesystem JSON blob/hash/map to hold all of the
rootURL'ed fingerprinted file paths which we can then retrive later in
non-inline scripts.

We move our inlined polyfills script into the init.js external script,
and we move the CodeMirror syntax highlighting configuration inline
script into the main app itself - into the already existing CodeMirror
initializer (this has been moved so we can lookup a service located
document using ember's DI container)
@johncowen johncowen added theme/ui Anything related to the UI backport/1.9 labels Mar 8, 2021
@johncowen johncowen requested a review from kaxcode March 8, 2021 14:19
@vercel vercel bot temporarily deployed to Preview – consul March 11, 2021 09:33 Inactive
@vercel vercel bot temporarily deployed to Preview – consul-ui-staging March 11, 2021 09:33 Inactive
Copy link
Contributor

@kaxcode kaxcode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔒 LGTM

@johncowen johncowen merged commit 4147171 into master Mar 17, 2021
@johncowen johncowen deleted the ui/feature/csp-improvements branch March 17, 2021 10:46
@hashicorp-ci
Copy link
Contributor

🍒 If backport labels were added before merging, cherry-picking will start automatically.

To retroactively trigger a backport after merging, add backport labels and re-run https://circleci.com/gh/hashicorp/consul/338456.

@hashicorp-ci
Copy link
Contributor

🍒✅ Cherry pick of commit 4147171 onto release/1.9.x succeeded!

hashicorp-ci pushed a commit that referenced this pull request Mar 17, 2021
* Configure ember-auto-import so we can use a stricter CSP

* Create a fake filesystem using JSON to avoid inline scripts in index

We used to have inline scripts in index.html in order to support embers
filepath fingerprinting and our configurable rootURL.

Instead of using inline scripts we use application/json plus a JSON blob
to create a fake filesystem JSON blob/hash/map to hold all of the
rootURL'ed fingerprinted file paths which we can then retrive later in
non-inline scripts.

We move our inlined polyfills script into the init.js external script,
and we move the CodeMirror syntax highlighting configuration inline
script into the main app itself - into the already existing CodeMirror
initializer (this has been moved so we can lookup a service located
document using ember's DI container)

* Set a strict-ish CSP policy during development
dizzyup pushed a commit that referenced this pull request Apr 21, 2021
* Configure ember-auto-import so we can use a stricter CSP

* Create a fake filesystem using JSON to avoid inline scripts in index

We used to have inline scripts in index.html in order to support embers
filepath fingerprinting and our configurable rootURL.

Instead of using inline scripts we use application/json plus a JSON blob
to create a fake filesystem JSON blob/hash/map to hold all of the
rootURL'ed fingerprinted file paths which we can then retrive later in
non-inline scripts.

We move our inlined polyfills script into the init.js external script,
and we move the CodeMirror syntax highlighting configuration inline
script into the main app itself - into the already existing CodeMirror
initializer (this has been moved so we can lookup a service located
document using ember's DI container)

* Set a strict-ish CSP policy during development
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
theme/ui Anything related to the UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants