Trusted Types support

[tosmolka]

PhotoSwipe should support Trusted Types API so that it can be seamlessly integrated into applications that enforce Trusted Types for all DOM XSS Injection Sinks (such as innerHTML setters) via CSP directive require-trusted-types-for. Trusted Types are now fully supported in browsers based on Blink engine (Chrome, Edge).

To support Trusted Types we should identify all instances where PhotoSwipe calls such injection sink methods and propose re-factoring. We need to be careful to keep supporting browsers without Trusted Types support. This is usually done by testing whether window.trustedTypes is defined and fall-back to current behavior if it's not.

Initial list to consider:

• Here we could avoid using innerHTML sink method and construct DOM using createElement, setAttribute and so on

  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/items-controller.js#L183
  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/ui/photoswipe-ui-default.js#L249
  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/ui/photoswipe-ui-default.js#L711

• Here we could re-factor using TrustedTypePolicyFactory.emptyHTML

  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/items-controller.js#L180
  • https://github.com/dimsemenov/PhotoSwipe/blob/b85b2069739470b2b20fd575b75fb509930eaf78/src/js/items-controller.js#L347
  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/items-controller.js#L481
  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/ui/photoswipe-ui-default.js#L55

• Here we need more re-factoring, maybe HTML sanitization (DOMPurify supports Trusted Types) to avoid XSS issues

  • https://github.com/dimsemenov/PhotoSwipe/blob/80607e12542a1a54ecefa837649e862b35dffd25/src/js/ui/photoswipe-ui-default.js#L58
  • https://github.com/dimsemenov/PhotoSwipe/blob/b85b2069739470b2b20fd575b75fb509930eaf78/src/js/items-controller.js#L366

References

• Trusted Types Introduction for Developers - Fix the violations
• Trusted Types spec
• CSP directive require-trusted-types-for
• Trusted Types Integrations in Open Source projects

[dimsemenov]

This is an old issue. If someone has time, please review v5 for Trusted Types violations https://github.com/dimsemenov/PhotoSwipe/tree/v5-beta/src and suggest changes.

[tosmolka]

@dimsemenov , will this help?

• Element.innerHTML = ''

  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/photoswipe.js#L344
  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/slide/slide.js#L82
  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/slide/slide.js#L95

• refactoring

  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/slide/content/image.js#L125
  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/ui/counter-indicator.js#L6
  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/slide/slide.js#L196

• refactoring or sanitization

  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/slide/content/content.js#L39
  • https://github.com/dimsemenov/PhotoSwipe/blob/a39f9523fc84991403830d82e7522ea81e2a9df7/src/js/ui/ui-element.js#L81

[tosmolka]

@dimsemenov , any update regarding this feature request? Thanks.

[dimsemenov]

No support yet. But I reworked a few things, for example, error message and counter indicators no longer use raw HTML strings, but templated text.

Feel free to submit a PR.