Potential CSP violations

[rodneyrehm]

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.

[bvancea]

@rodneyrehm I've also ran into some issue with CSP, mainly due to the focus-object-svg.js test. This causes issues with with Content Security Policy directive: "object-src 'none'".

I am curious, is there a specific reason for using an 'object' tag instead of an 'img' tag in those tests?

[rodneyrehm]

I am curious, is there a specific reason for using an 'object' tag instead of an 'img' tag in those tests?

yes. The test is evaluating if an <object> element can be given focus if it hosts an SVG document.