Enige tijd terug was ik bezig met een project waarbij ik een email bericht moest tonen binnen een website. In de meeste gevallen word er gekozen om de email content direct in de pagina te laden. Echter dit is gevaarlijk en zorgt voor html en javascript injectie en bied hiermee de mogelijkheid dat een hacker jouw website of applicatie kan overnemen. Dus stook in enige tijd in het vinden van een oplossing hiervoor en die heb ik gevonden. De oplossing is een <iframe>. Nu hoor ik je denken <iframe> is een oude technologie die we willen verbannen van het internet. Daarbij heb je zeker een punt echter is het tegelijkertijd wel een veilige manier om externe content geïsoleerd in te laden binnen een website. Misschien is dit ook wel de enigste manier om dit veilig te doen.
Mijn oplossing is als volgt. Ik zet de email om naar base64 en laad deze in de iframe via src=”data:text/html;base64,[content]”. Probleem wat we hierop wel gelijk hebben is dat wanneer er linkjes in de mail staan dat deze altijd in het zelfde venster/tab geopend word. Hiervoor heb ik een stukje javascript toegevoegd waarmee links altijd in een nieuwe tab word geopend.
Hieronder tref je de code van mijn oplossing aan. De code is geschreven in combinatie met de template engine Twig, maar kan zonder enige moeite worden vertaald naar elke gewenste programmeer taal.
<div id="email-content-body">
{% set openBlank = ("
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>$('a').click(function(e) {e.preventDefault();window.open(this.href);});</script>
<style>img {max-width:100%!important;}</style>
") %}
<iframe src="data:text/html;base64,{{ (emailContent ~ openBlank)|base64 }}"
height="100%" width="100%"
style="border: 0;min-height: 600px;"
></iframe>
</div>Ik hoop dat ik jullie heb kunnen helpen met deze oplossing en hoor graag of en waarvoor je mijn oplossing heb weten te gebruiken.
