1. Introduction
-This section is not normative.
-Web applications often need to work with strings of HTML on the client side,
-perhaps as part of a client-side templating solution, perhaps as part of
-rendering user generated content, etc. It is difficult to do so in a safe way,
-however; the naive approach of joining strings together and stuffing them into
-an Element
's innerHTML
is fraught with risk, as that can and
-will cause JavaScript execution in a number of unexpected ways.
Libraries like [DOMPURIFY] attempt to manage this problem by carefully -parsing and sanitizing strings before insertion by constructing a DOM and -walking its members through a white-list. This has proven to be a fragile -approach, as the parsing APIs exposed to the web don’t always map in -reasonable ways to the browser’s behavior when actually rendering a string as -HTML in the "real" DOM. Moreover, the libraries need to keep on top of -browsers' changing behavior over time; things that once were safe may turn -into time-bombs based on new platform-level features.
-The browser, on the other, has an fairly good idea of when it is going to -execute code. We can improve upon the userspace libraries by teaching the -browser how to render HTML from an arbitrary string in a safe manner, and do -so in a way that is much more likely to be maintained and updated along with -the browser’s own changing parser implementation. This document outlines an -API which aims to do just that.
-1.1. Goals
--
-
-
-
Mitigate the risk of DOM-based cross-site scripting attacks by providing - developers with mechanisms for handling user-controlled HTML which prevent - direct script execution upon injection.
- -
-
Enable browser-based crypto software to sanitize rich-text after decryption - and before additional processing in the DOM.
-
1.2. Examples
-let s = new Sanitizer({ - tags: ['a', 'b', ...], - attributes: ['c', 'd', 'e', ...], - ... -}); -s.toString("<img src=x onerror=alert(1)//>"); // returns <code data-opaque bs-autolink-syntax='`<img src="x">`'><img src="x"></code> -s.toFragment("<img src=x onerror=alert(1)//>"); // returns a <code data-opaque bs-autolink-syntax='`DocumentFragment`'>DocumentFragment</code> --
2. Framework
-Blah, blah, blah.
-dictionary-SanitizerConfig
{ - sequence<DOMString>tags
; - sequence<DOMString>attributes
; - // ... - // More things from https://github.com/cure53/DOMPurify/blob/master/src/purify.js#L224 -}; - -[Constructor
(optional SanitizerConfigconfig
), Exposed=(Window)] -interfaceSanitizer
{ - DOMStringtoString
(DOMStringinput
); - DocumentFragmenttoFragment
(DOMStringinput
); - - // And maybe? - static DOMStringsanitizeToString
(DOMStringinput
, optional SanitizerConfigconfig
); - static DocumentFragmentsanitizeToFragment
(DOMStringinput
, optional SanitizerConfigconfig
); -}; -
3. Acknowledgements
-Cure53’s [DOMPURIFY] is a clear inspiration for the API this document
-describes, as is Internet Explorer’s window.toStaticHTML()
.