37

In chrome version 47 they force you to use https to be allow using getUserMedia(). Unfortunately, I can't use https in my whole web, I only use it in the login rest (It a SPA - single page app). So, the address to the web is without https, only the login rest uses ssl. I use this repo with very little changes: https://github.com/Jmlevick/html-recorder

My question is if is there any way to use audio recorder in my web app and keep my web address with http and not https? what ideas do you have to overcome this issue?

Noampz
  • 1,185
  • 3
  • 11
  • 19

2 Answers2

84

getUserMedia allows you to listen in to the private conversations of the user. If it were enabled over unencrypted HTTP, this would allow an attacker to inject code that listens in and sends the conversations to the attacker. For example, if you if you are in a private conference room of a hotel with unencrypted WiFi, everybody in the vicinity of the hotel could listen in. Even if your app does not usually deal with sensitive conversations, an attacker could replace your code with theirs in order to listen in at a later time, when another app is in use.

Therefore, getUserMedia is only available from secure contexts. For testing, you can exempt your domain by starting Chrome with --unsafely-treat-insecure-origin-as-secure="example.com", or simply test under http://localhost/.

If you want your app to listen to the user's microphone, you must serve it via TLS. There is no way around it. If there were, it would be regarded as a security hole and fixed in the next version of the browsers.

HINT

You might have to add "http://" on the command line, e.g.: --unsafely-treat-insecure-origin-as-secure="http://example.com"

Fabian Lauer
  • 8,891
  • 4
  • 26
  • 35
phihag
  • 278,196
  • 72
  • 453
  • 469
  • Thanks! I understood the risk of sending audio in encrypted HTTP. Let put this issue a side for a second. Will it work if I use the recorder in an iframe with link to https recorder app that handle the audio recording inside my "http" app and post a message with the audio data from that iframe to his parent (my app) and then do some processing on the audio (even send it to the server in unsecured http)? – Noampz Dec 10 '15 at 09:48
  • @Noampz No, because an attacker could modify the inner frame from the outer one. For more information, see the [link on secure contexts](https://w3c.github.io/webappsec-secure-contexts/#examples-framed). – phihag Dec 10 '15 at 10:01
  • 2
    Right now you can use `getUserMedia()` in firefox without any problems on http. Is it a really a mistake ? I feel like it's in the firefox policy to allow things like this. – Teleporting Goat Oct 19 '16 at 13:06
  • @Teleporting Goat Firefox has not (yet) applied the secure context limitations on `getUserMedia`. That may be because secure contexts are a fairly recent addition in Firefox. If *things like this* includes service workers, Web Bluetooth and Encrypted Media Extensions, [those are blocked within insecure contexts already](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). – phihag Oct 19 '16 at 16:45
  • @phihag For china, don't have ssl. what to do in this situation. How to access camera without https – Deepak Nov 07 '19 at 04:33
  • How to do this on macOS? – Mick Dec 05 '19 at 15:25
  • I am developing under localhost, and have added it to the unsafely-treat-insecure-origin-as-secure exceptions. But I am still getting this error. `localhost:4400 says: getUserMedia() must be run from a secure origin: HTTPS or localhost` – Timar Ivo Batis Jun 18 '20 at 02:51
  • this can also be set from `chrome://flags/` under `Insecure origins treated as secure` – Jason Stewart Dec 02 '20 at 23:28
34

Also you can add whiltelist by opening chrome://flags and search for unsafely-treat-insecure-origin-as-secure:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Community
  • 1
  • 1
牛さん
  • 2,884
  • 3
  • 29
  • 43