Audio Recorder Embedded in Discourse Site Reports Lack of HTTPs

Submitted by cogdog on Wed, 11/03/2021 - 16:26
cogdog's picture
Forums: 
Bugs in content types

This may not be an H5P issue but am seeking to know how the Audio Recorder's test for HTTPs might fail.

Our Discourse powered education community allows users to use iframes to insert H5P. The work fine in our site (which is fully HTTPs enabled) but a recent test with the Audio Recorder reports this error:

Access to microphone is not allowed in your browser since this page is not served using HTTPS. Please contact the author, and ask him to make this available using HTTPS

All urls in the embed are HTTPs. This is the place where the error is reported in our discourse:

https://connect.oeglobal.org/t/contribute-your-voice-to-oeg-voices-opening-segment/3213/19

The same embed works as expected in a WordPress site https://kitchen.opened.ca/microphone/

 I do have a bug reported to the Discourse developers, but wanted to see if there was a possible issue on the H5P side.

Also as a suggestion for the error messge quoted above, please consider not assuming a pronoun of "him" for the developer!

 

Attachments: 
Image icon not-https.jpg
Content types: 
Audio Recorder
otacke's picture

otacke

Wed, 11/03/2021 - 18:19

Hi!

Trust no one. Especially not custom error messages. When Audio Recorder tries to access the microphone via the browser's MediaDevices.getUserMedia() function, it unfortunately does neither differentiate between different possible errors that the aforementioned function might report nor list all the possible causes - but just says the microphone was blocked or there's that HTTPS error. If you get that message, running the page without encryption can be one reason, but there are a couple of other security related reasons: in particular Feature Policies (or Permission Policies) ... 

Feature Policies? Feature policies are what determines what device feature a page of "sub-page" - let's say H5P within in an iframe - may use or not use. In a very small nutshell: An iframe on a page may have to explicitly allow the contents inside the iframe to use features such as a microphone (or the GPS location, or the camera, ...). Just to make things more interesting, that requirement may depend on the browser used and the way the server is configured. Please find more details at https://h5p.org/node/904272.

Now let's answer the initial question here: The HTTPS message is probably misleading. It's more likely that the platform does not set the microphone feature policy for H5P's iframe (or you didn't in the embed code) and that your browser is strict. Please try adding the microphone feature policy (ultimately it means to add allow="microphone *" to the iframe element HTML code) and/or to change browser settings. Still, if the server blocks the microphone feature policy, not setting that you change will help here.

Best,
Oliver

cogdog's picture

cogdog

Wed, 11/03/2021 - 19:49

Thanks Oliver, I understand better. I tried adding the allow="microphone *" to the iframe, no effect on Chrome. I checked by browser settings, no block on my site, but also no way to add.

I am cheking another setting on the discourse platform that might be needed to force https, but that according to what you explain here is not the issue. This is not super critical, I was just curious to figure out why it does not work there.

Still, and tiny, I would suggest changing that "him" in the error message...

BV52's picture

BV52

Thu, 11/04/2021 - 17:45

Hi cogdog,

You mentioned that the site is not blocked did you check on the list of allowed sites if your site is included. If it is not on the list you can trigger Chrome to prompt you if you want to allow your microphone by enabling the option "Sites can ask to use your microphone" in the browser settings. I would also suggest that you provide a sample page so that we can check.

For the suggestion I will forward this to the developers in the H5P core team.

-BV

cogdog's picture

cogdog

Thu, 11/04/2021 - 18:47

Thanks- my Chrome setting is enabled for option "Sites can ask to use your microphone" and there is a list of allowed sites I recognize that I have previously approved access.

My H5P iframe includes the option that should trigger the request.

allow="microphone *;"

 

This is the example from an embed in a Discouse post that generates the error

https://connect.oeglobal.org/t/contribute-your-voice/3213/19

The same H5P operates as it should in the H5P enabled WordPress site it was created on https://kitchen.opened.ca/microphone/ as well as a second WordPress site w/o the plugin using the embed code https://cogdogblog.com/h5p-mic/

otacke's picture

otacke

Thu, 11/04/2021 - 19:49

My H5P iframe includes the option that should trigger the request.

allow="microphone *;"

Not on the page that you link to. Are you sure that the allow property is allowed on Discourse? It's possible that it gets filtered out in order to prevent maliciously embedding remote content. 

cogdog's picture

cogdog

Thu, 11/04/2021 - 20:32

Yikes, you are correct. Discourse is strict on iframe parameters and removed them. I should have checked, thanks Oliver. I'm chasing them now to allow the allows.

Close this report!

otacke's picture

otacke

Fri, 11/05/2021 - 18:03

Hi Alan!

I'll conclude then that there's at least a ticket to improve the error message - although adding support for feature policies (see pull request referenced in https://h5p.org/node/904272) might help a little more.

Closing this report is out of my powers ;-) Maybe BV can.

Cheers,
Oliver

BV52's picture

BV52

Fri, 11/05/2021 - 18:09

Not exactly but I guess we can chalk it up as "pending-resolution" since we are not sure what Discourse will do :-)

Thanks for the help Oliver!

Note: I'll chase the pronoun of "him"

-BV