Custom widgets iframes media & clipboard access allowed (#2050)

* clipboard-read; clipboard-write

* camera; microphone

* refactor to separate const

src/components/custom-html/ko/customHtmlView.html

@@ -1,3 +1,4 @@
-<iframe data-bind="attr: { srcdoc: htmlCode, sandbox: iframeSandboxAllows }, styled: styles"
+<iframe
+    data-bind="attr: { srcdoc: htmlCode, allow: iframeAllows, sandbox: iframeSandboxAllows }, styled: styles"
     frameborder="0"
 ></iframe>

src/components/custom-html/ko/customHtmlViewModel.ts

@@ -3,7 +3,7 @@ import template from "./customHtmlView.html";
 import { widgetSelector } from "../constants";
 import { Component } from "@paperbits/common/ko/decorators";
 import { StyleModel } from "@paperbits/common/styles";
-import { iframeSandboxAllows } from "../../../constants";
+import { iframeAllows, iframeSandboxAllows } from "../../../constants";
 
 @Component({
     selector: widgetSelector,
@@ -12,6 +12,7 @@ import { iframeSandboxAllows } from "../../../constants";
 export class CustomHtmlViewModel {
     public readonly styles: ko.Observable<StyleModel>;
     public readonly htmlCode: ko.Observable<string>;
+    public readonly iframeAllows: string = iframeAllows;
     public readonly iframeSandboxAllows: string = iframeSandboxAllows;
 
     constructor() {

src/components/custom-widget/ko/customWidgetEditorView.html

@@ -14,7 +14,7 @@ <h4>Custom properties</h4>
         </div>
 
         <iframe class="flex-item flex-item-grow"
-                data-bind="attr: { id: instanceId, src: src, sandbox: iframeSandboxAllows }"
+                data-bind="attr: { id: instanceId, src: src, allow: iframeAllows, sandbox: iframeSandboxAllows }"
                 height="320"
                 frameborder="0"
         ></iframe>

src/components/custom-widget/ko/customWidgetEditorViewModel.ts

@@ -7,7 +7,7 @@ import { StyleHelper } from "@paperbits/styles";
 import { ViewManager } from "@paperbits/common/ui";
 import { EventManager, Events } from "@paperbits/common/events";
 import { ISettingsProvider } from "@paperbits/common/configuration";
-import { iframeSandboxAllows } from "../../../constants";
+import { iframeAllows, iframeSandboxAllows } from "../../../constants";
 import { MapiBlobStorage } from "../../../persistence";
 import { CustomWidgetModel } from "../customWidgetModel";
 import { widgetEditorSelector } from "..";
@@ -23,6 +23,7 @@ export class CustomWidgetEditorViewModel implements WidgetEditor<CustomWidgetMod
     public readonly customInputValue: ko.Observable<string>;
     public readonly src: ko.Observable<string>;
     public readonly instanceId: ko.Observable<string>;
+    public readonly iframeAllows: string = iframeAllows;
     public readonly iframeSandboxAllows: string = iframeSandboxAllows;
 
     constructor(

src/components/custom-widget/ko/runtime/customWidget.html

@@ -1,4 +1,4 @@
-<iframe data-bind="attr: { id: instanceId, name: name, src: src, sandbox: iframeSandboxAllows }"
+<iframe data-bind="attr: { id: instanceId, name: name, src: src, allow: iframeAllows, sandbox: iframeSandboxAllows }"
         style="width: 100%; height: 100%;"
         frameborder="0"
 ></iframe>

src/components/custom-widget/ko/runtime/customWidget.ts

@@ -1,7 +1,7 @@
 import * as ko from "knockout";
 import { Component, RuntimeComponent, OnMounted, OnDestroyed, Param } from "@paperbits/common/ko/decorators";
 import { Environment } from "@azure/api-management-custom-widgets-tools";
-import { iframeSandboxAllows } from "../../../../constants";
+import { iframeAllows, iframeSandboxAllows } from "../../../../constants";
 import { widgetRuntimeSelector } from "../../constants";
 import template from "./customWidget.html";
 
@@ -13,6 +13,7 @@ import template from "./customWidget.html";
     template: template
 })
 export class CustomWidget {
+    public readonly iframeAllows: string = iframeAllows;
     public readonly iframeSandboxAllows: string = iframeSandboxAllows;
     private windowRef = window;
 

src/constants.ts

@@ -307,6 +307,11 @@ export const genericHttpRequestError = "Server error. Unable to send request. Pl
 export const oauthSessionKey = "oauthSession";
 export const reservedCharTuplesForOData: [string, string][] = [["'", "''"]];
 
+/**
+ * List of attributes for an iframe allow.
+ */
+export const iframeAllows = "clipboard-read; clipboard-write; camera; microphone; geolocation";
+
 /**
  * List of allowed attributes for a sandboxed iframe.
  */