调整数据网址大小的iFrame

Question

说我有一个网站，例如，它具有以下CSS类：

div { border: red; }

我想在CSS类的同一页上显示存储在数据库中的电子邮件。该电子邮件具有以下HTML：

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

在我的网页上显示HTML会显示红色边框。我希望电子邮件的HTML和CSS不受已经存在的CSS的影响，因此我通过以下方式使用iframe：

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

这正常工作，但是iFrame对电子邮件的大小（示例中为500px）没有响应。因此，我添加了以下属性：

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

当我请求同一域上的网页时，此方法非常有效。但是，现在我使用它的方式却收到以下错误：

我没有从其他来源请求任何数据，有人可以解释一下为什么会发生这种情况以及是否有解决方法吗？