label_studio/templates/base.html - develop - vshmidt/label-studio

label_studio/templates/base.html
251 строка8 KB
Nick Skriabin
fix: BROS-664: Fix XSS via script injection in custom hotkeys (#9084)
29 дек 2025, 18:11
29 дек 2025, 18:11ea2462b
{% load static %}
{% load i18n %}
{% load rules %}
{% load filters %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="author" content="Label Studio"/>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=0.9, shrink-to-fit=no">

  <!-- Address string color -->
  <meta name="theme-color" content="#272727"> <!-- Chrome, Firefox OS and Opera -->
  <meta name="msapplication-navbutton-color" content="#272727">  <!-- Windows Phone -->
  <meta name="apple-mobile-web-app-status-bar-style" content="#272727">  <!-- iOS Safari -->

  <!-- Preload fonts -->
  <link rel="preload" href="{{ settings.HOSTNAME }}/static/fonts/Figtree-Regular.ttf" as="font" type="font/ttf"
    crossorigin="anonymous">
  <link rel="preload" href="{{ settings.HOSTNAME }}/static/fonts/Figtree-SemiBold.ttf" as="font" type="font/ttf"
    crossorigin="anonymous">


  <!-- CSS -->
  {% block app-css %}
    <link href="{{settings.FRONTEND_HOSTNAME}}/react-app/main.css?v={{ versions.backend.commit }}" rel="stylesheet">
  {% endblock %}

  {% block theme_colors %}
    {% if feature_flags.fflag_feat_front_optic_1217_theme_toggle_short %}
    <script>
      function handleThemeColor() {
        let themeColor = window.localStorage.getItem("preferred-color-scheme");
        if (themeColor === "Auto") {
          themeColor = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "Dark" : "Light"
        } else if (!themeColor) {
          themeColor = "Light";
        }
        document.documentElement.setAttribute("data-color-scheme", themeColor.toLowerCase());
      }
      handleThemeColor();
    </script>
    {% endif %}
  {% endblock %}

  {% block app-scripts %}
  {% endblock %}

  {% if settings.FRONTEND_SENTRY_DSN %}
    <!-- Sentry -->
    <script
    src="https://browser.sentry-cdn.com/5.17.0/bundle.min.js"
    integrity="sha384-lowBFC6YTkvMIWPORr7+TERnCkZdo5ab00oH5NkFLeQUAmBTLGwJpFjF6djuxJ/5"
    crossorigin="anonymous"></script>
  {% endif %}

  <script nonce="{{request.csp_nonce}}">
    window.exports = () => {};
  </script>

  {% block page_labeling %}
    <title>Label Studio</title>
    <link href="{{settings.HOSTNAME}}{% static 'images/favicon.ico' %}" rel="shortcut icon"/>
  {% endblock %}

  {% block head %}
  {% endblock %}

  {% get_current_language as LANGUAGE_CODE %}
  {% get_available_languages as LANGUAGES %}

</head>

<body>

<div class="app-wrapper"></div>

<template id="main-content">
  <main class="main">

    <!-- Space & Divider -->
    {% block divider %}
      <div class="ui divider divider-wide"></div>
    {% endblock %}

    <!-- Content -->
    {% block content %}
    {% endblock %}

  </main>
</template>

<template id="context-menu-left">
  {% block context_menu_left %}{% endblock %}
</template>

<template id="context-menu-right">
  {% block context_menu_right %}{% endblock %}
</template>

<script id="app-settings" nonce="{{request.csp_nonce}}">
  var __customHotkeys = {{ user.custom_hotkeys|json_dumps_ensure_ascii|escape_lt_gt|safe }};

  // Filter custom hotkeys for editor-specific ones
  var editorCustomHotkeys = {};
  var prefixRegex = /^(annotation|timeseries|audio|regions|video|image_gallery|tools):(.*)/;

  for (let key in __customHotkeys) {
      const match = key.match(prefixRegex);
      if (match) {
          const [, prefix, shortKey] = match;

          // Get the current value
          const value = __customHotkeys[key];

          // Check if value has active property set to false
          if (value && value.active === false) {
              // Create a copy of the value with key set to null
              const modifiedValue = {...value, key: null};
              editorCustomHotkeys[shortKey] = modifiedValue;
          } else {
              // Use the original value
              editorCustomHotkeys[shortKey] = value;
          }
      }
  }

  function lookupHotkey (lookup) {
      // Check if custom hotkeys exist and the lookup is in there
      if (window.APP_SETTINGS?.user?.customHotkeys && lookup in window.APP_SETTINGS.user.customHotkeys) {
          const hotkeyValue = window.APP_SETTINGS.user.customHotkeys[lookup];

          // If active is explicitly false, return a copy with key set to null
          if (hotkeyValue && hotkeyValue.active === false) {
              return {...hotkeyValue, key: null};
          }

          // Otherwise return the original value
          return hotkeyValue;
      }
      // Fallback to default hotkeys if available
      else if (window.DEFAULT_HOTKEYS && lookup in window.DEFAULT_HOTKEYS) {
          return window.DEFAULT_HOTKEYS[lookup];
      }
      // No hotkey found
      else {
          return null;
      }
  }

  // Parse the default editor keymap
  var defaultEditorKeymap = JSON.parse({{ settings.EDITOR_KEYMAP|safe }});

  // Merge the default keymap with custom editor hotkeys
  var mergedEditorKeymap = Object.assign({}, defaultEditorKeymap, editorCustomHotkeys);

  window.APP_SETTINGS = Object.assign({

    user: {
      id: {{ user.pk }},
      username: "{{user.username}}",
      firstName: "{{user.first_name}}",
      lastName: "{{user.last_name}}",
      initials: "{{user.get_initials}}",
	email: "{{user.email}}",
	customHotkeys: __customHotkeys,

      allow_newsletters: {% if user.allow_newsletters is None %}null{% else %}{{user.allow_newsletters|yesno:"true,false"}}{% endif %},
      {% if user.avatar %}
      avatar: "{{user.avatar_url|safe}}",
      {% endif %}
      {% block app_user_extra %}{% endblock %}
    },
    lookupHotkey: lookupHotkey,
    debug: {{settings.DEBUG|yesno:"true,false"}},
    polling: {% if feature_flags.fflag_dev_disable_polling_killswitch_short %}false{% else %}true{% endif %},
    hostname: "{{settings.HOSTNAME}}",
    version: {{ versions|json_dumps_ensure_ascii|safe }},
    sentry_dsn: {% if settings.FRONTEND_SENTRY_DSN %}"{{ settings.FRONTEND_SENTRY_DSN }}"{% else %}null{% endif %},
    sentry_rate: "{{ settings.FRONTEND_SENTRY_RATE }}",
    sentry_environment: "{{ settings.FRONTEND_SENTRY_ENVIRONMENT }}",
    editor_keymap: mergedEditorKeymap,
    feature_flags: {{ feature_flags|json_dumps_ensure_ascii|safe }},
    feature_flags_default_value: {{ settings.FEATURE_FLAGS_DEFAULT_VALUE|json_dumps_ensure_ascii|safe }},
    version_edition: "{{ settings.VERSION_EDITION }}",
    server_id: {{ request.server_id|json_dumps_ensure_ascii|safe }},
    collect_analytics: {{ settings.COLLECT_ANALYTICS|yesno:"true,false" }},
    local_files_document_root: {{ settings.LOCAL_FILES_DOCUMENT_ROOT|json_dumps_ensure_ascii|safe }},
    local_files_serving_enabled: {{ settings.LOCAL_FILES_SERVING_ENABLED|yesno:"true,false" }},

    data_manager: {
      max_users_to_display: {{ settings.DM_MAX_USERS_TO_DISPLAY }},
    },

    {% block app_more_settings %}
      page_title: "Label Studio",
      flags: {
        allow_organization_webhooks: {{settings.ALLOW_ORGANIZATION_WEBHOOKS|yesno:"true,false"}},
        storage_persistence: {{ settings.STORAGE_PERSISTENCE|yesno:"true,false" }},
      },
    {% endblock %}

  }, {% block frontend_settings %}{}{% endblock %});
</script>

{% block app-js %}
<script src="{{settings.FRONTEND_HOSTNAME}}/react-app/runtime.js?v={{ versions.backend.commit }}"></script>
{% comment %}
  NOTE: purposely setting this to not cache using backend commit as we do not intend this to change frequently.
  If for any reason we need to invalidate the cache, we can do so by changing the version number.
{% endcomment %}
<script src="{{settings.FRONTEND_HOSTNAME}}/react-app/vendor.js?v=1"></script>
<script src="{{settings.FRONTEND_HOSTNAME}}/react-app/main.js?v={{ versions.backend.commit }}"></script>
{% endblock %}

{% block bottomjs %}
  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
  <script nonce="{{request.csp_nonce}}">

    // CSRF
    (function() {
      function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
      }

      // Apply CSRF token
      var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
        }
      });
    })();

  </script>
{% endblock %}

<div id="dynamic-content">

  {% block billing-checks %}
  {% endblock %}

</div>

</body>
</html>