feat: add warning step to iframe security attributes config

Related to #901
bpmn-io · Jan 21, 2024 · 195727b · 195727b
1 parent cecd35e
commit 195727b
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 14 deletions.
diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -741,6 +741,10 @@
   transform: scale(1.3);
 }
 
+.fjs-properties-container .fjs-properties-panel .fjs-properties-panel-detached-description {
+  margin: 0px 12px 6px
+}
+
 /**
  * Editor Form Fields
  */

diff --git a/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js b/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js
@@ -7,6 +7,14 @@ import { SECURITY_ATTRIBUTES_DEFINITIONS } from '@bpmn-io/form-js-viewer';
 
 export function SecurityAttributesGroup(field, editField) {
 
+  const {
+    type
+  } = field;
+
+  if (type !== 'iframe') {
+    return null;
+  }
+
   const entries = createEntries({ field, editField });
 
   if (!entries.length) {
@@ -27,7 +35,7 @@ function createEntries(props) {
     field
   } = props;
 
-  return SECURITY_ATTRIBUTES_DEFINITIONS.map((definition) => {
+  const securityEntries = SECURITY_ATTRIBUTES_DEFINITIONS.map((definition) => {
     const {
       label,
       property
@@ -46,13 +54,22 @@ function createEntries(props) {
       }
     });
   });
+
+  return [
+    { component: Advisory },
+    ...securityEntries
+  ];
+
 }
 
+const Advisory = (props) => {
+  return <div class="bio-properties-panel-description fjs-properties-panel-detached-description">These options can incur security risks, especially if used in combination with dynamic links. Ensure that you are aware of them, that you trust the source url and only enable what your use case requires.</div>;
+};
+
 // helpers //////////
 
 function getTooltip() {
   return <>
     <p>Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">MDN iFrame documentation.</a></p>
-    <p>Be cautious when embedding content from external sources. Ensure you trust the source and are aware of the potential security risks.</p>
   </>;
 }
diff --git a/...form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js b/...form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js
@@ -24,7 +24,7 @@ describe('SecurityAttributesGroup', function() {
     renderSecurityAttributesGroup({ field });
 
     // then
-    expect(findGroup('appearance', document.body)).to.not.exist;
+    expect(findGroup('securityAttributes', document.body)).to.not.exist;
   });
 
   SECURITY_ATTRIBUTES_DEFINITIONS.forEach(({ property }) => {
@@ -108,7 +108,7 @@ function renderSecurityAttributesGroup(options) {
     services
   } = options;
 
-  const groups = [ SecurityAttributesGroup(field, editField) ];
+  const groups = [ SecurityAttributesGroup(field, editField) ].filter(group => group);
 
   return render(
     <MockPropertiesPanelContext services={ services }>

diff --git a/packages/form-js-viewer/src/render/components/form-fields/IFrame.js b/packages/form-js-viewer/src/render/components/form-fields/IFrame.js
@@ -59,7 +59,7 @@ export function IFrame(props) {
           key={ 'iframe-' + iframeRefresh }
 
           /* @Note: JSX HTML attributes do not include <allow> */
-          { ...{ allow: allow } }
+          { ...{ allow } }
         />
     }
     {

diff --git a/packages/form-js-viewer/src/util/constants/IFrameConstants.js b/packages/form-js-viewer/src/util/constants/IFrameConstants.js
@@ -9,12 +9,6 @@ export const SECURITY_ATTRIBUTES_DEFINITIONS = [
     property: 'allowScripts',
     label: 'Script execution'
   },
-  {
-    attribute: SANDBOX_ATTRIBUTE,
-    directive: 'allow-same-origin',
-    property: 'allowSameOrigin',
-    label: 'Storage and cookies'
-  },
   {
     attribute: ALLOW_ATTRIBUTE,
     directive: 'fullscreen',
@@ -62,5 +56,17 @@ export const SECURITY_ATTRIBUTES_DEFINITIONS = [
     directive: 'allow-top-navigation',
     property: 'allowTopNavigation',
     label: 'Top level navigation'
+  },
+  {
+    attribute: SANDBOX_ATTRIBUTE,
+    directive: 'allow-same-origin',
+    property: 'allowSameOrigin',
+    label: 'Allow same origin'
+  },
+  {
+    attribute: SANDBOX_ATTRIBUTE,
+    directive: 'allow-storage-access-by-user-activation',
+    property: 'allowStorageAccessByUserActivation',
+    label: 'Storage access by user'
   }
 ];
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/IFrame.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/IFrame.spec.js
@@ -341,9 +341,9 @@ describe('IFrame', function() {
       const iframe = formField.querySelector('.fjs-iframe');
 
       expect(iframe.sandbox.length).to.eql(3);
-      expect(iframe.sandbox.item(0)).to.eql('allow-same-origin');
-      expect(iframe.sandbox.item(1)).to.eql('allow-modals');
-      expect(iframe.sandbox.item(2)).to.eql('allow-top-navigation');
+      expect(iframe.sandbox.item(0)).to.eql('allow-modals');
+      expect(iframe.sandbox.item(1)).to.eql('allow-top-navigation');
+      expect(iframe.sandbox.item(2)).to.eql('allow-same-origin');
       expect(iframe.allow).to.eql('fullscreen; geolocation; microphone');
     });