问题描述
我正在使用 node.js,我想为某些内容设置 CSP,例如 JavaScript 和 CSS。我可以使用 nonces 和 hashes,但是我如何允许 HTML 属性,例如:
<div style="color:blue;" onclick="myFunction()"></div>
由于这两个都是 CSS 或 JavaScript,我的 CSP 阻止了它们。我能做什么?我不想实现 unsafe-inline
。
解决方法
'unsafe-hashes'
令牌在 CSP 规范中用于 HTML 属性。但它在 Safari 中仍然是 not supported。
因此,您有很多程序员的选择,它们取决于您准备重写代码的深度:
-
在将完成的 HTML 代码发送到浏览器之前,请务必在服务器上拦截它,以提取
style='...'
和onclick='...'
构造,并将它们替换为安全构造(样式类和addEventListeners()
用于脚本)。
可能 NodeJS 有一些有用的插件。 -
使用样式,您可以将
style="color:blue;"
替换为data-style="color:blue;"
和 通过 that 之类的脚本处理所有这些。
只需相应地调整它并使用安全的结构,如el.style.backgroundColor = ...
但不是不安全的Element.setAttribute(style)
。 -
对于内联事件处理程序,您可以使用 this 技术(用于 jQuery,将其重写为使用 addEventListeners)。
-
使用最佳实践完全重写代码 - 分离标记和数据。
将所有style="color:blue;"
移动到类中 (class='blueColor'`)。为了便于理解,您可以指定类名称,如“颜色-蓝色”、“显示-隐藏”等。
在单独的脚本中用 addEventListener() 替换所有内联事件处理程序。