gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:01:16 25 4
gpt4 key购买 nike

不确定这是否可能,我的要求是这样的——我有一个包含三个 div 的网页,它们被包裹在另一个具有 display:flex 的主 div 中,以便所有三个 div 可以彼此相邻显示.现在的问题是,在中间的 div 中,我从我的数据库中提取了一些数据,它本身包含 DIV。 div 可能没有正确关闭,我:少数可能没有用/div 关闭。因此,当数据出现在中间的 div 上时,第三个 div 有时会超出 flexbox ,从而导致布局出现问题。有什么办法可以避免这种情况吗?希望我能够解释我的问题。

最佳答案

通常,我们绝不会在未对页面进行适当清理以帮助防止 XSS 等安全漏洞的情况下将用户生成的内容注入(inject)页面。请研究 HTML 清理并确保您正在安全地处理此用户生成的内容。

话虽如此,浏览器对格式不正确的标记相当宽容,并会尽力呈现您提供的内容。因此,为防止此用户生成的内容弄乱您的页面,您需要将这些文档与页面的其余部分隔离开来。

与其将此用户生成的 html 直接放在页面中,不如将其作为 srcdoc 提供给 iframe,如下所示:

<!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>

关于html - CSS - 防止动态 DIV 在网站上呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807061/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com