diff --git a/.changeset/dirty-bugs-rush.md b/.changeset/dirty-bugs-rush.md new file mode 100644 index 00000000..a6da5312 --- /dev/null +++ b/.changeset/dirty-bugs-rush.md @@ -0,0 +1,5 @@ +--- +"@adyen/adyen-web": patch +--- + +fix: remove inline style applied to iframe diff --git a/packages/lib/src/components/internal/IFrame/Iframe.scss b/packages/lib/src/components/internal/IFrame/Iframe.scss new file mode 100644 index 00000000..c9346d44 --- /dev/null +++ b/packages/lib/src/components/internal/IFrame/Iframe.scss @@ -0,0 +1,3 @@ +.adyen-checkout__iframe{ + border: 0; +} diff --git a/packages/lib/src/components/internal/IFrame/Iframe.tsx b/packages/lib/src/components/internal/IFrame/Iframe.tsx index bc510a85..29351572 100644 --- a/packages/lib/src/components/internal/IFrame/Iframe.tsx +++ b/packages/lib/src/components/internal/IFrame/Iframe.tsx @@ -1,5 +1,6 @@ import { Component, h } from 'preact'; import classNames from 'classnames'; +import './Iframe.scss'; interface IframeProps { width?: string; @@ -75,7 +76,6 @@ class Iframe extends Component { src={src} width={width} height={height} - style={{ border: 0 }} frameBorder="0" title={title} /* eslint-disable react/no-unknown-property */ diff --git a/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.scss b/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.scss new file mode 100644 index 00000000..68ef7024 --- /dev/null +++ b/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.scss @@ -0,0 +1,6 @@ +.js-iframe { + border: none; + height: 100%; + width: 100%; + overflow: hidden; +} diff --git a/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.ts b/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.ts index 9dd1df93..b51aa062 100644 --- a/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.ts +++ b/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.ts @@ -28,6 +28,7 @@ import { processAriaConfig } from './utils/processAriaConfig'; import { processPlaceholders } from './utils/processPlaceholders'; import Language from '../../../../../language/Language'; import { hasOwnProperty } from '../../../../../utils/hasOwnProperty'; +import './SecuredField.scss'; const logPostMsg = false; const doLog = false; diff --git a/packages/lib/src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts b/packages/lib/src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts index 4460a2a9..9b407772 100644 --- a/packages/lib/src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts +++ b/packages/lib/src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts @@ -1,12 +1,7 @@ -export default function createIframe({ - src, - title = 'iframe element', - policy = 'origin', - styleStr = 'border: none; height:100%; width:100%; overflow:hidden;' -}) { +export default function createIframe({ src, title = 'iframe element', policy = 'origin' }) { const iframeEl = document.createElement('iframe'); iframeEl.setAttribute('src', src); - iframeEl.setAttribute('class', 'js-iframe'); + iframeEl.classList.add('js-iframe'); // For a11y some merchants want to be able to remove the title element on the iframe - seeing the info it carries as extraneous for the screenreader if (title === '' || title.trim().length === 0 || title === 'none') { iframeEl.setAttribute('role', 'presentation'); @@ -15,7 +10,6 @@ export default function createIframe({ } iframeEl.setAttribute('allowtransparency', 'true'); - iframeEl.setAttribute('style', styleStr); iframeEl.setAttribute('referrerpolicy', policy); // Necessary for ClientKey to work // Commenting out stops the "The devicemotion events are blocked by feature policy" warning in Chrome >=66 that some merchant experienced // Commenting in stops the same warnings in development (??)