bug: iframe doesn't work with data uri

[wendt88]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] v7.x
• [ ] Nightly

Current Behavior

when I add an iframe with a data uri src, it show's nothing. tried also with data uri of an image, it works as an image src, but not as an iframe src

Expected Behavior

it should show an iframe containing a <h1> with 'Hi'

Steps to Reproduce

add the following element:

<iframe src="data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C/head%3E%3Cbody%3E%3Ch1%3EHi%3C/h1%3E%3C/body%3E%3C/html%3E"></iframe>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 Ionic Framework : @ionic/vue 6.5.5

Capacitor:

Capacitor CLI : 4.6.3 @capacitor/android : 4.6.3 @capacitor/core : 4.6.3 @capacitor/ios : 4.6.3

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v16.17.0 npm : 8.12.2 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. Ionic doesn't manage iframes, so I'm not sure this is an Ionic bug. Does this issue happen in a regular Vue app without Ionic?

[wendt88]

@liamdebeasi yes, i added the code above to an other vue webseite without ionic and it works fine. also when I open the src directly in chrome it works

[liamdebeasi]

Can you reproduce the issue in an Ionic starter app and provide a link to the repo?

[wendt88]

https://github.com/wendt88/ionic-iframe-data-uri

it works on web, but not on android. in a website opened in chrome by the same device it works also fine

[liamdebeasi]

This doesn't look like an Ionic Framework bug. I removed Ionic Framework from the provided project and the issue still reproduces. Have you tried asking on https://forum.ionicframework.com/? It's possible you are running into Content Security Policy (CSP) restrictions when running in a secure context inside Capacitor.

[wendt88]

I don't think so, because:

• there is no error inside the console
• no securitypolicyviolation event gets called
• it doesn't either work with <meta http-equiv="Content-Security-Policy" content="frame-src 'self' data:"> i try to ask at https://forum.ionicframework.com/ -> https://forum.ionicframework.com/t/iframe-doesnt-work-with-data-uri/231501

[liamdebeasi]

Thanks for the reply. I don't see anything that would indicate that this is an Ionic Framework bug, and I was still able to reproduce the issue when removing Ionic Framework from your sample repo. If you think this is a Capacitor bug you could also try reporting the issue on https://github.com/ionic-team/capacitor. I am going to close this in favor of the forum thread, but let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.