0

Say I have a website which for example has the following CSS class:

div { border: red; }

And I would like to display e-mail's stored in a database somewhere on the same page with the CSS class. The e-mail has the following HTML:

<div style='height: 500px; background-color: red;'>Hello, I am an e-mail!</div>

Showing that HTML on my webpage will give it a red border. I would like the e-mail's HTML & CSS not be affected by the already present CSS, therefore I use an iframe in the following way:

<iframe 
    src="data:text/html;charset=utf-8,<div style='height: 500px; background-color: red;'>Hello, I am an e-mail!</div>"          
></iframe>

This works fine, however the iFrame is not responsive to the size of the e-mail (500px in the example). Therefore I add the following property:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

This works perfectly when I request a webpage on the same domain. However the way I am using it now I receive the following error:

enter image description here

I am not requesting any data from another origin, could someone please explain me why this is happening and if there is a workaround?

TimNode
  • 733
  • 6
  • 7
  • is your concern is to add an unique style to the desired tag and to prevent other pages styles to affect it? @TimNode – Dip686 Dec 15 '18 at 02:31
  • I have updated my question for clarity – TimNode Dec 15 '18 at 10:46
  • 1
    "I am not requesting any data from another origin," — Two URLs are on different origins unless their scheme, hostname and port number match. `data:` and `http:` are not the same scheme. – Quentin Dec 15 '18 at 10:50

0 Answers0