Cannot read properties of null (reading 'postMessage')

Question

I'm embedding a discord widget on a C++ application using QWebEngineView; the widget is working all fine, the problem is the login.

I'm able to login to my discord account from the widget, but after the login window is closed and returns to widget, I get these errors on console:

js: Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
js: Unrecognized Content-Security-Policy directive 'prefetch-src'.
js: Uncaught (in promise) function(){}
js: Unrecognized Content-Security-Policy directive 'prefetch-src'.
js: Unrecognized Content-Security-Policy directive 'prefetch-src'.
js: Uncaught (in promise) Error: Cannot find module './notosans-400-normalitalic.woff2'
js: Unrecognized Content-Security-Policy directive 'prefetch-src'.
js: Unrecognized Content-Security-Policy directive 'prefetch-src'.
js: Uncaught (in promise) #<Object>
js: [DEPRECATED] Please use `subscribeWithSelector` middleware
js: Window state not initialized window-1
js: Window state not initialized window-1
js: Window state not initialized window-1
js: Uncaught TypeError: Cannot read properties of null (reading 'postMessage')

Reproducible example:

class WebEnginePage : public QWebEnginePage
{
    Q_OBJECT

public:
    WebEnginePage(QObject* parent = nullptr) : QWebEnginePage(parent) {}

    QWebEnginePage* createWindow(QWebEnginePage::WebWindowType type) override
    {
        QWebEnginePage* page = new QWebEnginePage(this);
        // To make the page be opened in the same window.
        connect(page, &QWebEnginePage::urlChanged, this, [=]
        {
            setUrl(page->url());
            page->deleteLater();
        });
        return page;
    }
};

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);
    QWebEngineView* view = new QWebEngineView;
    WebEnginePage* page = new WebEnginePage(view);
    page->setUrl(QUrl("qrc:/test.html"));
    view->setPage(page);
    view->setMinimumSize(800, 600);
    view->show();
    return app.exec();
}

I also tried to install a url request interceptor in the page profile and add the policy header seen in the error log "interest-cohort", but I continued getting the errors:

RequestsInterceptor* requestsInterceptor = new RequestsInterceptor;
page->profile->setUrlRequestInterceptor(requestsInterceptor);


class RequestsInterceptor : public QWebEngineUrlRequestInterceptor
{
    Q_OBJECT    
public:
    virtual void interceptRequest(QWebEngineUrlRequestInfo& info) override
    {
        info.setHttpHeader("Permissions-Policy", "interest-cohort=()");
        info.setHttpHeader("Access-Control-Allow-Origin", "*");
        //qDebug() << info.firstPartyUrl();
        //qDebug() << info.navigationType();
        //if (info.firstPartyUrl().toString().contains("https://s-e.widgetbot.io/api/auth/discord/cb"))
        //  info.setHttpHeader("Access-Control-Allow-Origin", "*");
    }
};

I've been searching the error Cannot read properties of null (reading 'postMessage') and found this issue, I'm confused if the problem is on Javascript side, the widget side or on QWebEngine's.

The widget works fine when tested on a browser and i'm able to login:

// qrc:/test.html
<script src='https://cdn.jsdelivr.net/npm/@widgetbot/crate@3' async defer>
const crate = new Crate({
    server: '1173813471083761744',
    channel: '1173813471083761747',
})
</script>

In the snippet when i attempt to login, Stack Overflow sandbox blocks access to local storage and it fails.

Here's another working option: https://jsfiddle.net/wdzgo31y/

https://i.imgur.com/ibmyYnO.gif

Answer 1

The error seems from JS. May not be from your code but instead from the discord SDK/Package.

The postMessage is a browser API used to send back the login results to your main window. If you are calling the discord login from a process will encounter this issue. And that what the reason you are not getting this error in the browser.