Exploring the dynamic alteration of the src attribute within an <iframe> embedded in a Vue template led to a concerning discovery. The test involved changing the src every second, which ultimately resulted in 88% of available memory being consumed on a Windows 10 Machine with 32 GB Memory and Firefox Browser, eventually causing the computer to freeze.
Prior to this, similar issues were observed on a Raspberry Pi 4 (4GB) using chromium-browser. Switching between multiple vue components containing iframes caused memory leakage over a few days, leading to crashes with the infamous "he's dead jim" smiley face.
Below is the snippet of code used for the test:
<template>
<div id="app">
<iframe :src="src" />
{{ count }}
{{ src }}
</div>
</template>
<script>
export default {
data() {
return {
src : "",
source : [
"https://example.com/embeddedcontent/1",
"https://example.com/embeddedcontent/2",
"https://example.com/embeddedcontent/3",
"https://example.com/embeddedcontent/4"
],
count : 0,
interval : null
}
},
mounted() {
const interval = setInterval(() => {
this.src = this.source[ this.count % this.source.length ];
this.count = this.count + 1
}, 2000);
this.interval = interval;
},
beforeDestroy() {
clearInterval(this.interval);
}
}
</script>
Observations
- Consistent memory leaks across different systems and browsers (
Win10/Firefox,Raspbian/chromium-browser) - Memory issues persisted during development (HMR) and production builds from Vue
- Unknown nature of iframe content due to ability to set the
srcproperty to any URL
Solutions Needed
Considering only browser tab refreshes as a temporary fix, there must be alternatives to using iframes for external website content integration within a Vue App. Is there a method to completely clean up the iframe without leaving residual effects?
Update 2021/02/25
Further testing with Edge Browser exhibited the same increasing memory consumption trend. Firefox Private mode showed minimal impact. No disparity between production and development builds was noted. Additionally, a vanilla electron app script without Vue demonstrated similar rapid memory growth.