如何使用 CSS 样式安全地加载电子邮件内容

Question

我正在使用 AngularJS 来动态加载电子邮件内容。在我加载带有 html 内容和自己的 css 样式的电子邮件之前，一切都运行良好。然后电子邮件中的样式会影响我的应用程序中的样式。

例如，如果在电子邮件正文中是 css 指令 p { color: #f00; }，那么在我的整个应用程序中，所有段落的颜色都会变为红色。

如何区分电子邮件样式和应用程序样式？

提前致谢！

附言。我的代码看起来像

$scope.loadMessage = function(message_uid){

    $scope.loadingMessage = true;

    $http({
        url: baseApiURL + 'mail/' + message_uid,
        method: 'GET',
        headers: {'Authorization': userApiKey},
    }).then(showMessage, errorDuringLoadMessage);

    showMessage = function(r) {
        $scope.message.body = $sce.trustAsHtml(r.data.message);
        $scope.message.subject = r.data.subject;
        $scope.message.from = r.data.from;
        $scope.loadingMessage = false;
    };

    /* ... */
};

并查看：

<div class="panel panel-success">
  <div class="panel-body" ng-hide="loadingMessage" ng-bind-html="message.body">
</div>

Answer 1

我能想到的最简单的方法是将其写入 iframe。

var frame = document.createElement('iframe');
/* position, style, and append iframe here... */
var frameDoc = frame.contentWindow.document;
frameDoc.open();
frameDoc.write($scope.message.body);
frameDoc.close();