前端如何用安全沙箱防止XSS攻击?

UP主~静静 阅读 3

最近在做一个富文本编辑器的功能,用户可以输入HTML内容,但我担心XSS问题。听说可以用沙箱隔离,比如把内容放到iframe里?我试过动态创建iframe然后写入内容,但样式全乱了,而且有些脚本还是能执行。

有没有更靠谱的方案?比如用<iframe sandbox>属性?或者像DOMPurify那样先清洗再渲染?我现在的代码大概是这样:

const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-same-origin';
document.body.appendChild(iframe);
const doc = iframe.contentDocument;
doc.open();
doc.write(userInputHTML); // 这里可能包含恶意脚本
doc.close();

但测试发现如果userInputHTML里有<img src=x onerror=alert(1)>,还是会弹窗,这沙箱好像没起作用?到底该怎么正确实现安全沙箱?

我来解答 赞 0 收藏
二维码
手机扫码查看
1 条解答
Dev · 紫萱
用DOMPurify清洗输入最靠谱。别依赖iframe sandbox,它太脆弱。

import DOMPurify from 'dompurify';
const cleanHTML = DOMPurify.sanitize(userInputHTML);
doc.write(cleanHTML); // 这样就行了


沙箱属性容易漏掉危险脚本,清洗才是王道。累死人的安全问题啊。
点赞
2026-03-27 19:03