QWebEngineView and http headers (specifically "referer" header)

sairun

I'm trying to display a open street map on a tab widget to add locations. Apparently, the easiest way is to use QWebEngineView. The following code works mostly

    QWebEngineView *mapview = new QWebEngineView;
    mapview->load(QUrl("qrc:/html/index.html")); // (1)
    // mapview->load(QUrl("http://localhost/~sairun/prog")); // (2)
    _mainTab->addTab( mapview, tr( "Map" ) );

The version using line (2) works perfectly. I'm using an HTML page located on my Apache web-server. The HTML code for the page, which I downloaded from the web, uses leafletjs to interact with OpenStreetMap servers to get the tiles which compose the map.

<!DOCTYPE html>
<html>
<head>
    <title>OpenStreetMap Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        #osm-map { height: 450px; }
    </style>
</head>
<body>
    <div id="osm-map"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
    <script>
        // Element where we will render the map
        var mapElement = document.getElementById('osm-map');
        // Create a map in the specified element
        var map = L.map(mapElement);
        // Load and display tile layers from OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            minZoom:1,
            maxZoom: 4,
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        // Define the desired geographic coordinates
        var targetCoordinates = L.latLng('0', '0');
        // Set the initial view of the map
        map.setView(targetCoordinates, 2);
    </script>
</body>
</html>

I've also tried to store the above index.html page on a qt resource inside a directory named html(version (1)). The map is displayed correctly but the OpenStreetMap server randomly responds with a 403r error saying that "Access blocked - Referer is required by tile usage of to OpenstreetMap's volunteer-run servers: osm.wiki/blocked [sic]".

Apparently no "Referer header" is being sent. But how do I know? I've tried to put

    <meta name="referrer" content="strict-origin-when-cross-origin" />

with all its content variants (origin, strict-origin, etc) in the header of the HTML page without any success.

Paul Colby

Hi @sairun,

It's been a long time since I've played with QWebEngineView and related class, but instead of:

mapview->load(QUrl("qrc:/html/index.html"));

try:

mapview->setUrl(QUrl("qrc:/html/index.html"));

This will clear the view, and load the URL. Whereas it's not entirely clear to me (both from skimming the docs, and the current Qt source), whether load() will actually set the URL (it doesn't directly, but maybe does via some signal/slot - but then maybe not if the URL scheme is qrc), where as setUrl() definitely sets the URL and load()s it. So it may help...?

Cheers.

sairun

Hi @Paul-Colby

Thanks for the hint. Unfortubately the result is the same:

result

sairun

It seems this is related to the OpenStreetMap map provider. If you change openstreetmap.org to openstreetmap.de, the problem apparently disappears! I need to investigate this further.

L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
            minZoom:1,
            maxZoom: 4,
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

Joe von Habsburg

You use Leaflet.js . It is javascript library and working good. I use it and you do lots of thing with it.

Why you need osm ? You can try with google maps ?

Roadmap
http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}
Terrain
http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}
Altered roadmap
http://mt0.google.com/vt/lyrs=r&hl=en&x={x}&y={y}&z={z}
Satellite only
http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}
Terrain only
http://mt0.google.com/vt/lyrs=t&hl=en&x={x}&y={y}&z={z}
Hybrid
http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}

// html
<div id="map"></div>

// css
        * {
            padding: 0;
            margin: 0;
        }

        body {
            box-sizing: border-box;
            height: 100vh;
            width: 100vw;
        }

        #map {
            width: 100%;
            height: 100vh;
            z-index: 0;
        }

// js
const map = document.getElementById("map");

const myMap = L.map("map", {
    center: [0, 0],
    zoom: 8
});

L.tileLayer("http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}", {
    minZoom: 5,
    maxZoom: 15,
}).addTo(myMap);

you can release with express.js or add to your project as local file.

app.get('/', (req, res) => {
  res.sendFile(path.join(fileFolder, 'index.html'));
});

You getin Qt like that :

WebEngineView::WebEngineView(QWidget *parent)
    : QWebEngineView(parent)
{
    load(QUrl("http://localhost/"));
}

Seogbtools394

This post is deleted!

sairun

Hi @Joe-von-Habsburg

I try to avoid anything google! I already developed other software (web-based) dependent on google maps but in the meanwhile their terms and conditions changed and render the software useless...

In the present case leflet.js is working as expected. The only problem is the interaction between QWebEngineView and openstreemap servers. I don't need very detailed maps. For OSM maps I restricted the zoom from 1 to 4. You can see country borders easily at the maximum zoom level (4).

Joe von Habsburg

@sairun said in QWebEngineView and http headers (specifically "referer" header):

The only problem is the interaction between QWebEngineView and openstreemap servers.

You can try my steps.

Create your web files (html, js, css)
create express server and pubish your html
load(QUrl("http://localhost/")); (if express port 80, else http://localhost:xxxx/ )

optional use pm2 for run express for each time your computer run.

sairun

@Joe-von-Habsburg thanks for the idea. However, I want to distribute this particular application and I want it to be as independent of other sources as possible. Using openstreet maps was acceptable. Using them plus an aditional server is too much. As mentioned befor, I prefer to draw a map myself using a QGraphicsScene because the map does not have to be very detailed.