Accessible autocomplete requires style-src 'unsafe-inline' and 'unsafe-eval' to work on pages protected by Content Security Policy (CSP)

[alexbishop1]

The accessible autocomplete does not seem to play very nicely with Content Security Policy (CSP), specifically the style-src directive:

1. On iOS browsers, it sets style attributes on elements, which is blocked by the style-src directive unless 'unsafe-inline' is specified
2. It uses the cssTextsetter as part of a function to detect support for pointer events, which is blocked by the style-src directive unless 'unsafe-eval' is specified (curiously, only some browsers seem to report CSP violations for this)

Therefore, using the accessible autocomplete on pages protected by CSP only works if one allows 'unsafe-inline' and 'unsafe-eval' as style sources, which reduces the protection offered by CSP.

This was discovered when trying to apply CSP to GOV.UK Pay’s enter card details page, which uses the GOV.UK country and territory autocomplete, which is built on the accessible autocomplete component.

[NickColley]

Looks like there may be other ways to detect pointer events: https://github.com/rafrex/detect-pointer-events/blob/master/src/index.js

accessible-autocomplete/src/autocomplete.js

Lines 15 to 22 in fe3ea11

	// Based on https://github.com/ausi/Feature-detection-technique-for-pointer-events
	const hasPointerEvents = (() => {
	const element = document.createElement('x')
	element.style.cssText = 'pointer-events:auto'
	return element.style.pointerEvents === 'auto'
	})()

I'm surprised that code trips unsafe-eval though!

[NickColley]

Hmm on second thoughts they're detecting related features in

• JavaScript: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/pointerevents.js
• CSS: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/pointerevents.js

[NickColley]

Looks like we may be able to use a different method for example Object.assign like so:

https://github.com/Popmotion/popmotion/pull/659/files#diff-69eb3a42a2b4f328f0e78dc96a6fc302R35

From Popmotion/popmotion#592

Note Object.assign doesnt have great support so we might have to do something else while still avoiding cssText:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

[alexbishop1]

I'm surprised that code trips unsafe-eval though!

https://www.w3.org/TR/CSP2/#style_src calls out cssText as being blocked by 'unsafe-eval'.

[NickColley]

Perhaps, it's not clear to me why they are setting cssText in the first place, I presume it is actually important to have the CSS engine execute some plain text, which might mean we need a different idea.

const hasPointerEvents = (() => { 
   const element = document.createElement('x') 
-  element.style.cssText = 'pointer-events: auto'
+  if (element.style.pointerEvents) {
+    element.style.pointerEvents = 'auto'
+  }
   return element.style.pointerEvents === 'auto' 
 })()

[NickColley]

@alexbishop1 are you still interested in getting this done? Feel free to catchup with us if you need any help getting this merged.