Plotly doesn't display because of Content Security Policy

[jmatsushita]

Hi there,

When running

var plt = require('plotly-notebook-js')

var myPlot = plt.createPlot([{ x: [1,2,3], y: [3,4,5] }], { title: 'Plotly in Jupyter!' });

$$html$$ = myPlot.render();

I get the following error message in the dev console:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-RZDXV0IqxSd/acUJ7Xz1gAlZt9WVh3exdjHW6bPU0zI='), or a nonce ('nonce-...') is required to enable inline execution.
(anonymous function) @ result-view.coffee:138

It works fine in IJavascript.

Cheer!

Jun

[n-riesco]

cc/ @lgeiger How do you reckon? Should we wrap all the text/html results in a webview?
And if so, how about image/svg, I think SVG can contain JS?

[rgbkrk]

how about image/svg, I think SVG can contain JS?

SVG can indeed contain JS.

[lgeiger]

If we get it to work with webviews it would be great! We should do this directly in transformime. Maybe using webviews would also fix #369.

I don't think we need webviews for SVG though.

[n-riesco]

@rgbkrk @lgeiger Are there any cons to using webviews for all text/html content?

What are the cons from SVGs?

[lgeiger]

Are there any cons to using webviews for all text/html content?

I wanted to ask the same question. I never used webviews.
I'm fine with using webviews for SVGs as well if JS in SVGs is a commonly used thing.

[n-riesco]

The physicist in me would be very pleased with an SVG version of:

I don't know of any problems with webview in Chrome/Electron/Atom. But it isn't a standard HTML tag, and I think it's safer if transformine would let the user decide whether to use it or not.

[lgeiger]

The physicist in me would be very pleased with an SVG version of:

That's a good argument 🎉

I did a quick test with webviews in hydrogen but javascript didn't work. I used this transformer.

HTMLTransform = (mimetype, data, document) ->
    webview = document.createElement('webview')
    webview.src = 'data:text/html,' + data
    return webview

HTMLTransform.mimetype = 'text/html'

transform = transformime.createTransform([HTMLTransform, MarkdownTransform])

Do you have an idea why this isn't working?

[rgbkrk]

Should that src attribute be 'data:text/html;charset=utf-8,' + data?

[rgbkrk]

I appended that directly into Atom like so:

[lgeiger]

I tested again and found my assumption was a bit rash. Basic javascript works but plotly still doesn't 😞

[n-riesco]

@lgeiger Last time I looked into using plotly-notebook-js in the notebook, the code to inject Plotly.js into the notebook was broken. I posted a workaround here. But it won't work with webviews, because Ploty.js would have to be injected into each webview.

Here's an example for testing purposes that works in the notebook and that I would expect it to work in webviews too:

var output = [
    "<div id='my-timer'",
    "     style='display:inline-block;padding:0.25em;border:1px dashed black;'",
    ">0</div>",
    "",
    "<script>",
    "var div = document.getElementById('my-timer');",
    "var counter = 0;",
    "var id = setInterval(update, 1000);",
    "function update() {",
    "    counter += 1;",
    "    div.innerHTML = '' + counter;",
    "    if (counter >= 10) clearInterval(id);",
    "}",
    "</script>",
].join("\n");

$$.html(output);

This example is for IJavascript, but it can easily be adapted to IPython.

[lgeiger]

Here's an example for testing purposes that works in the notebook and that I would expect it to work in webviews too:

Yes it works in webviews 👍. Thanks for the example.

I tried using plotly in python. This works in the notebook but not in webviews:

import plotly
from plotly.graph_objs import Scatter, Layout

plotly.offline.init_notebook_mode()
plotly.offline.iplot({
    "data": [Scatter(x=[1, 2, 3, 4], y=[4, 3, 2, 1])],
    "layout": Layout(title="hello world")})