diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css index 704f9528d..c848099db 100644 --- 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 index fe952534e..5532becb8 100644 --- 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
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.
; +}; + // helpers ////////// function getTooltip() { return <>

Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the MDN iFrame documentation.

-

Be cautious when embedding content from external sources. Ensure you trust the source and are aware of the potential security risks.

; } \ No newline at end of file diff --git a/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js index 4c26512c1..14342fec5 100644 --- a/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js +++ b/packages/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( 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 index e65995e29..365bf4229 100644 --- 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 } } /> } { diff --git a/packages/form-js-viewer/src/util/constants/IFrameConstants.js b/packages/form-js-viewer/src/util/constants/IFrameConstants.js index 276d568ac..7ccfff56d 100644 --- 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' } ]; \ No newline at end of file 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 index 4ab46e95a..32d9b2943 100644 --- 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'); });