diff --git a/README.md b/README.md index e5eff4a8..e861723b 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,31 @@ The following values are valid configuration: * "tab" -- To indicate tab style indentation (1 char) +#### html-comments + +Html comments in your templates will get compiled and rendered into the DOM at runtime. Instead you can annotate your templates using Handlebars comments, which will be stripped out when the template is compiled and have no effect at runtime. + +This rule forbids the following: + +``` hbs + +``` + +but allows the following: + +```hbs +{{!-- comment goes here --}} +``` + +Html comments containing linting instructions such as: + +```hbs + +``` + +are of course allowed (and since the linter strips them during processing, they will not get compiled and rendered into the DOM regardless of this rule). + + #### triple-curlies Usage of triple curly braces to allow raw HTML to be injected into the DOM is large vector for exploits of your application (especially when the raw HTML is user controllable ). Instead of using `{{{foo}}}`, you should use appropriate helpers or computed properties that return a `SafeString` (via `Ember.String.htmlSafe` generally) and ensure that user supplied data is properly escaped. diff --git a/blueprints/ember-cli-template-lint/files/.template-lintrc.js b/blueprints/ember-cli-template-lint/files/.template-lintrc.js index d4a442cd..f3c70029 100644 --- a/blueprints/ember-cli-template-lint/files/.template-lintrc.js +++ b/blueprints/ember-cli-template-lint/files/.template-lintrc.js @@ -4,5 +4,6 @@ module.exports = { 'bare-strings': ['(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}'], 'block-indentation': 2, + 'html-comments': true, 'triple-curlies': true }; diff --git a/ext/plugins/index.js b/ext/plugins/index.js index 3c31210f..09f084f2 100644 --- a/ext/plugins/index.js +++ b/ext/plugins/index.js @@ -3,5 +3,6 @@ module.exports = { 'bare-strings': require('./lint-bare-strings'), 'block-indentation': require('./lint-block-indentation'), + 'html-comments': require('./lint-html-comments'), 'triple-curlies': require('./lint-triple-curlies') }; diff --git a/ext/plugins/lint-html-comments.js b/ext/plugins/lint-html-comments.js new file mode 100644 index 00000000..37c0234b --- /dev/null +++ b/ext/plugins/lint-html-comments.js @@ -0,0 +1,37 @@ +'use strict'; + +var calculateLocationDisplay = require('../helpers/calculate-location-display'); +var buildPlugin = require('./base'); + +module.exports = function(addonContext) { + var LogHtmlComments = buildPlugin(addonContext, 'html-comments'); + + LogHtmlComments.prototype.parseConfig = function(config) { + var configType = typeof config; + + var errorMessage = 'The html-comments rule accepts one of the following values.\n ' + + ' * boolean - `true` to enable / `false` to disable\n' + + '\nYou specified `' + JSON.stringify(config) + '`'; + + switch (configType) { + case 'boolean': + return config; + case 'undefined': + return false; + default: + throw new Error(errorMessage); + } + }; + + LogHtmlComments.prototype.detect = function(node) { + return node.type === 'CommentStatement'; + }; + + LogHtmlComments.prototype.process = function(node) { + var location = calculateLocationDisplay(this.options.moduleName, node.loc && node.loc.start); + this.log('Html comment detected `` at ' + location + + '. Use Handlebars comment instead `{{!--' + node.value +'--}}`'); + }; + + return LogHtmlComments; +}; diff --git a/node-tests/unit/plugins/lint-html-comments-test.js b/node-tests/unit/plugins/lint-html-comments-test.js new file mode 100644 index 00000000..0b33deae --- /dev/null +++ b/node-tests/unit/plugins/lint-html-comments-test.js @@ -0,0 +1,28 @@ +'use strict'; + +var generateRuleTests = require('../../helpers/rule-test-harness'); + +generateRuleTests({ + name: 'html-comments', + + config: true, + + good: [ + '{{!-- comment here --}}', + '{{!--comment here--}}', + '' + ], + + bad: [ + { + template: '', + message: 'Html comment detected `` at (\'layout.hbs\'). ' + + 'Use Handlebars comment instead `{{!-- comment here --}}`' + }, + { + template: '', + message: 'Html comment detected `` at (\'layout.hbs\'). ' + + 'Use Handlebars comment instead `{{!--comment here--}}`' + } + ] +});