html设置csp:style-src 'self'后导致js的dom.innerHTML='<div style="position:absolute;">'代码报错
作者:zeke | 时间:Mar 4, 2025 5:43:55 PM | 访问量:2
<p>这个问题是html的安全设置等级高,其中style设置为self表示CSP 限制了从不受信任的源加载内联样式,导致js在修改dom时包含行内样式的代码报错!</p><p>1.先了解下什么是csp:全称是Content-Security-Policy (CSP),是一种浏览器安全策略。</p><p>2.html设置csp:style-src 'self'有什么效果?</p><p>限制了从不受信任的源加载内联样式,js执行添加dom元素时,如果包含样式,执行的效果是:js依然会执行成功,style内容会被忽略。</p><p><img src="/api/file/view?id=7298988355499327489"></p><p>上图是js执行的断点,其中 style="position:absolute;" 会被忽略,导致div定位失败。界面效果错乱</p><p><br></p><p>3.如何解决 js的dom.innerHTML='<div style="position:absolute;">'代码报错?</p><p>强制用class寻找到这个元素,给他加上 position:absolute;样式,不要通过js去添加样式</p>