Fix #10506 Adding possibility to fetch legends images using Bearer token

web/client/plugins/TOC/components/Legend.jsx

@@ -14,11 +14,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
-    addAuthenticationParameter,
     addAuthenticationToSLD,
-    clearNilValuesForParams
+    clearNilValuesForParams,
+    getAuthenticationMethod
 } from '../../../utils/SecurityUtils';
 import Message from '../../../components/I18N/Message';
+import SecureImage from './SecureImage';
 import { randomInt } from '../../../utils/RandomUtils';
 
 /**
@@ -85,23 +86,26 @@ class Legend extends React.Component {
 
             const cleanParams = clearNilValuesForParams(layer.params);
             const scale = this.getScale(props);
-            let query = assign({}, {
-                service: "WMS",
-                request: "GetLegendGraphic",
-                format: "image/png",
-                height: props.legendHeight,
-                width: props.legendWidth,
-                layer: layer.name,
-                style: layer.style || null,
-                version: layer.version || "1.3.0",
-                SLD_VERSION: "1.1.0",
-                LEGEND_OPTIONS: props.legendOptions
-            }, layer.legendParams || {},
-            props.language && layer.localizedLayerStyles ? {LANGUAGE: props.language} : {},
-            addAuthenticationToSLD(cleanParams || {}, props.layer),
-            cleanParams && cleanParams.SLD_BODY ? {SLD_BODY: cleanParams.SLD_BODY} : {},
-            scale !== null ? { SCALE: scale } : {});
-            addAuthenticationParameter(url, query);
+            let query = assign(
+                {},
+                {
+                    service: "WMS",
+                    request: "GetLegendGraphic",
+                    format: "image/png",
+                    height: props.legendHeight,
+                    width: props.legendWidth,
+                    layer: layer.name,
+                    style: layer.style || null,
+                    version: layer.version || "1.3.0",
+                    SLD_VERSION: "1.1.0",
+                    LEGEND_OPTIONS: props.legendOptions
+                },
+                layer.legendParams || {},
+                props.language && layer.localizedLayerStyles ? {LANGUAGE: props.language} : {},
+                addAuthenticationToSLD(cleanParams || {}, props.layer),
+                cleanParams && cleanParams.SLD_BODY ? {SLD_BODY: cleanParams.SLD_BODY} : {},
+                scale !== null ? { SCALE: scale } : {}
+            );
 
             return urlUtil.format({
                 host: urlObj.host,
@@ -114,7 +118,23 @@ class Legend extends React.Component {
     }
     render() {
         if (!this.state.error && this.props.layer && this.props.layer.type === "wms" && this.props.layer.url) {
-            return <img onError={this.onImgError} onLoad={(e) => this.validateImg(e.target)} src={this.getUrl(this.props)} style={this.props.style}/>;
+            const url = this.getUrl(this.props);
+            const authMethod = getAuthenticationMethod(url);
+            return (
+                authMethod === "bearer" ?
+                    <SecureImage
+                        onError={this.onImgError}
+                        onLoad={(e) => this.validateImg(e.target)}
+                        src={url}
+                        style={this.props.style}
+                    /> :
+                    <img
+                        onError={this.onImgError}
+                        onLoad={(e) => this.validateImg(e.target)}
+                        src={url}
+                        style={this.props.style}
+                    />
+            );
         }
         return <Message msgId="layerProperties.legenderror" />;
     }

web/client/plugins/TOC/components/SecureImage.jsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { securityTokenSelector } from '../../../selectors/security';
+
+const SecureImage = connect(
+    createSelector(
+        securityTokenSelector,
+        (token) => {
+            return { token };
+        }
+    ),
+    {}
+)(({
+    alt,
+    src,
+    token,
+    ...props
+}) => {
+    const [imageSrc, setImageSrc] = useState('');
+
+    useEffect(() => {
+        const fetchImage = async() => {
+            try {
+                const response = await fetch(src, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const imageUrl = URL.createObjectURL(blob);
+                    setImageSrc(imageUrl);
+                } else {
+                    console.error('Failed to fetch image:', response.statusText);
+                }
+            } catch (error) {
+                console.error('Error fetching image:', error);
+            }
+        };
+
+        fetchImage();
+
+        // Clean up the URL object when the component unmounts
+        return () => {
+            if (imageSrc) {
+                URL.revokeObjectURL(imageSrc);
+            }
+        };
+    }, [src, token]);
+
+    return (
+        <img src={imageSrc} alt={alt} {...props} />
+    );
+});
+
+export default SecureImage;