New in Tobago 2.0

At July 21, 2014 the version 2.0.0 has been released. Here was a quick overview over the features and changes made in the last time to release this major revision.

Tobago 2.0.0 contains 184 entries in Jira and most of them are exclusive in this version.

Please take also a look at the Migration from Tobago 1.5 to 2.0 guide.

Enhancements

Date- and Time-Picker
  • Using jQuery UI Datepicker and TimePicker Addon
  • Faster — no server request
  • Better interactivity
  • Old Date-/TimePicker via tobago-config.xml

Draggable Popups

Input Suggest
  • New implementation
  • Sub-Tag <tc:suggest>
  • More configuration options
Tabs
  • Icons
  • Toolbar buttons
File upload
  • Looks pretty now in every browser
Radio Buttons
  • Icons

New Features

HTML WYSIWYG Editor
  • Integration example in the demo of CKEditor™ and TinyMCE
  • Not included, because of incompatible licences or breaks CSP
  • Other possible, but many have disadvantages
Default Command for Sub-Forms
  • Dependent from the focused input, the default command will be selected
  • Markup to show the command to the user
Tree and Tree-Table
  • Big internal refactoring
  • Work internally now with the JSF UIData
  • Free model: DefaultMutableTreeNode is not required any longer, but you can implement javax.faces.model.DataModel
  • TreeTable
  • Infinite Trees possible
  • Selectors: sub-tree selection
More
  • Dynamic lists in <f:selectItems> need not glue code (JSF 2.0)
  • Redirect in navigation rules doesn't break layout size
  • Additional possibility to show paging arrows in sheet
  • Automatically create accesskey from underscore is know configurable

Security

Content Security Policy
  • To prevent XSS
  • W3C Standard
  • Idea:
    • Don't execute any code inside the HTML file
      • No content in script tags
      • no onclick, nor on* etc.
    • Don't execute eval(script)
    • Don't apply CSS inside the HTML file
    • Define the sources of any resources
    • Strict separation of code and data
      • Keep the code in JavaScript Files
      • Put additional data in HTML5 data-* attributes
  • Browser support: all current, but IE 10 and 11 only "sandbox"
  • Activated by default, can be configured via tobago-config.xml
  • There is also a "report-only" mode for development
Content Security Policy and Tobago
  • All renderers and scripts are refactored to be compliant with CSP
  • Using application specific JavaScript in Tobago
    • script attribute in command tags is deprecated
    • Problem: when setting non of these attributes: action, script, link, Tobago will create a default action. This can't be changed without breaking compatibility.
    • Solution: omit="true"
Sanitize potentially malicious content (to prevent XSS)
  • <tc:textarea>, when it contains a <tc:dataAttribute> with name="html-editor"
  • <tc:out>, when escape="false"
  • Default implementation: JSoup whitelist scanning
  • Configurable via tobago-config.xml
  • Why? See OSWAP
More
  • Setting nosniff HTTP header (to prevent XSS)
  • Don't allow to be in a frame (to prevent Frame-Attacks)
  • Both are configurable via tobago-config.xml, default is secure

Internal Refactoring

  • Tree uses subclass of javax.faces.model.DataModel
  • Using Java APT generator
  • Using ' instead of " for HTML attributes (JSON friendly)
  • JavaScript logging via console (plus workaround for old browsers)
  • The theme-config.xml was merged with tobago-config.xml
  • Access the Tobago configuration via the TobagoContext
  • The TobagoConfig is immutable after initialization
  • Add the version of Tobago into the resource URLs to avoid caching problem after updates
<?xml version="1.0" encoding="UTF-8"?>
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<ui:composition template="/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:param name="title" value="#{demoBundle.new_in_2_0}"/>
<p>At July 21, 2014 the version 2.0.0 has been released. Here was a quick overview over the features and changes made
in the last time to release this major revision.</p>
<p>Tobago 2.0.0 contains 184 entries in
<tc:link label="Jira"
link="https://issues.apache.org/jira/secure/ReleaseNote.jspa?projectId=12310273&amp;styleName=Html&amp;version=12321253"/>
and most of them are exclusive in this version.</p>
<p>Please take also a look at the
<tc:link label="Migration from Tobago 1.5 to 2.0"
link="/faces/content/10-intro/50-migration/98-migration/migration20.xhtml"/>
guide.</p>
<tc:section label="Enhancements">
<b>Date- and Time-Picker</b>
<ul>
<li>Using jQuery UI Datepicker and TimePicker Addon</li>
<li>Faster — no server request</li>
<li>Better interactivity</li>
<li>Old Date-/TimePicker via <code>tobago-config.xml</code></li>
</ul>
<p>
<b>Draggable Popups</b>
</p>
<b>Input Suggest</b>
<ul>
<li>New implementation</li>
<li>Sub-Tag <code class="language-markup">&lt;tc:suggest></code></li>
<li>More configuration options</li>
</ul>
<b>Tabs</b>
<ul>
<li>Icons</li>
<li>Toolbar buttons</li>
</ul>
<b>File upload</b>
<ul>
<li>Looks pretty now in every browser</li>
</ul>
<b>Radio Buttons</b>
<ul>
<li>Icons</li>
</ul>
</tc:section>
<tc:section label="New Features">
<b>HTML WYSIWYG Editor</b>
<ul>
<li>Integration example in the demo of <tc:link label="CKEditor™" link="http://ckeditor.com/"/> and
<tc:link label="TinyMCE" link="https://www.tinymce.com/"/></li>
<li>Not included, because of incompatible licences or breaks CSP</li>
<li>Other possible, but many have disadvantages</li>
</ul>
<b>Default Command for Sub-Forms</b>
<ul>
<li>Dependent from the focused input, the default command will be selected</li>
<li>Markup to show the command to the user</li>
</ul>
<b>Tree and Tree-Table</b>
<ul>
<li>Big internal refactoring</li>
<li>Work internally now with the JSF <code>UIData</code></li>
<li>Free model: <code>DefaultMutableTreeNode</code> is not required any longer, but you can implement
<code>javax.faces.model.DataModel</code></li>
<li>TreeTable</li>
<li>Infinite Trees possible</li>
<li>Selectors: sub-tree selection</li>
</ul>
<b>More</b>
<ul>
<li>Dynamic lists in <code class="language-markup">&lt;f:selectItems></code> need not glue code (JSF 2.0)</li>
<li>Redirect in navigation rules doesn't break layout size</li>
<li>Additional possibility to show paging arrows in sheet</li>
<li>Automatically create accesskey from underscore is know configurable</li>
</ul>
</tc:section>
<tc:section label="Security">
<b>Content Security Policy</b>
<ul>
<li>To prevent XSS</li>
<li><tc:link label="W3C Standard" link="https://www.w3.org/TR/CSP/"/></li>
<li>Idea:
<ul>
<li>Don't execute any code inside the HTML file
<ul>
<li>No content in script tags</li>
<li>no onclick, nor on* etc.</li>
</ul>
</li>
<li>Don't execute <code>eval(script)</code></li>
<li>Don't apply CSS inside the HTML file</li>
<li>Define the sources of any resources</li>
<li>Strict separation of code and data
<ul>
<li>Keep the code in JavaScript Files</li>
<li>Put additional data in HTML5 <code>data-*</code> attributes</li>
</ul>
</li>
</ul>
</li>
<li>Browser support: all current, but IE 10 and 11 only "sandbox"</li>
<li>Activated by default, can be configured via <code>tobago-config.xml</code></li>
<li>There is also a "report-only" mode for development</li>
</ul>
<b>Content Security Policy and Tobago</b>
<ul>
<li>All renderers and scripts are refactored to be compliant with CSP</li>
<li>Using application specific JavaScript in Tobago
<ul>
<li>script attribute in command tags is deprecated</li>
<li>Problem: when setting non of these attributes: <code>action</code>, <code>script</code>,
<code>link</code>, Tobago will create a default action.
This can't be changed without breaking compatibility.
</li>
<li>Solution: <code>omit="true"</code></li>
</ul>
</li>
</ul>
<b>Sanitize potentially malicious content (to prevent XSS)</b>
<ul>
<li><code class="language-markup">&lt;tc:textarea></code>, when it contains a
<code class="language-markup">&lt;tc:dataAttribute></code> with <code>name="html-editor"</code></li>
<li><code class="language-markup">&lt;tc:out></code>, when <code>escape="false"</code></li>
<li>Default implementation:
<tc:link label="JSoup" link="https://jsoup.org/cookbook/cleaning-html/whitelist-sanitizer"/> whitelist
scanning
</li>
<li>Configurable via <code>tobago-config.xml</code></li>
<li>Why? See
<tc:link label="OSWAP"
link="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.236_-_Sanitize_HTML_Markup_with_a_Library_Designed_for_the_Job"/>
</li>
</ul>
<b>More</b>
<ul>
<li>Setting nosniff HTTP header (to prevent XSS)</li>
<li>Don't allow to be in a frame (to prevent Frame-Attacks)</li>
<li>Both are configurable via <code>tobago-config.xml</code>, default is secure</li>
</ul>
</tc:section>
<tc:section label="Internal Refactoring">
<ul>
<li>Tree uses subclass of <code>javax.faces.model.DataModel</code></li>
<li>Using Java APT generator</li>
<li>Using ' instead of " for HTML attributes (JSON friendly)</li>
<li>JavaScript logging via console (plus workaround for old browsers)</li>
<li>The <code>theme-config.xml</code> was merged with <code>tobago-config.xml</code></li>
<li>Access the Tobago configuration via the <code>TobagoContext</code></li>
<li>The <code>TobagoConfig</code> is immutable after initialization</li>
<li>Add the version of Tobago into the resource URLs to avoid caching problem after updates</li>
</ul>
</tc:section>
</ui:composition>