[JS] Implement Trusted Types

source/nodejs/.prettierrc.json

@@ -1,4 +1,5 @@
 {
+	"tabWidth": 4,
 	"printWidth": 100,
 	"trailingComma": "none",
 	"quoteProps": "preserve"

source/nodejs/ac-typed-schema/src/markdown/languages/de.json

@@ -232,5 +232,16 @@
 	"Style hint for `TableCell`.": "Style hint for `TableCell`.",
 	"Allows users to filter choices in a choice set.": "Allows users to filter choices in a choice set.",
 	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
-	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted."
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.",
+	"Defines a source for captions": "Defines a source for captions",
+	"Defines various metadata properties": "Defines various metadata properties",
+	"Defines various metadata properties typically not used for rendering the card": "Defines various metadata properties typically not used for rendering the card",
+	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
+	"Array of captions sources for the media element to provide.": "Array of captions sources for the media element to provide.",
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.",
+	"Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.": "Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.",
+	"URL to captions.": "URL to captions.",
+	"Label of this caption to show to the user.": "Label of this caption to show to the user.",
+	"A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z": "A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z",
+	"URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.": "URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts."
 }

source/nodejs/ac-typed-schema/src/markdown/languages/en.json

@@ -232,5 +232,16 @@
 	"Style hint for `TableCell`.": "Style hint for `TableCell`.",
 	"Allows users to filter choices in a choice set.": "Allows users to filter choices in a choice set.",
 	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
-	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted."
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.",
+	"Defines a source for captions": "Defines a source for captions",
+	"Defines various metadata properties": "Defines various metadata properties",
+	"Defines various metadata properties typically not used for rendering the card": "Defines various metadata properties typically not used for rendering the card",
+	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
+	"Array of captions sources for the media element to provide.": "Array of captions sources for the media element to provide.",
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.",
+	"Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.": "Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.",
+	"URL to captions.": "URL to captions.",
+	"Label of this caption to show to the user.": "Label of this caption to show to the user.",
+	"A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z": "A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z",
+	"URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.": "URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts."
 }

source/nodejs/ac-typed-schema/src/markdown/languages/sp.json

@@ -232,5 +232,16 @@
 	"Style hint for `TableCell`.": "Style hint for `TableCell`.",
 	"Allows users to filter choices in a choice set.": "Allows users to filter choices in a choice set.",
 	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) ot will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
-	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted."
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, mimeType can be omitted.",
+	"Defines a source for captions": "Defines a source for captions",
+	"Defines various metadata properties": "Defines various metadata properties",
+	"Defines various metadata properties typically not used for rendering the card": "Defines various metadata properties typically not used for rendering the card",
+	"URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.": "URL of an image to display before playing. Supports data URI in version 1.2+. If poster is omitted, the Media element will either use a default poster (controlled by the host application) or will attempt to automatically pull the poster from the target video service when the source URL points to a video from a Web provider such as YouTube.",
+	"Array of captions sources for the media element to provide.": "Array of captions sources for the media element to provide.",
+	"Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.": "Mime type of associated media (e.g. `\"video/mp4\"`). For YouTube and other Web video URLs, `mimeType` can be omitted.",
+	"Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.": "Mime type of associated caption file (e.g. `\"vtt\"`). For rendering in JavaScript, only `\"vtt\"` is supported, for rendering in UWP, `\"vtt\"` and `\"srt\"` are supported.",
+	"URL to captions.": "URL to captions.",
+	"Label of this caption to show to the user.": "Label of this caption to show to the user.",
+	"A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z": "A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z",
+	"URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.": "URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts."
 }

source/nodejs/adaptivecards-controls/src/calendar.ts

@@ -162,7 +162,7 @@ export class Calendar extends InputControl {
 
         var month = newDate.getMonth();
 
-        this._miniCalendarElement.innerHTML = "";
+        Utils.clearElement(this._miniCalendarElement);
 
         this._miniCalendarElement.classList.remove(
             "ms-ctrl-slide",
@@ -282,7 +282,7 @@ export class Calendar extends InputControl {
     attach(rootElement: HTMLElement) {
         super.attach(rootElement);
 
-        rootElement.innerHTML = "";
+        Utils.clearElement(rootElement);
         rootElement.appendChild(this._rootContainerElement);
     }
 

source/nodejs/adaptivecards-controls/src/checkbox.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { Constants } from "./constants";
 import { InputControl } from "./inputcontrol";
+import { clearElement } from "./utils";
 
 export class CheckBox extends InputControl {
     // Used to generate unique Ids
@@ -69,7 +70,7 @@ export class CheckBox extends InputControl {
 
         labelElement.appendChild(this._spanElement);
 
-        rootElement.innerHTML = "";
+        clearElement(rootElement);
         rootElement.appendChild(this._checkboxElement);
         rootElement.appendChild(labelElement);
     }

source/nodejs/adaptivecards-controls/src/inputwithpopup.ts

@@ -192,7 +192,7 @@ export abstract class InputWithPopup<TPopupControl extends PopupControl, TValue>
     private updateLabel() {
         if (this._labelElement) {
             if (this._value) {
-                this._labelElement.innerHTML = this.getValueAsString();
+                this._labelElement.innerText = this.getValueAsString();
                 this._labelElement.classList.remove("placeholder");
             }
             else {

source/nodejs/adaptivecards-controls/src/radiobutton.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { Constants } from "./constants";
 import { InputControl } from "./inputcontrol";
+import { clearElement } from "./utils";
 
 export class RadioButton extends InputControl {
     // Used to generate unique Ids
@@ -75,7 +76,7 @@ export class RadioButton extends InputControl {
 
         labelElement.appendChild(this._spanElement);
 
-        rootElement.innerHTML = "";
+        clearElement(rootElement);
         rootElement.appendChild(this._checkboxElement);
         rootElement.appendChild(labelElement);
     }

source/nodejs/adaptivecards-controls/src/textbox.ts

@@ -147,7 +147,7 @@ export class TextBox extends InputControl {
         this._editBox.placeholder = this._placeholder;
         this._editBox.onChange = () => { this.editBoxChanged(); }
 
-        this.rootElement.innerHTML = "";
+        Utils.clearElement(this.rootElement);
         this.rootElement.appendChild(this._editBox.element);
     }
 

source/nodejs/adaptivecards-controls/src/utils.ts

@@ -138,3 +138,8 @@ export function getAttributeValueAsInt(element: HTMLElement, attributeName: stri
 
     return defaultValue;
 }
+
+export function clearElement(element: HTMLElement) : void {
+    const trustedHtml = window.trustedTypes?.emptyHTML ?? "";
+    element.innerHTML = trustedHtml as string;
+}

source/nodejs/adaptivecards-react/src/adaptive-card.tsx

@@ -124,7 +124,8 @@ export const AdaptiveCard = ({
         try {
             card.parse(payload);
             const result = card.render() as HTMLElement;
-            targetRef.current.innerHTML = '';
+            const trustedHtml = window.trustedTypes?.emptyHTML ?? "";
+            targetRef.current.innerHTML = trustedHtml as string;
             targetRef.current.appendChild(result);
         } catch (cardRenderError) {
             if (onError) {

source/nodejs/adaptivecards-ui-testapp/src/rendering-utils.ts

@@ -4,6 +4,10 @@ import { getTestCasesList } from "./file-retriever-utils";
 import { Action, AdaptiveCard, ExecuteAction, HostConfig, IMarkdownProcessingResult, Input, OpenUrlAction, PropertyBag, SerializationContext, SubmitAction, Version, Versions } from "adaptivecards";
 import * as Remarkable from "remarkable";
 
+const ttPolicy = window.trustedTypes?.createPolicy('adaptivecards-ui-testapp', {
+    createHTML: value => value,
+});
+
 export function listAllFiles(): HTMLLIElement[] {
     const testCasesList: HTMLLIElement[] = [];
 
@@ -105,7 +109,9 @@ export function renderCard(cardJson: any, callbackFunction: Function): void {
         }
 
         const retrievedInputsDiv: HTMLElement = document.getElementById("retrievedInputsDiv");
-        retrievedInputsDiv.innerHTML = inputsAsJson;
+
+        const trustedHtml = ttPolicy?.createHTML(inputsAsJson) ?? inputsAsJson;
+        retrievedInputsDiv.innerHTML = trustedHtml as string;
         retrievedInputsDiv.style.visibility = "visible";
     };
 
@@ -129,7 +135,8 @@ export function renderCard(cardJson: any, callbackFunction: Function): void {
 
 export function cardRenderedCallback(renderedCard: HTMLElement) {
     const renderedCardDiv = document.getElementById("renderedCardSpace");
-    renderedCardDiv.innerHTML = "";
+    const trustedHtml = window.trustedTypes?.emptyHTML ?? "";
+    renderedCardDiv.innerHTML = trustedHtml as string;
     renderedCardDiv.appendChild(renderedCard);
     renderedCardDiv.style.visibility = "visible";
 }