使用 JQuery UI 对话框小部件时如何遵守内容安全策略？答案

【问题标题】：How to respect Content Security Policy when using JQuery UI dialog Widget?使用 JQuery UI 对话框小部件时如何遵守内容安全策略？
【发布时间】：2021-01-19 17:48:31
【问题描述】：

我正在使用 JQuery UI 对话框小部件 (https://api.jqueryui.com/dialog/) 的现有项目上设置 CSP 指令。使用 CSP，我不想允许使用内联样式。

不幸的是，当对话框函数被调用时，JQuery UI 会自动将内联样式应用于某些对话框元素。

我知道可以在加载元素后覆盖和清除样式属性，但这种可能的修复不会阻止 CSP 警告。

有没有办法调用对话框函数，完全避免生成内联样式指令？

【问题讨论】：

欢迎来到 Stack Overflow。本质上，不，不是开箱即用。您可以使用 $.widget() 来改变 Dialog 的副本，使其不再写入内联样式。如果您在 Dialog 中使用任何其他小部件，例如 Drag 或 Resize，它们总是使用无法避免的内联样式。

标签： css jquery-ui dialog content-security-policy inline-styles

【解决方案1】：

如果jQuery UI不使用粗略的element.innerHTML = "<tag style = 'inline_styles_here'>"方法，而是使用attr()函数，即jQuery-csp-inline-style-fix。

还有一个hack for setAttribute()函数，它涵盖了jQuery和纯JavaScript。

【讨论】：