tryphotino / photino.NET

https://tryphotino.io
Apache License 2.0
889 stars 73 forks source link

Problem with "insecure origins". #25

Open peerem opened 3 years ago

peerem commented 3 years ago

When we try to access the "Notification API" or devices such as a camera or microphone, we get the following error messages.

Notification API:

The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS.

Devices:

TypeError: Cannot read property 'enumerateDevices' of undefined

philippjbauer commented 3 years ago

Hi @peerem!

Can you add information about the operating system you're using and share some example code?

I have looked into the problem a little bit and here is what I found.

I checked https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts for more information about the secure context. According to their documentation window.isSecureContext is used to determine whether the document is loaded in a secure context.

On macOS, I can determine that the Security Context is secure window.isSecureContext === true.

The problem seems to be, that when you try to get permission as seen in this example MDN Notification API Example, there's nothing that can open a dialog for the user to accept notifications.

The path forward seems to be to integrate the native notification APIs on the OS level.

For macOS that would start here: https://developer.apple.com/documentation/usernotifications?language=objc

Similarly, other APIs might have to be implemented in a similar way.

Alternatively, there might be a way to integrate a permission dialog like this one from Firefox. That is tbd though.

Screen Shot 2021-03-12 at 1 43 51 PM

Something for our roadmap.

philippjbauer commented 3 years ago

Accidentally closed ticket.

peerem commented 3 years ago

We are currently testing it under Windows, as there are still known problems under Linux and MacOS that have already been reported. We are testing the move from Chromely to Photino to eliminate the http and SignalR layers in the communication between browser and app.

The Notification API is a nice to have, but we also have built-in toasts in case someone declines notifications. Access to the camera and microphone are essential.

We finished our code as Blazor WebAssembly first, but handling many peer-to-peer connections requires multithreading. Everything works fine as a Blazor Server, except that the Notification API is not integrated in the CEF (used by Chromely). Access to the camera and microphone can easily be activated as parameters.

Here are the Typescript lines of code that work without any problems in the "normal" browser, but cause problems here:

Ask for notification permissions:

    public async requestPermission()
    {
        await Notification.requestPermission().then(permission => this.notificationsAllowed = permission == 'granted');
    }

Look for available devices:

    public async hasConnectedDevices(type: MediaDeviceKind): Promise<boolean>
    {
        var result: boolean = false;

        try
        {
            const devices = await navigator.mediaDevices.enumerateDevices();
            result = devices.filter(device => device.kind === type).length > 0;
        }
        catch (ex)
        {
            result = false;
            HF.logToConsole(ex, true);
        }

        return result;
    }

We found this when we did a quick search, but aren't experts on WebView2(Core?):

https://docs.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2permissionkind?view=webview2-dotnet-1.0.774.44

MikeYeager commented 3 years ago

Adding a helpful link for development: https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-1.0.774.44#add_permissionrequested

9ParsonsB commented 3 years ago

My company is also evaluating Photino.NET and we have a very similar requirement, but for us, as the application is going to be installed as a kiosk application, it would be ideal if the browser could be configured to have all permissions allowed - without prompting the user.

ottodobretsberger commented 3 years ago

We have just released v2 of Photino, for Windows this should be possible. SetGrantBrowserPermissions(true) would be the function you need to call. We are still keeping this on our ToDo list for features for the other OS.