Trusted Type Knockout

spec/defaultBindings/htmlBehaviors.js

@@ -50,4 +50,21 @@ describe('Binding: HTML', function() {
  expect(td.tagName).toEqual("TD");
  expect('innerText' in td ? td.innerText : td.textContent).toEqual("hello");
  });
+
+ it('Should assign the TrustedHTML directly to innerHTML', function () {
+ // Mock Trusted Types.
+ trustedTypes = {};
+ trustedTypes.isHTML = function(input) {
+ if (input.type == "TrustedHTML") {
+ return true;
+ }
+ return false;
+ };
+
+ var html = {"type": "TrustedHTML"};
+ var model = { htmlProp: html };
+ testNode.innerHTML = "<span data-bind='html:htmlProp'></span>";
+ ko.applyBindings(model, testNode);
+ expect(testNode.childNodes[0].innerHTML).toEqual("[object Object]");
+ });
 });

src/binding/bindingProvider.js

@@ -1,6 +1,16 @@
 (function() {
  var defaultBindingAttributeName = "data-bind";
 
+ if (typeof trustedTypes !== "undefined") {
+ var knockoutPolicy = trustedTypes['createPolicy']('knockout', {
+ // This is relatively safe for DOM-based XSS.
+ // But it is not safe for Store/Reflected XSS.
+ 'createScript': function(opaqueScript) {
+ return opaqueScript;
+ }
+ });
+ }
+
  ko.bindingProvider = function() {
  this.bindingCache = {};
  };
@@ -66,6 +76,14 @@
  // Example result: with(sc1) { with(sc0) { return (expression) } }
  var rewrittenBindings = ko.expressionRewriting.preProcessBindings(bindingsString, options),
  functionBody = "with($context){with($data||{}){return{" + rewrittenBindings + "}}}";
+
+ if (typeof trustedTypes !== "undefined") {
+ // Trusted Types has a bug where it throws on new Function
+ // even if we pass TrustedScript. So use eval instead.
+ var f = "(function($context, $element) { " + functionBody + " })";
+ return eval(knockoutPolicy['createScript'](f));
+ }
+
  return new Function("$context", "$element", functionBody);
  }
 })();

src/utils.domManipulation.js

@@ -55,7 +55,12 @@
  documentContext.body.appendChild(div);
  }
 
- div.innerHTML = markup;
+ if (typeof trustedTypes !== "undefined" && trustedTypes['isHTML'](html)) {
+ // Pass TrustedHTML as-is.
+ div.innerHTML = html;
+ } else {
+ div.innerHTML = markup;
+ }
 
  if (mayRequireCreateElementHack) {
  div.parentNode.removeChild(div);
@@ -112,7 +117,8 @@
  html = ko.utils.unwrapObservable(html);
 
  if ((html !== null) && (html !== undefined)) {
- if (typeof html != 'string')
+ // If passed html is a TrustedHTML, do not stringify.
+ if (typeof html != 'string' && typeof trustedTypes !== "undefined" && !trustedTypes['isHTML'](html))
  html = html.toString();
 
  // jQuery contains a lot of sophisticated code to parse arbitrary HTML fragments,

src/utils.js

@@ -41,20 +41,24 @@ ko.utils = (function () {
  });
  var eventsThatMustBeRegisteredUsingAttachEvent = { 'propertychange': true }; // Workaround for an IE9 issue - https://github.com/SteveSanderson/knockout/issues/406
 
- // Detect IE versions for bug workarounds (uses IE conditionals, not UA string, for robustness)
- // Note that, since IE 10 does not support conditional comments, the following logic only detects IE < 10.
- // Currently this is by design, since IE 10+ behaves correctly when treated as a standard browser.
- // If there is a future need to detect specific versions of IE10+, we will amend this.
- var ieVersion = document && (function() {
- var version = 3, div = document.createElement('div'), iElems = div.getElementsByTagName('i');
-
- // Keep constructing conditional HTML blocks until we hit one that resolves to an empty fragment
- while (
- div.innerHTML = '<!--[if gt IE ' + (++version) + ']><i></i><![endif]-->',
- iElems[0]
- ) {}
- return version > 4 ? version : undefined;
- }());
+ var ieVersion = undefined;
+ if (typeof trustedTypes === "undefined") {
+ // Detect IE versions for bug workarounds (uses IE conditionals, not UA string, for robustness)
+ // Note that, since IE 10 does not support conditional comments, the following logic only detects IE < 10.
+ // Currently this is by design, since IE 10+ behaves correctly when treated as a standard browser.
+ // If there is a future need to detect specific versions of IE10+, we will amend this.
+ ieVersion = document && (function() {
+ var version = 3, div = document.createElement('div'), iElems = div.getElementsByTagName('i');
+
+ // Keep constructing conditional HTML blocks until we hit one that resolves to an empty fragment
+ while (
+ div.innerHTML = '<!--[if gt IE ' + (++version) + ']><i></i><![endif]-->',
+ iElems[0]
+ ) {}
+ return version > 4 ? version : undefined;
+ }());
+ }
+
  var isIe6 = ieVersion === 6,
  isIe7 = ieVersion === 7;