如何使用CSS樣式安全地加載電子郵件內容

Question

我正在使用AngularJS動態加載電子郵件內容。 一切正常，直到我加載帶有html內容和自己的CSS樣式的電子郵件為止。 然后，電子郵件中的樣式會影響我的應用程序中的樣式。

例如，如果在電子郵件正文中為css指令p { color: #f00; } p { color: #f00; } ，然后在我的整個應用中，所有段落的顏色都變為紅色。

如何將電子郵件樣式與應用程序樣式分開？

提前致謝！

PS。 我的代碼看起來像

$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();