Embed Jupyter Notebook into static webpages locally

Quick tutorial on embedding your Jupyter Notebook

Data Science and Machine Learning enthusiasts are publishing their researches along with codes which mostly written in Python or R in their own blogs and articles. Many of us are still struggling on exposing our code to run interactively on our web pages without distracting the user who reads continuously our blog. A novel web developer can answer for this puzzle without any deep analysis.

<iframe src="http://localhost:8888/"></iframe>

The above HTML tag could solve the problem until Content-Security-Policy accounts into the context. Why use the Content Security Policy? The primary benefit of CSP is preventing the exploitation of cross-site scripting vulnerabilities. This is important because XSS bugs have two characteristics which make them a particularly serious threat to the security of web applications.

• XSS is ubiquitous. Cross-site scripting has consistently been listed as one of the most common flaws in web applications; almost all large applications have suffered from XSS in the past.
• XSS is damaging. An attacker who exploits such a bug and executes JavaScript in the context of another user’s session gets full access to their data in the vulnerable application, and in all other applications hosted in the same domain. In many cases the attacker can compromise the account and retain persistent access, without the user realizing something is wrong.

Without considering CSP, it would end up with harmful consequences for the websites and servers. There are lots of tutorials for embedding Jupyter notebook codes in your webpages with the help of binder and GitHub gist in the internet. Links are provided in the end of article.

Lets move on quickly what we are exploring in this article.

Nowadays, popular applications have Java based back-end and web based front end. This phenomenal approach has been rewarded by software developers and tech geeks. For example Jenkins uses Web UI binding with stapler from Java back end. In such case, in some points these application should evolve by supporting Machine Learning and Data science which probably attract immense of tech users to use their services.

When these applications are using webpages, there might be a need of integrating popular notebooks, code editors and sand boxes. Every requests from web UI should be secured and robust for the back ends.

Lets see how to embed your Jupyter notebook into a static web page locally.

1. Make sure you installed Jupyter notebook in your system.

jupyter -- version

2. Configure jupyter_notebook_config.py

• If you don’t have one generate it. It will genearte the file in ~/.jupyter/jupyter_notebook_config.py

jupyter notebook --generate-config

• Add your gateway server IP and port

# These are default configs. You have change if you are using 
# Enterprise Jupyter Hub or other gateway servers.
c.NotebookApp.ip = ‘localhost’
c.NotebookApp.port = 8888

• As Jupyter uses tornado for HTTP serving, you need to add CSP headers into tornado_settings. Ensure you have given the correct http/https address to use CSP header.

c.NotebookApp.tornado_settings = {
    'headers': {
        'Content-Security-Policy': "frame-ancestors http://localhost:8080/jenkins 'self' "
    }
}

• Finally, user will prefer one-tab notebook instead of messing with multiple tabs in a single page. You should create a custom.js in jupyter directory. ~/.jupyter/custom/custom.js

define(['base/js/namespace'], function(Jupyter){
    Jupyter._target = '_self';
});

3. Later configuring all, you can use </iframe> tag to embed your jupyter notebook in your web page successfully.

<f:entry>
    <iframe width = "700" height=" 600" src="http://localhost:8888 </iframe>
</f:entry>

you can adjust the parameters of iframe as you want to fit on your page :).

After embedding Jupyter notebook in config.jelly

4. Known issues

• If you are still getting errors like “Connection failed” in your console. The reason may be on web sockets connection are denied by browsers when using wss. You may try adding 'unsafe-inline' and connect-src https: wss: will solve your problem definitely.

I hope all had read a comprehensive article about embedding a Jupyter notebook in webpages.

Peace ✌.

References:

1. https://elc.github.io/posts/embed-interactive-notebooks/
2. https://www.w3schools.com/tags/tag_iframe.asp