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/"));
}