Potential CSP violations

The CSP (Content Security Policy) can be used on any document to limit the document's scripting ability. caniuse says Chrome and Firefox support this feature already.

The supports tests do things like creating <object src="data:…"> to determine if they're focusable or not and these tests may violate a CSP.

---

This problem was first spotted by @ryan-ludwig with Chrome Apps, which sport the following (not relaxable) CSP:

Content-Security-Policy:
  default-src 'self';
  connect-src * data: blob: filesystem:;
  style-src 'self' data: chrome-extension-resource: 'unsafe-inline';
  img-src 'self' data: chrome-extension-resource:;
  frame-src 'self' data: chrome-extension-resource:;
  font-src 'self' data: chrome-extension-resource:;
  media-src * data: blob: filesystem:;

The error they observed was:

"Refused to load plugin data from 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…V4dCB4PSIxMCIgeT0iMjAiIGlkPSJzdmctbGluay10ZXh0Ij50ZXh0PC90ZXh0Pjwvc3ZnPg==' because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'object-src' was not explicitly set, so 'default-src' is used as a fallback."

The problem in this particular case is that the directive object-src 'self' data:; is missing. See the potential CSP violations below.

CSP directives currently required by ally.js 1.1.0

After running the test suite with Content-Security-Policy-Report-Only the following violations were logged, forming this policy:

Content-Security-Policy:
  default-src 'self';
  style-src 'unsafe-inline';
  img-src data:;
  media-src data:;
  object-src 'self' data:;
  frame-src data:;

style-src: inline

covered by directive style-src 'unsafe-inline';

• supports/detect-focus.js
• supports/focus-children-of-focusable-flexbox.js
• supports/focus-flexbox-container.js
• supports/focus-scroll-body.js
• supports/focus-scroll-container-without-overflow.js
• supports/focus-scroll-container.js

img-src: data

covered by directive img-src data:;

• supports/focus-area-img-tabindex.js
• supports/focus-area-tabindex.js
• supports/focus-area-without-href.js
• supports/focus-broken-image-map.js
• supports/focus-img-ismap.js
• supports/focus-img-usemap-tabindex.js
• supports/focus-redirect-img-usemap.js

media-src: data

covered by directive media-src data:;

• supports/focus-audio-without-controls.js
• supports/focus-video-without-controls.js

object-src: data

covered by directive object-src 'self' data:;

• query/focusable.strict.js
• supports/detect-focus.js
• util/node-array.js

above CSP violation reports don't make any sense to me. The reasons are probably:

• supports/focus-object-svg-hidden.js
• supports/focus-object-svg.js

frame-src: data

covered by directive frame-src data:;

• query/focusable.strict.js
• supports/detect-focus.js
• util/node-array.js

above CSP violation reports don't make any sense to me. The reasons are probably:

• supports/focus-in-hidden-iframe.js

---

We're not the first to face this issue. Angular introduced ng-csp to work around this in lieu of a proper CSP feature detection.

I don't yet know how CSP compliance should be handled by libraries such as ally.js. I'm open to suggestions.

Start by running the test suite with Content-Security-Policy-Report-Only and review the listed supports, query/focusable.strict.js, and util/node-array.js files. Compare the reported violations with the referenced CSP directives and determine a concrete compliance approach for ally.js. Done should include an agreed scope and tests showing the chosen approach avoids or documents the violations.