Javascript由于测试中的双反转逗号而失败


Javascript fails because of double inverted comma in a test

我的数据库中保存了一些HTML格式的文本,这些文本是从电子邮件中保存到datatbase中的。

有时,电子邮件中有单引号或双引号,但没有引号。由于这个原因,页面上的其他脚本停止工作。我如何才能防止我从数据库中读取的html代码不影响我的页面样式或脚本。

您可以将我的应用程序视为简单的电子邮件阅读应用程序。我从数据库中读取的任何电子邮件,即使它有不正确的/buggy html,我也不希望它破坏我的代码。

请让我知道如何解决这个问题

我正在做以下工作-Laravel-引导

始终转义从客户端接收的数据,否则您将成为XSS(跨站点脚本)的受害者。

也就是说,如果你真的想这样做,那么有两种方法可以使电子邮件的内容不会影响你的代码。

  1. IFrame
  2. 阴影DOM

这两个页面都有一个与父页面不同的上下文,因此它们不会干扰您的代码,除非其中的代码手动尝试访问父页面。

以下是两者的示例。与JSFiddle 相同

<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="iframeParent">
</div>
<div id="shadowParent">
</div>
<script>
    var emailContent = "<h1>helloworld</h1>";
    var iframeContainer = $("#iframeParent");
    $('<iframe/>').appendTo(iframeContainer).on("load", function () {
        $(this).contents().find("body").html(emailContent);//firefox
    }).contents().find("body").html(emailContent);//chrome
    var shadowContainer = $("#shadowParent");
    alert(shadowDom);
    var shadowDom = shadowContainer.get(0).createShadowRoot();
    shadowDom.innerHTML = emailContent;
</script>
</body>
</html>

注意:Shadow DOM可能不是最好的解决方案,因为默认情况下它在firefox上没有启用。请参阅此链接