This library should work with a "strict" Content Security Policy

[JasonStoltz]

For reference: elastic/eui#1431

[JasonStoltz]

I did the following to test this. Testing was performed in the "examples/sandbox" project.

I added the following policy in a meta tag in index.html.

<meta
      http-equiv="Content-Security-Policy"
      content="base-uri 'self'; object-src 'none'; script-src 'self' ; style-src 'self'; style-src-elem 'self' https://fonts.googleapis.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='"
    />

And ran it with:

cd examples/sandbox
npm run build
npm install -g serve
serve -s build

As you can see in the policy above, I had to make the following adjustments:

The first thing I had to do was add https://fonts.googleapis.com as a trusted domain for style-src-elem, since our stylesheet imports styles from there. I think this is OK.

The second thing I had to do was add a hash for style-src-elem, since it appears that our dependency, react-select, adds inline styles to the dom using the emotion library.

I believe the second issue will need to be addressed. Either by:

A) Removing the dependency
B) Disable styles being injected by the dependency and provide all of our own styles

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[yakhinvadim]

I'd like to reopen this.
Looks like the fonts have been fixed already in #293
And react-select issue can be solved by updating it to v3: JedWatson/react-select#3585 (search for "CSP").

[JasonStoltz]

Updating to react-select v3 will likely be a breaking change, as the markup and classnames will likely be differently.

If we do this, I think we need to take the approach of deprecating the old component and adding a new component which can be opted into.

This could be a global configuration for Search UI, one that conditionally loads v3 instead of v2.

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[JasonStoltz]

@yakhinvadim If you get a moment, could you see if this is solved after updating react select?