Fixes: #1679. Remove unsafe-eval directive from our CSP policy.

.eslintrc

@@ -27,6 +27,7 @@
     "Promise": true,
     "require": true,
     "wcEvents": true,
+    "wcTmpl": true,
     "WindowHelpers": true
   },
   "rules": {

.gitignore

@@ -25,6 +25,7 @@ webcompat/static/js/issues.js
 webcompat/static/js/issue-list.js
 webcompat/static/js/user-activity.js
 webcompat/static/js/cssfixme.js
+webcompat/static/js/templates.js
 webcompat/**/*.min.js
 webcompat/**/*.min.css
 webcompat/**/*.dev.css

Gruntfile.js

@@ -5,6 +5,7 @@
 module.exports = function(grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON("package.json"),
+    tmplPath: "webcompat/templates/",
     jsPath: "webcompat/static/js",
     cssPath: "webcompat/static/css",
     imgPath: "webcompat/static/img",
@@ -24,6 +25,7 @@ module.exports = function(grunt) {
   // Default task.
   grunt.registerTask("default", [
     "checkDependencies",
+    "jst",
     "concat",
     "uglify",
     "postcss",
@@ -33,6 +35,7 @@ module.exports = function(grunt) {
   // Task used before doing a deploy (same as default, but does image optimization)
   grunt.registerTask("deploy", [
     "checkDependencies",
+    "jst",
     "concat",
     "uglify",
     "postcss",

docs/dev-env-setup.md

@@ -198,6 +198,7 @@ After certain kinds of changes are made, you need to build the project before se
 
 * CSS: a build will run cssnext, combine custom media queries, and concat all source files into webcompat.dev.css. You'll need to re-build the CSS to see any changes, so it's recommended to use a watch task (see `npm run watch`).
 * JS: a build will run eslint, minify and concat source files.
+* JS templates (.jst files): if you are making changes to a Backbone template in a `.jst` file, you will need to re-run the `build` command to update the pre-compiled `templates.js` file before you will see the results.
 * HTML templates: the changes should be served from disk without the need for rebuilding
 * Python: the Flask local server will detect changes and restart automatically. No need to re-build.
 

grunt-tasks/concat.js

@@ -22,7 +22,8 @@ module.exports = function(grunt) {
         "<%= jsPath %>/vendor/backbone.mousetrap.js",
         "<%= jsPath %>/lib/flash-message.js",
         "<%= jsPath %>/lib/homepage.js",
-        "<%= jsPath %>/lib/bugform.js"
+        "<%= jsPath %>/lib/bugform.js",
+        "<%= jsPath %>/templates.js"
       ],
       dest: "<%= jsPath %>/<%= pkg.name %>.js"
     },

grunt-tasks/jst.js

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function(grunt) {
+  grunt.config("jst", {
+    compile: {
+      options: {
+        namespace: "wcTmpl",
+        prettify: true,
+        processContent: function(src) {
+          // strip the opening and closing <script> tags...
+          // otherwise, the template functions will just inject script elements
+          // that won't render.
+          src = src.replace(/<script type="text\/template">/, "");
+          src = src.replace(/<\/script>/, "");
+          return src.trim();
+        },
+        processName: function(filename) {
+          // make this a bit less redunant when we have to refer back
+          // to the pre-compiled template function names.
+          return filename.split("webcompat/templates/")[1];
+        }
+      },
+      files: {
+        "<%= jsPath %>/templates.js": ["<%= tmplPath %>/**/*.jst"]
+      }
+    }
+  });
+};

package.json

@@ -32,6 +32,7 @@
     "grunt-contrib-concat": "^1.0.0",
     "grunt-contrib-cssmin": "^2.0.0",
     "grunt-contrib-imagemin": "~1.0.1",
+    "grunt-contrib-jst": "^1.0.0",
     "grunt-contrib-uglify": "^2.3.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-postcss": "^0.8.0",

webcompat/helpers.py

@@ -494,7 +494,7 @@ def add_csp(response):
         "font-src 'self'; " +
         "img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com data:; " +  # nopep8
         "manifest-src 'self'; " +
-        "script-src 'self' 'unsafe-eval' https://www.google-analytics.com https://api.github.com; " +  # nopep8
+        "script-src 'self' https://www.google-analytics.com https://api.github.com; " +  # nopep8
         "style-src 'self' 'unsafe-inline'; " +
         "report-uri /csp-report"
     )

webcompat/static/js/lib/comments.js

@@ -26,7 +26,7 @@ issues.CommentView = Backbone.View.extend({
   id: function() {
     return this.model.get("commentLinkId");
   },
-  template: _.template($("#comment-tmpl").html()),
+  template: wcTmpl["issue/issue-comment-list.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;

webcompat/static/js/lib/diagnose.js

@@ -23,7 +23,7 @@ diagnose.NeedsTriageView = Backbone.View.extend({
       })
       .error(function() {});
   },
-  template: _.template($("#needstriage-tmpl").html()),
+  template: wcTmpl["web_modules/issue-list.jst"],
   render: function() {
     this.$el.html(
       this.template({

webcompat/static/js/lib/issue-list.js

@@ -38,7 +38,7 @@ issueList.DropdownView = Backbone.View.extend({
       _.bind(this.selectDropdownOption, this)
     );
   },
-  template: _.template($("#dropdown-tmpl").html()),
+  template: wcTmpl["list-issue/dropdown.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -154,7 +154,7 @@ issueList.SearchView = Backbone.View.extend({
     issueList.events.on("search:clear", _.bind(this.clearSearchBox, this));
     issueList.events.on("search:current", _.bind(this.currentSearch, this));
   },
-  template: _.template($("#issuelist-search-tmpl").html()),
+  template: wcTmpl["list-issue/issuelist-search.jst"],
   render: function(cb) {
     this.$el.html(this.template());
     this.input = this.$el.find("input");
@@ -245,7 +245,7 @@ issueList.SortingView = Backbone.View.extend({
       model: this.sortModel
     });
   },
-  template: _.template($("#issuelist-sorting-tmpl").html()),
+  template: wcTmpl["list-issue/issuelist-sorting.jst"],
   render: function() {
     this.$el.html(this.template());
     this.paginationDropdown
@@ -290,7 +290,7 @@ issueList.IssueView = Backbone.View.extend(
       issuesPagination.initMixin(this, this.issues, $("main"));
       this.loadIssues();
     },
-    template: _.template($("#issuelist-issue-tmpl").html()),
+    template: wcTmpl["list-issue/issuelist-issue.jst"],
     loadIssues: function() {
       // Attemps to load model state from URL params, if present,
       // otherwise grab model defaults and load issues

webcompat/static/js/lib/issues.js

@@ -100,7 +100,7 @@ issues.MetaDataView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#metadata-tmpl").html()),
+  template: wcTmpl["issue/metadata.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -117,7 +117,7 @@ issues.AsideView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#aside-tmpl").html()),
+  template: wcTmpl["issue/aside.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     return this;
@@ -127,7 +127,7 @@ issues.AsideView = Backbone.View.extend({
 issues.BodyView = Backbone.View.extend({
   el: $(".wc-Issue-report"),
   mainView: null,
-  template: _.template($("#issue-info-tmpl").html()),
+  template: wcTmpl["issue/issue-report.jst"],
   initialize: function(options) {
     this.mainView = options.mainView;
   },
@@ -184,7 +184,7 @@ issues.ImageUploadView = Backbone.View.extend({
   },
   _submitButton: $(".js-Issue-comment-button"),
   _loaderImage: $(".js-Upload-Loader"),
-  template: _.template($("#upload-input-tmpl").html()),
+  template: wcTmpl["issue/upload-image.jst"],
   render: function() {
     this.$el.html(this.template()).insertAfter($("textarea"));
     return this;
@@ -352,7 +352,7 @@ issues.StateButtonView = Backbone.View.extend({
       }, this)
     );
   },
-  template: _.template($("#state-button-tmpl").html()),
+  template: wcTmpl["issue/state-button.jst"],
   render: function() {
     var buttonText;
     if (this.model.get("state") === "open") {

webcompat/static/js/lib/labels.js

@@ -35,18 +35,10 @@ issues.LabelsView = Backbone.View.extend({
       this.editLabels();
     }
   },
-  template: _.template($("#issue-labels-tmpl").html()),
+  template: wcTmpl["issue/issue-labels.jst"],
   // this subTemplate will need to be kept in sync with
-  // relavant parts in $('#issue-labels-tmpl')
-  subTemplate: _.template(
-    [
-      "<% _.each(labels, function(label) { %>",
-      '<span class="wc-Label wc-Label--badge js-Label" style="background-color:#<%=label.color%>">',
-      "<%= label.name %>",
-      "</span>",
-      "<% }); %>"
-    ].join("")
-  ),
+  // relavant parts in issue/issue-labels.jst
+  subTemplate: wcTmpl["issue/issue-labels-sub.jst"],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     this.fetchLabels();
@@ -105,7 +97,7 @@ issues.LabelEditorView = Backbone.View.extend({
   initialize: function(options) {
     this.issueView = options.issueView;
   },
-  template: _.template($("#label-editor-tmpl").html()),
+  template: wcTmpl["web_modules/label-editor.jst"],
   render: function() {
     this.$el.html(this.template(this.model));
     this.resizeEditorHeight();

webcompat/static/js/lib/user-activity.js

@@ -36,11 +36,11 @@ issueList.MyIssuesView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: _.template($("#my-issues-tmpl").html()),
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({
-          myIssues: this.issues.toJSON()
+          issues: this.issues.toJSON()
         })
       );
 
@@ -107,11 +107,11 @@ issueList.IssueMentionsView = Backbone.View.extend(
       );
       this.fetchAndRenderIssues({ url: this.issues.url });
     },
-    template: _.template($("#issue-mentions-tmpl").html()),
+    template: wcTmpl["web_modules/issue-list.jst"],
     render: function() {
       this.$el.html(
         this.template({
-          issueMentions: this.issues.toJSON()
+          issues: this.issues.toJSON()
         })
       );
       return this;