Skip to content
Browse files

fix(ivy): i18n instructions thrown off by sanitizer in IE11 (#34305)

While sanitizing on browsers that don't support the `template` element (pretty much only IE), we create an inert document and we insert content into it via `document.body.innerHTML = unsafeHTML`. The problem is that IE appears to parse the HTML passed to `innerHTML` differently, depending on whether the element has been inserted into a document or not. In particular, it seems to split some strings into multiple text nodes, which would've otherwise been a single node. This ended up throwing off some of the i18n code down the line and causing a handful of failures. I've worked around it by creating a new inert `body` element into which the HTML would be inserted.

PR Close #34305
  • Loading branch information
crisbeto authored and kara committed Dec 11, 2019
1 parent 4d99dfe commit bed62b15a2b7e61e8f2442d0b8cdeeb8fcb5441b
Showing with 19 additions and 13 deletions.
  1. +19 −13 packages/core/src/sanitization/inert_body.ts
@@ -15,33 +15,31 @@
* Default: InertDocument strategy
export class InertBodyHelper {
private inertBodyElement: HTMLElement;
private inertDocument: Document;

constructor(private defaultDoc: Document) {
this.inertDocument = this.defaultDoc.implementation.createHTMLDocument('sanitization-inert');
this.inertBodyElement = this.inertDocument.body;
let inertBodyElement = this.inertDocument.body;

if (this.inertBodyElement == null) {
if (inertBodyElement == null) {
// usually there should be only one body element in the document, but IE doesn't have any, so
// we need to create one.
const inertHtml = this.inertDocument.createElement('html');
this.inertBodyElement = this.inertDocument.createElement('body');
inertBodyElement = this.inertDocument.createElement('body');

this.inertBodyElement.innerHTML = '<svg><g onload="this.parentNode.remove()"></g></svg>';
if (this.inertBodyElement.querySelector && !this.inertBodyElement.querySelector('svg')) {
inertBodyElement.innerHTML = '<svg><g onload="this.parentNode.remove()"></g></svg>';
if (inertBodyElement.querySelector && !inertBodyElement.querySelector('svg')) {
// We just hit the Safari 10.1 bug - which allows JS to run inside the SVG G element
// so use the XHR strategy.
this.getInertBodyElement = this.getInertBodyElement_XHR;

this.inertBodyElement.innerHTML =
'<svg><p><style><img src="</style><img src=x onerror=alert(1)//">';
if (this.inertBodyElement.querySelector && this.inertBodyElement.querySelector('svg img')) {
inertBodyElement.innerHTML = '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">';
if (inertBodyElement.querySelector && inertBodyElement.querySelector('svg img')) {
// We just hit the Firefox bug - which prevents the inner img JS from being sanitized
// so use the DOMParser strategy, if it is available.
// If the DOMParser is not available then we are not in Firefox (Server/WebWorker?) so we
@@ -122,15 +120,23 @@ export class InertBodyHelper {
return templateEl;

this.inertBodyElement.innerHTML = html;
// Note that previously we used to do something like `this.inertDocument.body.innerHTML = html`
// and we returned the inert `body` node. This was changed, because IE seems to treat setting
// `innerHTML` on an inserted element differently, compared to one that hasn't been inserted
// yet. In particular, IE appears to split some of the text into multiple text nodes rather
// than keeping them in a single one which ends up messing with Ivy's i18n parsing further
// down the line. This has been worked around by creating a new inert `body` and using it as
// the root node in which we insert the HTML.
const inertBody = this.inertDocument.createElement('body');
inertBody.innerHTML = html;

// Support: IE 9-11 only
// strip custom-namespaced attributes on IE<=11
if ((this.defaultDoc as any).documentMode) {

return this.inertBodyElement;
return inertBody;


0 comments on commit bed62b1

Please sign in to comment.
You can’t perform that action at this time.