WMSLayer Popup shows a sameorigin error

ClintonLunnUGS · ‎08-13-2024

Hi all,

Minimum example: https://codepen.io/clintonlunn/pen/eYweyzj?editors=1001

I am trying to troubleshoot why I cannot get a popup working when I am pulling a WMS layer from Geoserver. When I click, the popup shows, but only an error message is populated. The console shows: "Refused to display 'https://geoserver225-ffmu3lsepa-uc.a.run.app/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

When I copy the request into my api client tool (https://www.usebruno.com/), I get the data back that I expect.

See working curl request below:

```

curl 'https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/ows?bbox=-13716921.203505095%2C3336548...' \
-H 'authority: geoserver225-ffmu3lsepa-uc.a.run.app' \
-H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
-H 'accept-language: en-US,en;q=0.9' \
-H 'referer: https://cdpn.io/' \
-H 'sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"' \
-H 'sec-ch-ua-mobile: ?0' \
-H 'sec-ch-ua-platform: "macOS"' \
-H 'sec-fetch-dest: iframe' \
-H 'sec-fetch-mode: navigate' \
-H 'sec-fetch-site: cross-site' \
-H 'sec-fetch-user: ?1' \
-H 'upgrade-insecure-requests: 1' \
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' \
--compressed

```

Pasting code from the original snippet below:

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>WMSLayer | Sample | ArcGIS Maps SDK for JavaScript 4.25</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.30/"></script>

  <script>
    require(["esri/Map", "esri/views/SceneView", "esri/layers/WMSLayer"], (
      Map,
      SceneView,
      WMSLayer,
    ) => {
      const layer = new WMSLayer({
        url: "https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/wms?",
        sublayers: [{
          name: "quaternaryfaults",
          queryable: true,
          popupEnabled: true
        }]
      });
      const map = new Map({
        basemap: 'streets',
        layers: [layer]
      });
      const view = new SceneView({
        container: "viewDiv",
        map: map,
        spatialReference: {
          wkid: 102100
        },
        center: [-110, 39.6949],
        zoom: 8
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

ClintonLunnUGS · ‎08-14-2024

I seem to have answered my own question. For me, the key is to use the fetchFeatureInfoFunction function, and make a custom popup template there. I'm not sure if there's a better way to do this, definitely open to suggestions.

In addition, I am not sure how long this wms source will be active for (this is a dev server that we are test driving Geoserver on). I will try to swap it out with another WMS layer that hopefully won't go away.

See working code below:

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>WMSLayer | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.30/"></script>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/WMSLayer", "esri/Graphic"], (Map, MapView, WMSLayer, Graphic) => {

      const url = "https://geoserver225-ffmu3lsepa-uc.a.run.app/geoserver/public/ows";
      const sublayerName = "quaternaryfaults";

      const layer = new WMSLayer({
        url,
        sublayers: [{
          name: sublayerName,
          popupEnabled: true,
          queryable: true
        }],
        fetchFeatureInfoFunction: async (query) => {
          console.log('running feature info func', layer);

          // Set info_format to request GeoJSON.
          query.info_format = "application/json";

          // Construct the URL for the feature info request.
          const featureInfoUrl = `${layer.featureInfoUrl}?${new URLSearchParams(query).toString()}`;
          
          try {
            const response = await fetch(featureInfoUrl);

            if (!response.ok) {
              throw new Error("Network response was not ok");
            }
            
            const data = await response.json();

            return data.features.map(
              (feature) => new Graphic({
                attributes: feature.properties,
                popupTemplate: {
                  title: "Quaternary Faults {faultnum}",
                  content: [{
                    type: "fields",
                    fieldInfos: [
                      { fieldName: "label", label: "Description" },
                      { fieldName: "faultage", label: "Fault Age" },
                      { fieldName: "faultnum", label: "Fault Number" },
                      { fieldName: "qffhazardunit", label: "QFF Hazard Unit" },
                      { fieldName: "usgs_link", label: "USGS Link" },
                      { fieldName: "faultnum", label: "Fault Number" },
                    ]
                  }]
                }
              })
            );
          } catch (error) {
            console.error("Failed to fetch feature info:", error);
            return [];
          }
        }
      });

      const map = new Map({
        basemap: 'streets',
        layers: [layer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        spatialReference: {
          wkid: 102100
        }
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>