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

Question

I am using AngularJS to dynamically load the emails content. Everything works perfectly fine until the moment when I load email with html content and with own css style. Then style from email affects style in my application.

For example if in email body is css directive p { color: #f00; } p { color: #f00; } , then in my entire app all paragraphs change color to red.

How to separate email styles from application styles?

Thanks in advance!

PS. My code looks like

$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;
    };

    /* ... */
};

And view:

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

Answer 1

The easiest way I can think of doing this is writing it into an 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();