t2ym / i18n-format Goto Github PK

[vulnerability] Tags in translated template text are unexpectedly rendered

Root Cause

• Format text is rendered as it is via .innerHTML

Fix

• Replace all occurrences of < in template text with < before rendering

Reproducible Code

• Template (lit-html)

      <div>
        Timezone: GMT${(this.timezone < 0 ? '' : '+') + (this.timezone / 60)}
        <button @click=${() => this.timezone -= 60}>-1h</button>
        <button @click=${() => this.timezone += 60}>+1h</button>
      </div>

• JSON

  "world-clock": {
    "div_1": [
      "ja タイムゾーン<div>X</div>\n<div>Y</div>: GMT{1}\n        {2}\n        {3} ",
      "{{parts.0}}",
      "-1時間",
      "+1時間"
    ]
  }

• Expected - <div> are rendered as strings
• Actual - <div> are rendered as HTML tags

[3.0] Remove unreachable code for paramAttribute changes only on Polymer 1.x

Root Cause

• Since Polymer 2.0, paramAttribute is always "slot" and constant

Add data property to shortcut JSON stringification and parsing for <json-data>

Preprocessed Compound Template Format

• Generated viai18n-element/demo/gulpfile.js with useI18nFormatDataProperty = true

• In order to avoid detours in JSON.stringify() and JSON.parse() processing for <json-data> contents, <i18n-format> element can take data property to set the parsed JSON data object directly and shortcut JSON stringificaton and parsing for <json-data>.

• i18n-element/demo/gulpfile.js can preprocess target tagged template literals to this optimized format. This preprocessing can be enabled by setting useI18nFormatDataProperty = true, disabled by setting useI18nFormatDataProperty = false in i18n-element/demo/gulpfile.js

• Format shown in an equivalent tagged template literal format

<i18n-format id="target" lang="${effectiveLang}" .data=${text['target']['0']}>
  <json-data preprocessed></json-data>
  <i18n-number lang="${effectiveLang}" offset="1">${this.recipients.length}</i18n-number>
  <span>${this.recipients.0.gender}</span>
  <span>${this.sender.name}</span>
  <span>${this.recipients.0.name}</span>
  <span>${text['target']['5']}</span>
</i18n-format>

• Extracted text data

    text['target'] = [
      {
        "0": "You ({3}) gave no gifts.",
        "1": {
          "male": "You ({3}) gave him ({4}) {5}.",
          "female": "You ({3}) gave her ({4}) {5}.",
          "other": "You ({3}) gave them ({4}) {5}."
        },
        "one": {
          "male": "You ({3}) gave him ({4}) and one other person {5}.",
          "female": "You ({3}) gave her ({4}) and one other person {5}.",
          "other": "You ({3}) gave them ({4}) and one other person {5}."
        },
        "other": "You ({3}) gave them ({4}) and {1} other people gifts."
      },
      "{{recipients.length}}",
      "{{recipients.0.gender}}",
      "{{sender.name}}",
      "{{recipients.0.name}}",
      "a gift"
    ];

Update documentation for Polymer 2.0 slots

<!-- Polymer 2.0 -->
<i18n-format>
    <span>format {1}</span>
    <span slot="1">parameter</span>
</i18n-format>

Practically, slots of i18n-format are usually applied automatically by i18n-behavior and no extra coding is required for Polymer 2.0.

[3.0] Remove PolymerElement references used only for judging Polymer 2.x existence

Root Cause

• Polymer Modulizer mechanically converted references to Polymer.Element in Polymer 2.x

Fix

• Remove PolymerElement references and unreachable code

[lit-html] Empty ShadowDOM for lit-html-rendered HTML

Root Cause

• Failed to pick up the first text node of the format element in local DOM due to the surrounding comment nodes rendered by lit-html

Reproducible Code

• Comments in parameter nodes are not harmful

<i18n-format>
  <span><!-- -->ja 時刻: {1}:{2}<!-- --></span>
  <span slot="1"><!-- -->8<!-- --></span>
  <span slot="2"><!-- -->58<!-- --></span>
</i18n-format>

Fix

• Pick up the first text node instead of the first childNode

diff --git a/i18n-format.js b/i18n-format.js
index d0f53a4..7dd3278 100644
--- a/i18n-format.js
+++ b/i18n-format.js
@@ -295,7 +295,15 @@ Polymer({
     for (n = 0; n < this.elements.length; n++) {
       if (n === 0) {
         this.templateElement = this.elements[n];
-        this.templateTextNode = dom(this.templateElement).childNodes[0];
+        let i = 0;
+        do {
+          this.templateTextNode = dom(this.templateElement).childNodes[i++];
+          if (!this.templateTextNode) {
+            this.templateTextNode = dom(this.templateElement).childNodes[0];
+            break;
+          }
+        }
+        while (this.templateTextNode.nodeType !== this.templateTextNode.TEXT_NODE);
         this.observer.observe(this.templateTextNode, { characterData: true });
       }
       else {

[1.x] test environments have to be updated

[test][Safari 9] undefined error at wct-browser-legacy/browser.js:1618

Root Cause

• wct-browser-legacy/browser.js 1.0.4 is too old?
• Not reproducible when wct is invoked from the dev host, connecting to Sauce Labs

Fix

• Use web-component-tester/browser.js 6.9.0 instread

Log

OS X 10.11 safari 9      Tests failed: Error thrown outside of test function: Caught undefined error, did you throw without specifying what?
  <unknown> at /components/wct-browser-legacy/browser.js:1618
          l at /components/@webcomponents/webcomponentsjs/webcomponents-bundle.js:163

[3.0] Remove unreachable code for issues on specific Polymer 2.x versions

Fix

Reapply this change d7b493e#diff-d18cfaf2301151dedbb2726b464ccf03

[3.0][demo] Build demo for static servers

Demo

Prerequisite for Building and Serving Demo

    npm install -g polymer-cli

On-the-fly Build

    # Serve at http://localhost:8080/components/i18n-format/demo/
    polymer serve --npm --module-resolution=node -p 8080

Static Builds

• Build

    polymer build

• Targets

• Serve

    # Serve at http://localhost:8080/
    cd build/{esm-unbundled|esm-bundled|es6-bundled|es5-bundled}
    python -m SimpleHTTPServer 8080 # or any HTTP(S) server

[3.0][webcomponents.org] Not property published on webcomponents.org

With Safari 7, lang property observer _langChanged() is not called on the value changes.

The root cause is the overridden lang property by Safari 7.

[2.0][test][Safari9][1.x-variant] update lang and re-render test fails

The test succeeds if it is run independently.

[2.0][test][IE10/Safari8/7][1.x-variant] Tests time out

[4.0] Remove dependency on Polymer library

Status

• Part of t2ym/i18n-element#63
• WIP in 4.0-develop branch
• NPM package
  • npm install i18n-format@next or npm install [email protected]
    • Depends on [email protected], [email protected], lit-html@^1.0.0, make-plural@^4.3.0

Tasks

• Move @polymer/polymer from dependencies to devDependencies
• Drop Safari 9 support
• bower.json with BSD-2-Clause as license
• Add lit-html dependency
• Convert to lit-html rendering
  • Remove @polymer/polymer imports
  • Convert properties and observers
• Make these properties read-only
  • paramAttribute is slot
  • paramFormat is {n}
  • observeParams is true
    • Dummy setter for observeParams
• Support IE11 and Edge with custom elements v1 polyfill
  • Import a separate polyfill.js from an independent npm module for polyfill.js
    • Import npm package wc-putty
• Convert tests
  • No Polymer methods
  • Adjust some waits
• Convert demo
  • Remove intl from extraDependencies in polymer.json
• Documentation
  • Decent comments
  • API Docs page

Design Issues

• root property for shadowRoot to imitate a Polymer element
• Is importMeta property necessary? No

Issues

• document.createElement('i18n-format') fails with "The result must not have attributes"
  • Fix: Put off setting this.lang in the constructor to connectedCallback()
• Calling of _setupParams() is too early to collect the expected parameters in the local DOM
  • Fix: Put off this._setupParams() to connectedCallback()
• ShadyDOM misinterprets target of direct node.appendChild() as shadowRoot
  • Root Cause: If shadowRoot is attached, ShadyDOM unexpectedly performs appendChild() to shadowRoot instead of the node's local DOM
  • Fix: Put off attachShadow() to the first rendering

[3.0][webcomponents.org] Demo on webcomponents.org does not work

Demo link on webcomponents.org

• https://www.webcomponents.org/element/t2ym/i18n-format/demo/demo/index.html
• browsed from 3.0.0-pre.* version READMEs

Suspected Root Cause

• Failing to load NPM modules as they are inexistent on the generated server environment

Possible Fix

• Migrate to inline demos (need investigation)