如何处理 Highcharts 内联样式以防止违反 Content-Security-Policy？答案

【问题标题】：How can I deal with Highcharts inline styles to prevent Content-Security-Policy violations?如何处理 Highcharts 内联样式以防止违反 Content-Security-Policy？
【发布时间】：2020-09-09 04:31:06
【问题描述】：

我有一个使用 Highcharts 向用户显示数据的应用，它运行良好。我现在将 Content-Security-Policy 标头应用于此应用程序，并且再次运行良好（目前处于仅报告模式）。

问题在于 Highcharts 使用内联样式，这些显然被报告为违反 CSP。因此，我想防止这些违反政策的行为，而不仅仅是允许内联样式（这会降低拥有 CSP 的价值）。

因此，我的问题是：有没有办法将 nonce 注入 Highcharts 以停止违规行为？

错误报告是：

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https: 'nonce-M/dyQoRv6ZpuH6yj1/q6tA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-7wj/+4oyhC/Un8WKFeS81vcvueSVhV/Hk8Tuw/NlDC8='), or a nonce ('nonce-...') is required to enable inline execution. H @ highcharts.js:91

该应用是使用 webpacker 和 Highcharts 7.2.1 使用 Rails 6.0.2 构建的。

我的config/initializers/content_security_policy.rb 文件几乎是默认文件：

# frozen_string_literal: true

Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.font_src    :self, :https, :data
  policy.img_src     :self, :https, :data
  policy.object_src  :none
  policy.script_src  :self, :https
  policy.style_src   :self, :https
  # If you are using webpack-dev-server then specify webpack-dev-server host
  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development? || Rails.env.test?

  # Specify URI for violation reports
  # policy.report_uri "/csp-violation-report-endpoint"
end

# If you are using UJS then enable automatic nonce generation
Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }

Rails.application.config.content_security_policy_report_only = true

【问题讨论】：

你考虑过使用styledMode吗？ api.highcharts.com/highcharts/chart.styledMode
好主意。事实上，考虑到我在图表上更改应用自定义，这可能是唯一的方法。不过，我认为这是我所做的唯一样式更改，因此实施起来可能还不错！也许您应该将此作为正确的答案！
请告诉我这是否适合您的情况。如果一切正常，我会再次建议它作为答案；）
我已经开始做这方面的工作了（不幸的是，工作量很大），而且看起来很有效。尽管在浏览器的 Inspector 中查看时，Highcharts 仍然在元素上放置了大量的内联样式，但似乎这些是在 CSP 检查完成后创建的，因此不再有任何抱怨，这就是我所追求的。如果您可以将此作为正确答案，我会将其标记为正确方法。谢谢！

标签： ruby-on-rails highcharts content-security-policy

【解决方案1】：

如原始问题的 cmets 中所述，答案是启用 styledMode。这会停止使用内联样式的 HighCharts，而是使用样式表。这可能意味着更新默认样式表以反映您希望图表的外观，因为在默认模式下用于执行此操作的命令现在将不执行任何操作（颜色、线条、标记等）。

API：https://api.highcharts.com/highcharts/chart.styledMode

【讨论】：