Skip to content

Commit

Permalink
feat: add warning step to iframe security attributes config
Browse files Browse the repository at this point in the history
Related to #901
  • Loading branch information
Skaiir committed Jan 22, 2024
1 parent cecd35e commit d89df10
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 8 deletions.
4 changes: 4 additions & 0 deletions packages/form-js-editor/assets/form-js-editor-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -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>
</>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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 }>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function IFrame(props) {
key={ 'iframe-' + iframeRefresh }

/* @Note: JSX HTML attributes do not include <allow> */
{ ...{ allow: allow } }
{ ...{ allow } }
/>
}
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const SECURITY_ATTRIBUTES_DEFINITIONS = [
attribute: SANDBOX_ATTRIBUTE,
directive: 'allow-same-origin',
property: 'allowSameOrigin',
label: 'Storage and cookies'
label: 'Allow same origin'
},
{
attribute: ALLOW_ATTRIBUTE,
Expand Down Expand Up @@ -62,5 +62,11 @@ export const SECURITY_ATTRIBUTES_DEFINITIONS = [
directive: 'allow-top-navigation',
property: 'allowTopNavigation',
label: 'Top level navigation'
},
{
attribute: SANDBOX_ATTRIBUTE,
directive: 'allow-storage-access-by-user-activation',
property: 'allowStorageAccessByUserActivation',
label: 'Storage access by user'
}
];
Original file line number Diff line number Diff line change
Expand Up @@ -341,8 +341,8 @@ 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(0)).to.eql('allow-modals');
expect(iframe.sandbox.item(1)).to.eql('allow-same-origin');
expect(iframe.sandbox.item(2)).to.eql('allow-top-navigation');
expect(iframe.allow).to.eql('fullscreen; geolocation; microphone');
});
Expand Down

0 comments on commit d89df10

Please sign in to comment.