Javascript 因测试中的双引号而失败答案

【问题标题】：Javascript fails because of double inverted comma in a testJavascript 因测试中的双引号而失败
【发布时间】：2016-04-18 14:47:50
【问题描述】：

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

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

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

请告诉我如何解决这个问题

我正在努力关注 - 拉拉维尔 - 引导

【问题讨论】：

您的电子邮件有 HTML 内容？还是您只想将它们作为文本转储到页面上
我想以 html 格式显示电子邮件内容
找到引号并将其替换为转义序列。
这就是我们不知道报价的问题。它们是随机的电子邮件。

标签： javascript php html twitter-bootstrap

【解决方案1】：

始终对您从客户端收到的数据进行转义，否则您将成为 XSS（跨站脚本）的受害者。

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

IFrame
阴影 DOM

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

以下是两者的示例。 Same on 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>

注意： Shadom DOM 可能不是最好的解决方案，因为它在 firefox 上默认未启用。 See this link

【讨论】：