michelson/lazy_high_charts

HighChart not compatible with CSP

Closed this issue · 4 comments

gbataille commented

Hey guys,

so I'm working on small gem that should help the adoption and the reporting of CSP. (see http://www.w3.org/TR/CSP/).
I wanted to add charts in my views. I chose highcharts and your lib. While I appreciated some aspects of it (you don't see any JS for example), I have a core problem. CSP rightly considers the inline JS as dangerous. and you are doing online JS unfortunately. since my gem is for CSP protected site, this is clearly incompatible. But I wanted to give you a heads up because one could hope that CSP is going to be more and more used in the future.

it might be a good idea for you to propose other integration methods. As an example, here is my commit: gbataille/csp_report@282e4b5
Basically I compose the Chart object in the controller. I put it in a div data attribute in the view. In the JS, I intercept this data and use the div as the graph hook.
That is clearly slightly more complex, with more moving pieces, but it is considered a better way from a security perspective and will work with CSP directives on.

I'll let you have a look and see for yourself. Happy to talk about it if you want.

Cheers.

michelson commented

Hi Gregory

a simple approach to your problem is render the chart in a js template, and
display it making an ajax call. so , for example you visit show.haml, then
you make an ajax call to show.js.haml

#show.js.haml

$(".chart").html(" #{escape_javascript(render( "chart"))} ")

#_chart.haml partial

....
= high_chart "products_chart", @products_chart

....

is this solution a valid path for your issue ?

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Fri, Aug 23, 2013 at 10:10 AM, Gregory Bataille <notifications@github.com

wrote:

Hey guys,

so I'm working on small gem that should help the adoption and the
reporting of CSP. (see http://www.w3.org/TR/CSP/).
I wanted to add charts in my views. I chose highcharts and your lib. While
I appreciated some aspects of it (you don't see any JS for example), I have
a core problem. CSP rightly considers the inline JS as dangerous. and you
are doing online JS unfortunately. since my gem is for CSP protected site,
this is clearly incompatible. But I wanted to give you a heads up because
one could hope that CSP is going to be more and more used in the future.

it might be a good idea for you to propose other integration methods. As
an example, here is my commit: gbataille/csp_report@282e4b5gbataille/csp_report@282e4b5
Basically I compose the Chart object in the controller. I put it in a div
data attribute in the view. In the JS, I intercept this data and use the
div as the graph hook.
That is clearly slightly more complex, with more moving pieces, but it is
considered a better way from a security perspective and will work with CSP
directives on.

I'll let you have a look and see for yourself. Happy to talk about it if
you want.

Cheers.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/144
.

gbataille commented

hey,

I did not know you could have JS templates, never seen those.
I can't say if this is valid, I'll have to test it cause I have no clue
what the server will produce with that. I guess if that produces an Ajax
call from a js file on the client side, that does work. it's a construct
I'm not familiar with in Rails. I'll give it a shot.

thanks

On Fri, Aug 23, 2013 at 8:44 PM, Miguel Michelson Martinez <
notifications@github.com> wrote:

Hi Gregory

a simple approach to your problem is render the chart in a js template,
and
display it making an ajax call. so , for example you visit show.haml, then
you make an ajax call to show.js.haml

#show.js.haml

$(".chart").html(" #{escape_javascript(render( "chart"))} ")

#_chart.haml partial

....
= high_chart "products_chart", @products_chart

....

is this solution a valid path for your issue ?

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Fri, Aug 23, 2013 at 10:10 AM, Gregory Bataille <
notifications@github.com

wrote:

Hey guys,

so I'm working on small gem that should help the adoption and the
reporting of CSP. (see http://www.w3.org/TR/CSP/).
I wanted to add charts in my views. I chose highcharts and your lib.
While
I appreciated some aspects of it (you don't see any JS for example), I
have
a core problem. CSP rightly considers the inline JS as dangerous. and
you
are doing online JS unfortunately. since my gem is for CSP protected
site,
this is clearly incompatible. But I wanted to give you a heads up
because
one could hope that CSP is going to be more and more used in the future.

it might be a good idea for you to propose other integration methods. As
an example, here is my commit: gbataille/csp_report@282e4b5<
gbataille/csp_report@282e4b520dff63c81bab6a8c022a418bdc0d0d5d>

Basically I compose the Chart object in the controller. I put it in a
div
data attribute in the view. In the JS, I intercept this data and use the
div as the graph hook.
That is clearly slightly more complex, with more moving pieces, but it
is
considered a better way from a security perspective and will work with
CSP
directives on.

I'll let you have a look and see for yourself. Happy to talk about it if
you want.

Cheers.

—
Reply to this email directly or view it on GitHub<
https://github.com/michelson/lazy_high_charts/issues/144>
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/144#issuecomment-23183181
.

michelson commented

Hi Gregory,

check this out
http://guides.rubyonrails.org/v3.2.13/action_controller_overview.html

class UsersController < ApplicationController
def index
@users = User.all
respond_to do |format|
format.html # renders index.html.erb
format.js # renders index.js.erb
end
end
end

index action it use the same resource route for all format, so if you have
a link with remote: true option in the controller it will detect that´s an
ajax request so it will serve the js template

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Sat, Aug 24, 2013 at 3:36 AM, Gregory Bataille
notifications@github.comwrote:

hey,

I did not know you could have JS templates, never seen those.
I can't say if this is valid, I'll have to test it cause I have no clue
what the server will produce with that. I guess if that produces an Ajax
call from a js file on the client side, that does work. it's a construct
I'm not familiar with in Rails. I'll give it a shot.

thanks

On Fri, Aug 23, 2013 at 8:44 PM, Miguel Michelson Martinez <
notifications@github.com> wrote:

Hi Gregory

a simple approach to your problem is render the chart in a js template,
and
display it making an ajax call. so , for example you visit show.haml,
then
you make an ajax call to show.js.haml

#show.js.haml

$(".chart").html(" #{escape_javascript(render( "chart"))} ")

#_chart.haml partial

....
= high_chart "products_chart", @products_chart

....

is this solution a valid path for your issue ?

regards

Atte.
Miguel Michelson Martinez
www.artenlinea.com

On Fri, Aug 23, 2013 at 10:10 AM, Gregory Bataille <
notifications@github.com

wrote:

Hey guys,

so I'm working on small gem that should help the adoption and the
reporting of CSP. (see http://www.w3.org/TR/CSP/).
I wanted to add charts in my views. I chose highcharts and your lib.
While
I appreciated some aspects of it (you don't see any JS for example), I
have
a core problem. CSP rightly considers the inline JS as dangerous. and
you
are doing online JS unfortunately. since my gem is for CSP protected
site,
this is clearly incompatible. But I wanted to give you a heads up
because
one could hope that CSP is going to be more and more used in the
future.

it might be a good idea for you to propose other integration methods.
As
an example, here is my commit: gbataille/csp_report@282e4b5<

gbataille/csp_report@282e4b520dff63c81bab6a8c022a418bdc0d0d5d>

Basically I compose the Chart object in the controller. I put it in a
div
data attribute in the view. In the JS, I intercept this data and use
the
div as the graph hook.
That is clearly slightly more complex, with more moving pieces, but it
is
considered a better way from a security perspective and will work with
CSP
directives on.

I'll let you have a look and see for yourself. Happy to talk about it
if
you want.

Cheers.

—
Reply to this email directly or view it on GitHub<
https://github.com/michelson/lazy_high_charts/issues/144>
.

—
Reply to this email directly or view it on GitHub<
https://github.com/michelson/lazy_high_charts/issues/144#issuecomment-23183181>

.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/144#issuecomment-23204661
.

xiaods commented

any example, please see my bootstrap: https://github.com/xiaods/highcharts-bootstrap