fix: remove inline style applied to iframe (#2343)

Adyen · Oct 9, 2023 · afaa669 · afaa669
1 parent 5e51574
commit afaa669
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/dirty-bugs-rush.md 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
@@ -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
@@ -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<IframeProps> {
                 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
@@ -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
@@ -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
@@ -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 (??)