From 1235b03f9ad3d37a0cd9b3894e62542c2d56bc6d Mon Sep 17 00:00:00 2001 From: Lionel Palacin Date: Thu, 21 Dec 2023 10:14:08 -0300 Subject: [PATCH 1/2] rename env variables to be used in React --- example-apps/internal-knowledge-search/app-ui/.env | 6 +++--- example-apps/internal-knowledge-search/app-ui/README.md | 2 +- .../src/store/slices/searchApplicationSettingsSlice.ts | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/example-apps/internal-knowledge-search/app-ui/.env b/example-apps/internal-knowledge-search/app-ui/.env index 069c2d7a..b8a8eea7 100644 --- a/example-apps/internal-knowledge-search/app-ui/.env +++ b/example-apps/internal-knowledge-search/app-ui/.env @@ -1,3 +1,3 @@ -SEARCH_APP_NAME=some-search-application -SEARCH_APP_API_KEY=xxxxxxxxxxxxxxxxxxx -SEARCH_APP_ENDPOINT=https://some-search-end-point.co \ No newline at end of file +REACT_APP_SEARCH_APP_NAME=some-search-application +REACT_APP_SEARCH_APP_API_KEY=xxxxxxxxxxxxxxxxxxx +REACT_APP_SEARCH_APP_ENDPOINT=https://some-search-end-point.co \ No newline at end of file diff --git a/example-apps/internal-knowledge-search/app-ui/README.md b/example-apps/internal-knowledge-search/app-ui/README.md index b8b5e5e1..59b121eb 100644 --- a/example-apps/internal-knowledge-search/app-ui/README.md +++ b/example-apps/internal-knowledge-search/app-ui/README.md @@ -106,5 +106,5 @@ To be able to use the index filtering and sorting in the UI you should update th ### Setting the environment variables -You need to set `SEARCH_APP_NAME`, `SEARCH_APP_API_KEY` and `SEARCH_APP_ENDPOINT` inside [.env](.env) to the corresponding values, which you'll get when [creating a search application](https://www.elastic.co/guide/en/enterprise-search/current/search-applications.html). +You need to set `REACT_APP_SEARCH_APP_NAME`, `REACT_APP_SEARCH_APP_API_KEY` and `REACT_APP_SEARCH_APP_ENDPOINT` inside [.env](.env) to the corresponding values, which you'll get when [creating a search application](https://www.elastic.co/guide/en/enterprise-search/current/search-applications.html). diff --git a/example-apps/internal-knowledge-search/app-ui/src/store/slices/searchApplicationSettingsSlice.ts b/example-apps/internal-knowledge-search/app-ui/src/store/slices/searchApplicationSettingsSlice.ts index 329cd536..c7e54110 100644 --- a/example-apps/internal-knowledge-search/app-ui/src/store/slices/searchApplicationSettingsSlice.ts +++ b/example-apps/internal-knowledge-search/app-ui/src/store/slices/searchApplicationSettingsSlice.ts @@ -1,9 +1,9 @@ import {createSlice, PayloadAction} from '@reduxjs/toolkit'; import {SearchApplicationSettingsModel} from "../../models/SearchApplicationSettingsModel"; const initialState: SearchApplicationSettingsModel = { - appName: process.env.SEARCH_APP_NAME || "some-search-application", - apiKey: process.env.SEARCH_APP_API_KEY || "xxxxxxxxxxxxxxxxxxx", - searchEndpoint: process.env.SEARCH_APP_ENDPOINT || "https://some-search-end-point.co", + appName: process.env.REACT_APP_SEARCH_APP_NAME || "some-search-application", + apiKey: process.env.REACT_APP_SEARCH_APP_API_KEY || "xxxxxxxxxxxxxxxxxxx", + searchEndpoint: process.env.REACT_APP_SEARCH_APP_ENDPOINT || "https://some-search-end-point.co", }; const searchApplicationSettingsSlice = createSlice({ From ba41ec12973be8a964c62dd3a2829a47ca7a8671 Mon Sep 17 00:00:00 2001 From: Lionel Palacin Date: Wed, 3 Jan 2024 14:28:10 +0100 Subject: [PATCH 2/2] Add security disclaimer about exposing API Key --- example-apps/internal-knowledge-search/app-ui/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/example-apps/internal-knowledge-search/app-ui/README.md b/example-apps/internal-knowledge-search/app-ui/README.md index 59b121eb..176ea99e 100644 --- a/example-apps/internal-knowledge-search/app-ui/README.md +++ b/example-apps/internal-knowledge-search/app-ui/README.md @@ -108,3 +108,6 @@ To be able to use the index filtering and sorting in the UI you should update th You need to set `REACT_APP_SEARCH_APP_NAME`, `REACT_APP_SEARCH_APP_API_KEY` and `REACT_APP_SEARCH_APP_ENDPOINT` inside [.env](.env) to the corresponding values, which you'll get when [creating a search application](https://www.elastic.co/guide/en/enterprise-search/current/search-applications.html). +### Security consideration + +As you provide the `REACT_APP_SEARCH_APP_API_KEY`, make sure this is a restricted API Key as this will be available in the browser. More information about Search application security and alternatives approaches can be found [here](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-application-security.html).