Used Blob url src instead of srcDoc in iframes

refs TryGhost#16960 Attempted to work around the issue of password managers not autofilling in the login form. This would have been a very simple fix, preserving the style encapsulation and requiring minimal changes. Unfortunately, it did not work.
vadimavdeev · Aug 14, 2023 · da919c8 · da919c8
1 parent 9aef028
commit da919c8
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/apps/portal/src/components/Frame.js b/apps/portal/src/components/Frame.js
@@ -2,6 +2,15 @@ import {Component} from 'react';
 import {createPortal} from 'react-dom';
 
 export default class Frame extends Component {
+    constructor(props) {
+        super(props);
+
+        this.srcUrl = URL.createObjectURL(new Blob(
+            ['<!DOCTYPE html><html><head></head><body></body></html>'],
+            { type: 'text/html'}
+        ));
+    }
+
     componentDidMount() {
         this.node.addEventListener('load', this.handleLoad);
     }
@@ -12,6 +21,7 @@ export default class Frame extends Component {
 
     componentWillUnmout() {
         this.node.removeEventListener('load', this.handleLoad);
+        URL.revokeObjectURL(this.srcUrl);
     }
 
     setupFrameBaseStyle() {
@@ -27,7 +37,7 @@ export default class Frame extends Component {
         const {children, head, title = '', style = {}, dataTestId = '', ...rest} = this.props;
         return (
             <iframe
-                srcDoc={`<!DOCTYPE html>`}
+                src={this.srcUrl}
                 data-testid={dataTestId}
                 ref={node => (this.node = node)}
                 title={title}