时间戳

首页 > 解决方案 > CSS - 防止动态 DIV 在网站上呈现

html - CSS - 防止动态 DIV 在网站上呈现

问题描述

不确定这是否可能，我的要求是这样的——我有一个网页，其中包含三个 div，这些 div 被包裹在另一个具有 display:flex 的主 div 中，这样所有三个 div 都可以彼此相邻出现。现在的问题是，在中间的 div 中，我从我的数据库中提取了一些数据，这些数据本身包含 DIV。div 可能未正确关闭，即：很少有可能无法使用 /div 关闭。因此，当数据出现在中间 div 上时，第三个 div 有时会超出弹性框，从而导致布局出现问题。有没有办法避免这种情况？希望我能够解释我的问题。

标签： htmlcss

解决方案

作为一项规则，我们绝不会将用户生成的内容注入页面，而无需对其进行适当的清理，以帮助防止 XSS 等安全漏洞。请研究 HTML 清理并确保您正在安全地处理此用户生成的内容。

话虽如此，浏览器对格式不正确的标记非常宽容，并会尽力呈现您提供给他们的内容。因此，为了防止该用户生成的内容与您的页面混淆，您需要将这些文档与页面的其余部分隔离开来。

您可以将其作为 srcdoc 提供给 iframe，而不是直接将该用户生成的 html 放到页面中，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>foo</title>
    <style type="text/css" media="screen">
      .container {
        display: flex;
      }
      .one, .two, .three {
        height 200px;
      }
      .one {
        background-color: red;
      }
      .two {
        background-color: green;
      }
      .three {
        background-color: blue;
      }

      .inline {
        border: none;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="one">
        <iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
      </div>
      <div class="two">
        <iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
      </div>
      <div class="three">
        <iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
      </div>
    </div>
  </body>
</html>

推荐阅读