1018860 - JS error while using <template> on Safari 7

Status: RESOLVED WONTFIX

(L20n :: JS Library, defect)

Description

[Evelyn Hung]

I got the JS error while running on Safari:

l20n.js:354

[Error] TypeError: 'undefined' is not an object (evaluating 'translationElement.childNodes')

it's caused by Line#326

  overlayElement(node, translation.content);

and |translation.content| is undefined. 

According to http://caniuse.com/#search=template

It seems Safari 7 doesn't support <template> yet. We should workaround it. :(

Comment 1

[Staś Małolepszy :stas]

Hey Evelyn, thanks for the report.  We've debated this with Gandalf and we agreed that the best course of action is to recommend a polyfill for apps which require cross-browser compatibility with browser that don't support <template>.

The reason for this is that the template element has a very important characteristic that we take advantge of to make translations containing HTML secure:  the DOM it creates is inert, which makes it impossible to try to execute scripts from translations.  See bug 921169 comment 4 for the discussion about this.

This means that an app developer needs to make a conscious decision about how secure the translations are going to be:

 - if the translations come from unknown sources and are not reviewed (e.g. user-installed langpacks), it's best to continue relying on the <template> element for maximum security;  this mean that L20n won't work in browsers which don't support <template>.

 - if the translations are known to not contain any HTML (a social or business contract between the app developer and the translators can require this), the current code will work fine, even in browser which don't support <template>,

 - if the translations are guaranteed to be safe, e.g. they are human-reviewed or done by a trusted party, the developer can use a polyfill to enable cross-browser compatibility.

Here's is an example implementation of a <template> polyfill, but it would need to be modified to allow for creating new <template> elements:

http://jsfiddle.net/brianblakely/h3EmY/

As per above, I suggest we close this as wontfix, unless you feel strongly about it and would like to discuss this issue further.  Thanks!

Comment 2

[Zibi Braniecki [:zbraniecki][:gandalf]]

I agree with Stas.

Evelyn, what project you need Safari 7 support for?

Comment 3

[Evelyn Hung]

My case is a live websites developed by a few people, so it falls to #3 so I can use the polyfill to resolve. I feel we should note it on l20n document so people can apply a suitable solution when they hit the same issue.

Thanks for explaining to me. :)

Comment 4

[Staś Małolepszy :stas]

Good point, Evelyn.  Let's fix this in bug 939994.