CSP Violation on OTP QR-code

[easydatawarehousing]

When using the OTP feature and displaying the otp-setup page I'm getting a CSP violation, both on Firefox and Chrome. Reason is the qr-code svg image, all 'pixels' have a style attribute. This is hardcoded in gem 'rqrcode'.

It is possible to prevent the csp violation in two ways:

• add :unsafe_inline to the content security policy's 'style_src' element
• override the rendering of the qr-code and append .gsub('style="fill:#000"', '') to the generated svg string. This should always work since the default fill color of an svg rectangle is black, adding a white background color to the element containing the svg is necessary

Are there any other solutions? What would be the preferred solution?

[jeremyevans]

I think the preferred solution would be to modify rqrcode to support an approach that doesn't require setting inline styles. You could try doing that and sending a pull request to rqrcode to see if they would be open to such an approach.

[easydatawarehousing]

There seems to have been some discussion about this topic for rqrcode gem: whomwah/rqrcode#51. But not implemented or code was removed later. In this discussion a possible solution was mentioned that I was not aware of: allow specific inline styles by adding a hash to the CSP. When changing code for CSP like this:

# Allow inline style (fill:#000) on QR-code svg
# Hash calculated as: Base64::encode64(Digest::SHA256.digest('fill:#000')).strip
csp.style_src :self, :unsafe_hashes, [:sha256, 'hXLriEz22xKNlZLBZHXTURsF5XZHj1Bkjo1s7SNTzSI=']

This works in Chrome, no more CSP violations. In Firefox there is still an error but the qr-code is displayed okay.

Also making this change to have the qr-code rendered as a path, instead of separate elements, which is more compact:

auth_class_eval do
  def otp_qr_code
    RQRCode::QRCode.new(otp_provisioning_uri).as_svg(module_size: 8, viewbox: true, use_path: true)
  end
end

[jeremyevans]

I'm open to trying out the use_path option. Let me do some testing with it. If it works fine, we can switch to that.

[easydatawarehousing]

That would be great, thanks!

[jeremyevans]

use_path seems like a good change to make, but it doesn't fix your issue, since even with use_path, there is still a 'style="fill:#000"' on the path element. You'll probably need to send a pull request to rqrcode to not add an inline style, and instead accept a class to use.

[easydatawarehousing]

True, there is still one inline style tag present in the path version svg. Maybe that is a good thing, I don't know, there could be browsers/devices out there that require a fill color.
But the trick with adding a hash to the CSP header works with both the path and non-path svg, since the content of the style tag is always 'fill:#000'.