Краткое руководство по встраиванию Jupyter Notebook

Энтузиасты науки о данных и машинного обучения публикуют свои исследования вместе с кодами, которые в основном написаны на Python или R, в своих блогах и статьях. Многие из нас до сих пор не могут предоставить наш код для интерактивного запуска на наших веб-страницах, не отвлекая пользователя, который постоянно читает наш блог. Новый веб-разработчик может ответить на эту загадку без какого-либо глубокого анализа.

‹iframe src = 'http: // localhost: 8888 /'› ‹/ iframe›

Приведенный выше тег HTML может решить проблему до тех пор, пока Content-Security-Policy не войдет в контекст. Зачем использовать Политику безопасности контента? Основное преимущество CSP - предотвращение использования уязвимостей межсайтового скриптинга. Это важно, потому что ошибки XSS имеют две характеристики, которые делают их особенно серьезной угрозой для безопасности веб-приложений.

  • XSS повсеместно. Межсайтовый скриптинг постоянно упоминается как один из наиболее распространенных недостатков веб-приложений; в прошлом почти все крупные приложения страдали от XSS.
  • XSS вреден. Злоумышленник, который использует такую ​​ошибку и выполняет JavaScript в контексте сеанса другого пользователя, получает полный доступ к своим данным в уязвимом приложении и во всех других приложениях, размещенных в том же домене. Во многих случаях злоумышленник может скомпрометировать учетную запись и сохранить постоянный доступ, при этом пользователь не осознает, что что-то не так.

Без учета CSP это привело бы к пагубным последствиям для веб-сайтов и серверов. Существует множество руководств по встраиванию кодов записных книжек Jupyter на ваши веб-страницы с помощью связывателя и GitHub Gist в Интернете. Ссылки приведены в конце статьи.

Давайте быстро перейдем к тому, что мы исследуем в этой статье.

В настоящее время у популярных приложений есть серверная часть на основе Java и интерфейс на основе веб. Этот феноменальный подход был вознагражден разработчиками программного обеспечения и техническими специалистами. Например, Jenkins использует привязку веб-интерфейса со степлером из серверной части Java. В таком случае в некоторых случаях это приложение должно развиваться, поддерживая машинное обучение и науку о данных, что, вероятно, привлечет огромное количество технических пользователей для использования их услуг.

Когда эти приложения используют веб-страницы, может возникнуть необходимость в интеграции популярных записных книжек, редакторов кода и песочниц. Каждый запрос из веб-интерфейса должен быть защищен и надежен для серверной части.

Давайте посмотрим, как локально встроить блокнот Jupyter в статическую веб-страницу.

  1. Убедитесь, что в вашей системе установлен ноутбук Jupyter.
jupyter -- version

2. Настройте jupyter_notebook_config.py.

  • Если у вас его нет, создайте его. Он создаст файл в ~/.jupyter/jupyter_notebook_config.py
jupyter notebook --generate-config
  • Добавьте IP-адрес и порт вашего шлюзового сервера
# 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
  • Поскольку Jupyter использует tornado для обслуживания HTTP, вам необходимо добавить заголовки CSP в tornado_settings. Убедитесь, что вы указали правильный адрес http / https для использования заголовка CSP.
c.NotebookApp.tornado_settings = {
    'headers': {
        'Content-Security-Policy': "frame-ancestors https://localhost:8080/jenkins 'self' "
    }
}
  • Наконец, пользователь предпочтет записную книжку с одной вкладкой вместо того, чтобы возиться с несколькими вкладками на одной странице. Вы должны создать custom.js в каталоге jupyter. ~/.jupyter/custom/custom.js
define(['base/js/namespace'], function(Jupyter){
    Jupyter._target = '_self';
});

3. Позже настроив все, вы можете использовать тег ‹/iframe›, чтобы успешно встроить блокнот jupyter на вашу веб-страницу.

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

вы можете настроить параметры iframe так, как хотите, на вашей странице :).

4. Известные проблемы

  • Если вы по-прежнему получаете такие ошибки, как «Ошибка подключения» в консоли. Причина может быть в том, что подключение к веб-сокетам запрещается браузерами при использовании wss. Вы можете попробовать добавить 'unsafe-inline' , и connect-src https: wss: определенно решит вашу проблему.

Я надеюсь, что все прочитали исчерпывающую статью о встраивании записной книжки Jupyter в веб-страницы.

Мир ✌.

Использованная литература:

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